<template>
  <div class="eventConfiguration">
    <basic-container>
      <avue-crud
        ref="crud"
        :page="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        @on-load="getList"
        @search-change="searchChange"
        @size-change="sizeChange"
        @search-reset="searchReset"
        @current-change="currentChange"
      >
        <template slot="timeSearch">
          <el-date-picker
            v-model="dateTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="timeSearchChange"
            >
          </el-date-picker>
        </template>
        <template  slot-scope="scope" slot="menu">
          <el-button  type="text" @click="detailClick(scope.row)" :disabled='scope.row.empty'>查看</el-button>
        </template>
      </avue-crud>
    </basic-container>
      <el-dialog
        title="详情"
        :visible.sync="detailShow"
        width="70%"
       >
        <div class="detail-conent">
          <el-button type="primary" @click="detailExportClick" >导出</el-button>
          <avue-crud
            @size-change="detailSizeChage"
            @current-change="detailCurrentChange"
           :page="detailPage"
            class="detail-table"
            ref="crud"
            :data="detailTableData"
            :option="detailTableOption"
          >
      </avue-crud>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import { eventConfiguration, detailConfiguration, otherDetailConfiguration } from '@/const/crud/eventConfiguration'
import { getList, memberSettleSameAmount, enterpriseSettleSameAmount, settleSameAmountOverrun, memberTaskType,
exportMember, exportEnterpri, exportTaskType, exportOverrun
} from '@/api/eventConfiguration'
export default {
  data () {
    return {
      option: eventConfiguration,
      dateTime: [],
      detailShow: false,
      tableLoading: false,
      searchForm: {},
      tableData: [],
      tableOption: eventConfiguration,
      detailTableOption: detailConfiguration,
      jobId: '',
      uuid:'',
      filename:'',
      detailTableData: [],
      startTime: '',
      endTime: '',
      detailPage: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20
      },
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      }
    }
  },
  methods: {
    getList(page, params) {
      console.log(this.searchForm);
      this.tableLoading = true
      getList(Object.assign({
          current: page.currentPage,
          size: page.pageSize
      }, params, this.searchForm )).then(response => {
          this.tableData = response.data.data.records
          this.page.total = response.data.data.total
          this.tableLoading = false
      }).catch(() => {
          this.tableLoading=false
      })
    },
    async detailClick(row) {
      console.log('row' ,row);
      let str = row.jobName
      str = str.replaceAll("<font color='red'>",'')
      str = str.replaceAll("</font>",'')
      this.filename = str
      this.jobId = row.jobId
      this.uuid = row.uuid
      await this.getDetailData(this.detailPage, row.jobId)
      this.detailShow = true

    },
    async getDetailData(page, id) {
      let res
      this.detailTableOption = detailConfiguration
      switch(id) {
        case 27:
          res = await memberSettleSameAmount({
          current: page.currentPage,
          size: page.pageSize,
        }, this.uuid)
        break;
        case 28:
          res = await enterpriseSettleSameAmount({
          current: page.currentPage,
          size: page.pageSize,
        }, this.uuid)
        break;
        case 29:
          res = await memberTaskType({
          current: page.currentPage,
          size: page.pageSize,
        },this.uuid)
          this.detailTableOption = otherDetailConfiguration
        break;
        case 30:
          res = await settleSameAmountOverrun({
          current: page.currentPage,
          size: page.pageSize,
        },this.uuid)
        break;
      }
      if(res.data.code === 0){
        this.detailTableData = res.data.data.records
        this.detailPage.total = res.data.data.total
      }
      console.log(res);
    },
    async detailExportClick() {
      let res
      let filename = `风险事件预警-${this.filename}.xlsx`
      switch(this.jobId) {
        case 27:
          res = await exportMember(this.uuid)
        break;
        case 28:
          res = await exportEnterpri(this.uuid)
        break;
        case 29:
          res = await exportTaskType(this.uuid)
        break;
        case 30:
          res = await exportOverrun(this.uuid)
        break;
      }
      let url = window.URL.createObjectURL(new Blob([res.data]))
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', filename)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      console.log('res', res);
    },

    timeSearchChange(date){
      this.startTime = date[0],
      this.endTime = date[1]
    },
    searchChange(form, done) {
      this.searchForm = form;
      this.searchForm.startTime = this.startTime;
      this.searchForm.endTime =  this.endTime;
      this.page.currentPage = 1;
      this.getList(this.page, form);
      done();
    },
    searchReset() {
      this.dateTime = []
      this.startTime = "";
      this.endTime = "";
      this.searchForm = {};
    },

    sizeChange(pageSize){
      this.page.pageSize = pageSize
    },
    detailSizeChage(pageSize) {
      console.log(this.detailPage.pageSize);
      this.detailPage.pageSize = pageSize
      this.getDetailData(this.detailPage, this.jobId)
    },
    currentChange(current){
      this.page.currentPage = current
    },
    detailCurrentChange(current){
      this.detailPage.currentPage = current
      this.getDetailData(this.detailPage, this.jobId)
    },

  }
}
</script>

<style scoped>
</style>
