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

    <a-table row-key="iccid" :data="dataSource" :columns="columns" :pagination="false" :scroll="{ x: 'auto' }">
      <template #poolNum="{ record }">
        <span>{{ record.poolName }}</span>
        <br />
        <span>{{ record.poolId }}</span>
      </template>
      <template #dataUsageTotal="{ record }">
        <span>{{ record.dataUsageTotal }}MB</span>
      </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="intData()" />
    <Add v-model="showAdd"></Add>

  </div>
</template>

<script setup>
import { onMounted, ref, getCurrentInstance, h } from "vue";
import { columns,SearchForm } from "./config";
import { cardInfoList } from "@/api/path/lotCard.api"
import trafficUseDialog from "./trafficUseDialog.vue";
import { Getdictionary } from '@/mixins/index.js'
import {sanitizeObject} from '@/utils/utils'
import Add from './add.vue'
import Search from '@/components/Search/index.vue'
const { proxy } = getCurrentInstance()
import { useI18n } from 'vue-i18n'
const { t } = useI18n();
const statusList = ref([]);
const sourceList = ref([]);
const serviceList = ref([]);
const dataSource = ref([]);
const SearchFormList = ref({});
const pagination = ref({
  total: 0,
  pageSize: 10,
  current: 1,
})
const showAdd = ref(false)

const trafficUseDialogRef = ref()


const intData = async (item) => {
  if(item){
    SearchFormList.value = item
  }
  const param = {
    current: pagination.value.current,
    size: pagination.value.pageSize,
    ...SearchFormList.value
  }
  const { data } = await cardInfoList(param)
  dataSource.value = (data.records || []).map((item, index) => {
    const payType = item.payType == 0 ? 'Prepay' : 'Postpay';
    const mergedItem = { ...item, ...item.Info };
    const sanitizedItem = sanitizeObject(mergedItem);
    return {
      ...sanitizedItem,
      payType: payType,
      SilenceEndtime: '一个月',
      usedBg: '0',
      usableBg: '0',
      DatapackageStatus:item.dataPackage[0]?.status,
      dataUsage: item.dataPackage[0]?.dataUsage?item.dataPackage[0]?.dataUsage:'0' + '/MB',
      dataTotal: item.dataPackage[0]?.dataTotal?item.dataPackage[0]?.dataTotal:'0' + '/MB',
    }
  })
  pagination.value.total = data.total
}

const reset = (item)=>{
  pagination.value.current = 1
  SearchFormList.value = item
  intData()
}

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


const evChangePage = (page) => {
  pagination.value.current = page
  intData()
}

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

// 获取字典
const handleDictValue = async () => {
  // sourceList.value = await Getdictionary('source')
  statusList.value = await Getdictionary('mainCardStatus')
  serviceList.value = await Getdictionary('activationPackageMethod')
}


onMounted(() => {
  handleDictValue()
  intData()
})
</script>

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

.head-title-right {
  .m-r-10 {
    margin-right: 10px;
  }

}

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

.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>
