<template>
  <div class="w100 h100">
    <TableList class="w100 h100" :columns="columns" :config="config" :queryParams="queryParams" :tableList="tableList" @fnRenderList="fnRenderList" @fnClick="callback">
      <template #tempDay="{ valueKey, row, column }">
        <span v-if="row && row[valueKey] || row[valueKey] === 0">{{row[valueKey]}}/{{row.createTime}}</span>
      </template>
      <template #tempMonth="{ valueKey, row, column }">
        <span v-if="row && row[valueKey] || row[valueKey] === 0">{{row[valueKey]}}/{{row.createTime.slice(0, 7)}}</span>
      </template>
    </TableList>
    <el-dialog title="相关数据" :visible.sync="listOpen" width="900px" append-to-body style="padding-bottom: 20px;">
      <relevantData :rowDataList="rowDataList" @closeDialog="closeDialog"></relevantData>
    </el-dialog>
  </div>
</template>

<script>
  import TableList from '@/components/table/index.vue';
  import relevantData from '../../earnManage/server/relevantData'
  export default {
    name: "serRegisTable",
    components: {TableList, relevantData},
    props: {
      activeName: {
        type: String,
        default: ''
      },
      modelVal: {
        type: Array,
        default: () => []
      }
    },
    watch: {
      modelVal: {
        handler(newVal) {
          if (newVal && newVal.length > 0) {
            this.queryParams = newVal[0].queryParams;
            this.tableList = newVal[0].tableList;
          }
        },
        deep: true,
        immediate: true
      },
    },
    data() {
      return {
        // 列显隐信息
        columns: {
          id: {label: `ID`, width: '50'},
          clientId: {label: `ClientID`, minWidth: '280', visible: true},
          businessName: {label: `业务名称`, minWidth: '150', visible: true},
          bandwidth95Daily: {label: `95带宽值/日(Mbit)`, minWidth: '150', slotName: 'tempDay',visible: true},
          bandwidth95Monthly: {label: `95带宽值/月(Mbit)`, minWidth: '150', slotName: 'tempMonth',visible: true},
          avgMonthlyBandwidth95: {label: `月均日95值(Mbit)`, minWidth: '150',slotName: 'tempDay',visible: true},
        },
        config: {
          colHiddenCheck: true, colTopHiddenIcon: true,
          tableButton: {
            line: [
              {content: '相关数据', fnCode: 'edit', type: 'text', icon: 'el-icon-tickets', hasPermi: 'earnManage:server:relevantData'},
            ]
          }
        },
        tableList: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          total: 0,
        },
        listOpen: false,
        rowDataList: {},
      }
    },
    created() {
    },
    methods: {
      fnRenderList(val) {
        this.$emit('fnPaging', this.modelVal[0].queryParams)
      },
      closeDialog() {
        this.listOpen = false;
      },
      callback(result, rowData, selectChange, selectList) {
        if (result && result.fnCode) {
          switch (result.fnCode) {
            case 'edit':
              this.listOpen = true;
              this.rowDataList = rowData;
              break;
            default:
          }
        }
      },
    }
  }
</script>

<style scoped>
</style>
