<template>
  <!-- 卡清单管理 -->
  <div class="container">
    <!-- 搜索条件区 -->
    <div class="search-section">
      <Search :SearchForm="SearchForm" @query="initData" @reset="reset" />
    </div>

    <div class="SynchronousData">
      <div class="title">因运营商的流量消耗数据存在延时，查看实时数据请点击【同步最新流量】按钮 </div>
      <!-- 同步数据 -->
      <a-button type="primary" @click="syncData">同步数据</a-button>
    </div>

    <a-table row-key="iccid" :data="tableData" :columns="columnsData" :pagination="false" :scroll="{ x: 'auto' }"
      :loading="loading">
      <template #iccidStatus="{ record }">
        <a-tag color="#7bc616" v-if="record.iccidStatus == '正常'">{{ record.iccidStatus }}</a-tag>
        <a-tag v-else>{{ record.iccidStatus }}</a-tag>
      </template>
      <template #DatapackageStatus="{ record }">
        <a-tag color="#7bc616" v-if="record.DatapackageStatus == '已激活'">{{ record.DatapackageStatus }}</a-tag>
        <a-tag v-else>{{ record.DatapackageStatus }}</a-tag>
      </template>
      <template #id="{ record }">
        <!-- 查看流量消耗 -->
        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handletrafficUseDialog(record)">详情</a>
        <!-- 解绑卡和绑定卡 -->
      </template>
    </a-table>

    <div class="pagtion">
      <a-pagination :total="pagination.total" v-model:current="pagination.current" show-total show-jumper show-page-size
        @change="evChangePage" @page-size-change="pagesChange" />
    </div>
    <!-- 查看流量消耗 -->
    <trafficUseDialog ref="trafficUseDialogRef" @submit="initData()" />
    <Add v-model="showAdd"></Add>

  </div>
</template>

<script setup>
import { onMounted, ref, getCurrentInstance, h } from "vue";
import { columns, SearchForm } from "./config";
import { cardInfoList, syncFlowData } from "@/api/path/lotCard.api"
import trafficUseDialog from "./trafficUseDialog.vue";
import { Getdictionary, tableFunction ,filterDict} from '@/mixins/index.js'
import { sanitizeObject } from '@/utils/utils'
import Add from './add.vue'
import Search from '@/components/Search/index.vue'
import { Message } from "@arco-design/web-vue";
const { proxy } = getCurrentInstance()
import { useI18n } from 'vue-i18n'
const { t } = useI18n();
const statusList = ref([]);
const serviceList = ref([]);
const pagination = ref({
  total: 0,
  pageSize: 10,
  current: 1,
})
const columnsData = ref([])
const userType = ref(JSON.parse(localStorage.getItem('user_login_information'))?.userType)
const showAdd = ref(false)
const loading = ref(false)
const trafficUseDialogRef = ref()
const setMealList = ref([])

const processData = (data) => {
  return (data.records || []).map((item, index) => {
    const mergedItem = { ...item, ...item.Info };
    const sanitizedItem = sanitizeObject(mergedItem);
    return {
      ...sanitizedItem,
      payType: item.payType == 0 ? 'Prepay' : 'Postpay',
      periodOfSilence: item.periodOfSilence || '---' + '/月',
      DatapackageStatus: item.dataPackage[0]?.status,
      dataUsage: item.dataPackage[0]?.dataUsage ? item.dataPackage[0]?.dataUsage + '/MB' : '0' + '/MB',
      dataTotal: item.dataPackage[0]?.dataTotal ? item.dataPackage[0]?.dataTotal + '/MB' : '0' + '/MB',
      dataUsageTotal: item.dataUsageTotal ? item.dataUsageTotal + '/MB' : '---',
      productName: item.dataPackage[0]?.productName,
      packagePlantype: filterDict(setMealList.value, item.isRecharge)
    }
  })
}

const { tableData, evChangePage, initData, reset } = tableFunction(pagination.value, cardInfoList, processData)


// 详情
const handletrafficUseDialog = (data) => {
  trafficUseDialogRef.value.open(data)
}


const pagesChange = (size) => {
  pagination.value.pageSize = size
  initData()
}

// 获取字典
const handleDictValue = async () => {
  let dict = await Getdictionary(['mainCardStatus', 'activationPackageMethod', 'setMeal'])
  statusList.value = dict[0]
  serviceList.value = dict[1]
  setMealList.value = dict[2]
}

// 同步数据
const syncData = async () => {
  let list = []
  tableData.value.forEach(item => {
    list.push(item.iccid,)
  })
  loading.value = true
  let res = await syncFlowData({ iccid: list })
  if (res.code === 200) {
    Message.success('同步成功')
    loading.value = false
    initData()
  }
}


onMounted(async () => {
  await handleDictValue()
  await initData()
  if (userType.value != 1) {
    columnsData.value = columns.filter(res => res.dataIndex !== 'productName'); // 过滤掉不满足条件的项
  } else {
    columnsData.value = columns;
  }

})
</script>

<style scoped lang="less">
.pagtion {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}

.search-section {
  margin-top: 20px;
  margin-bottom: 20px;
}

.SynchronousData {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;

  .title {
    font-size: 16px;
    color: #d1402f;
  }
}

.top-actions {
  margin-bottom: 20px;
}

.container {
  .head-title {
    display: flex;
    justify-content: space-between;
  }

  .form-row {
    display: flex;

    .form-row-col {
      width: 25%;
      display: flex;
      align-items: center;

      .form-row-label {
        width: 120px;
        text-align: right;
      }
    }
  }
}
</style>
