<!--  -->
<template>
  <div class="tableBox" style=" width:100% ">
    <div class="remark">（以下为当前步骤100个抽样命中结果的清洗效果对比）</div>
    <vxe-table border show-header-overflow show-overflow :row-config="{ isHover: true }" :data="tableData.impl.dataList" min-height="96" @cell-click="clickEvent">
      <vxe-column align="center" title="序号" type="seq" show-overflow-tooltip width="50px" />
      <vxe-column field="cleanBeforeData" title="清洗前">
        <!-- <template slot-scope="scope">
          {{CleanStatus.getValue(scope.row.cleanStatus)}}
        </template> -->
      </vxe-column>
      <vxe-column field="cleanAfterData" title="清洗后">
      </vxe-column>
    </vxe-table>
    <el-row slot="pagination" type="flex" justify="end" style="margin-top: 16px;width: 100%;">
      <el-pagination :total="tableData.impl.totalCount" :current-page="tableData.impl.currentPage" :page-size="tableData.impl.pageSize" :page-sizes="[10, 20, 50, 100]" layout="total, prev, pager, next, sizes" @current-change="tableData.impl.onCurrentPageChange" @size-change="tableData.impl.onPageSizeChange">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
/* eslint-disable-next-line */
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js'
import { DataSetCleaning } from '@/api/gptController.js'
export default {
  data() {
    return {
      tableData: {
        impl: new TableWidget(this.getwidgetData, true, true, false, undefined, false)
      }
    }
  },
  props: ['api', 'cleanId'],
  components: {},

  computed: {},

  mounted() {
    this.refresh()
  },

  methods: {
    getwidgetData(params) {
      if (params == null) params = {}
      let key
      switch (this.api) {
        case 'getCleanList':
          key = 'cleanDtoFilter'
          break
        case 'getDesensitiveList':
          key = 'desensitiveDtoFilter'
          break
        case 'getFilterList':
          key = 'filterDtoFilter'
          break
        default:
          break
      }
      params = {
        [key]: {
          cleanId: this.cleanId
        },
        ...params
      }
      return new Promise((resolve, reject) => {
        DataSetCleaning[this.api](this, params)
          .then((res) => {
            resolve({
              dataList: res.data.dataList,
              totalCount: res.data.totalCount
            })
          })
          .catch((e) => {
            reject(e)
          })
      })
    },
    refresh(reloadData = false) {
      if (reloadData) {
        this.tableData.impl.refreshTable(true, 1)
      } else {
        this.tableData.impl.refreshTable()
      }
    },
    clickEvent({ row, column }) {
      this.$alert(row[column.field], '内容')
    }
  }
}
</script>
<style scoped>
.remark {
  font-size: 12px;
  color: #84868c;
  margin-bottom: 5px;
}
div /deep/ .vxe-body--column {
  cursor: pointer;
}
</style>
