<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="1000px"
    @close="close"
  >
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-date-picker
          v-model="queryForm.defaultTime"
          type="month"
          size="small"
          :placeholder="$t('defalult.xzrq')"
        />
        <el-button type="primary" size="small" @click="search">
          {{ $t('defalult.cx') }}
        </el-button>
      </vab-query-form-left-panel>
    </vab-query-form>
    <el-descriptions
      v-loading="listLoading"
      direction="vertical"
      :column="4"
      :title="title"
      border
    >
      <el-descriptions-item label="主套餐">
        {{ simData.prodOfferName }}
      </el-descriptions-item>
      <el-descriptions-item label="账期">
        {{ simData.billingCycleID }}
      </el-descriptions-item>
      <el-descriptions-item label="量池当月可用量">
        {{ simData.balanceAvailable }}
      </el-descriptions-item>
      <el-descriptions-item label="量池当月已用量">
        {{ simData.balanceUsed }}
      </el-descriptions-item>
      <el-descriptions-item label="量池当月剩余用量">
        {{ simData.balanceAmount }}
      </el-descriptions-item>
      <el-descriptions-item label="此卡用量">
        {{ simData.ratableAmount }}
      </el-descriptions-item>
      <el-descriptions-item label="生效时间">
        {{ simData.startDt }}
      </el-descriptions-item>
      <el-descriptions-item label="失效时间">
        {{ simData.endDt }}
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script>
import { getTrafficBySim } from '@/api/flow';
export default {
  name: 'ShowDetail',
  data() {
    return {
      title: '',
      dialogFormVisible: false,
      listLoading: true,
      simData: {
        prodOfferName: '',
        billingCycleID: '',
        balanceAvailable: 0.0,
        balanceUsed: 0.0,
        balanceAmount: 0.0,
        ratableAmount: 0.0,
        startDt: '',
        endDt: '',
      },
      queryForm: {
        accessNum: '',
        billingCycleID: '',
        defaultTime: '',
      },
    };
  },
  created() {
    this.getCurrentTime('');
  },
  mounted() {},
  methods: {
    getCurrentTime(d) {
      //获取当前时间并打印
      const _this = this;
      const date = d ? new Date(d) : new Date();
      const YY = date.getFullYear() + '-';
      const MM =
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) + '';
      const time = _this.replaceStr(YY + MM);
      _this.queryForm.defaultTime = YY + MM;
      _this.queryForm.billingCycleID = time;
    },
    replaceStr(str) {
      const reg = new RegExp('-', 'g');
      return str.replace(reg, '');
    },
    showDetail(row) {
      this.title = '流量卡详情';
      this.queryForm.accessNum = row;
      this.dialogFormVisible = true;
      this.fetchData();
    },
    search() {
      const defaultTime = this.queryForm.defaultTime;
      console.log('defaultTime====' + defaultTime);
      this.getCurrentTime(defaultTime);
      this.simData = [];
      this.fetchData();
    },
    close() {
      this.dialogFormVisible = false;
      this.$emit('fetch-data');
    },
    async fetchData() {
      this.listLoading = true;
      const { data } = await getTrafficBySim(this.queryForm);
      this.simData = data;
      console.log('simData===' + this.simData.prodOfferName);
      setTimeout(() => {
        this.listLoading = false;
      }, 500);
    },
  },
};
</script>
<style>
.select {
  width: 100%;
}
</style>
