<template>
  <!-- 导入报表 -->
  <div>
    <!-- 表格 -->
    <elm-table
      :table-data="dataList"
      :colum-obj="columObj"
      :loading="loading"
      v-bind="$attrs"
      :tree-props="{ children: 'child' }"
      v-on="$listeners"
      @rowOperation="rowOperation"
      @getList="getList()"
    />
    <el-row v-if="rowCount > 0" class="text-center">
      <el-pagination
        background
        :current-page="queryParams.current"
        :page-sizes="[10, 20, 50, 100, 200]"
        :page-size="queryParams.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="rowCount"
        @pagination="getList"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
  </div>
</template>
<script>
import { getexportlist, getdownload } from '@/apiV2/exportlist'
import ElmTable from '@/components/ElmTable/index.vue'
export default {
  name: 'ListBox2',
  components: {
    ElmTable
  },
  data() {
    return {
      statusobj: // 导入结果
        {
          0: '正在操作',
          1: '成功',
          2: '失败'
        },
      columObj: {
        lazy: 'true',
        columnData: [
          { ownDefined: true, prop: 'name', label: '报表名称', ownDefinedReturn: row => { return row.name || '--' } },
          { ownDefined: true, prop: 'fileName', label: '文件名称', ownDefinedReturn: row => { return row.fileName || '--' } },
          { ownDefined: true, prop: 'status', label: '导入结果', ownDefinedReturn: row => { return this.statusobj[row.status] || '--' }, minwidth: '120', ownClassName: row => { return row.status == 1 ? '' : 'color-orenge' } },
          { ownDefined: true, prop: 'total', label: '总条数', ownDefinedReturn: row => { return row.total } },
          { ownDefined: true, prop: 'pass', label: '成功条数', ownDefinedReturn: row => { return row.pass } },
          { ownDefined: true, prop: 'fail', label: '失败条数', ownDefinedReturn: row => { return row.fail } },
          { ownDefined: true, prop: 'createTime', label: '导入时间', ownDefinedReturn: row => { return row.createTime || '--' }, sortable: true, sortBy: 'date' },
          {
            isOperation: true, prop: 'operation', label: '操作', minwidth: '120', fixed: 'right', tooltip: false,
            operation: [
              { operation: 'download', type: 'text', label: '下载错误数据', disabled: row => { return row.null != '' && row.status == 1}, isShow: (row) => this.filterButton('exportlist_down2')}
            ]
          }
        ]
      },
      queryParams: {
        current: 1,
        size: 10,
        pages: 1,
        type: 1,
        platform: 1
      },
      loading: false,
      rowCount: 0,
      dataList: ''
    }
  },
  created() {
    this.getList()
    this.$bus.on('projectChange', (project) => {
      this.getList()
    })
  },
  methods: {
    rowOperation(row, $index, event) {
      switch (event) {
        case 'download':
          this.handledownload(row)
          break
      }
    },
    getList() {
      this.loading = true
      getexportlist(this.queryParams).then(res => {
        if (res.success) {
          this.dataList = res.data.records
          this.rowCount = res.data.total
          this.loading = false
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 每页显示多少条
    handleSizeChange(val) {
      this.queryParams.size = val
      this.getList()
    },
    // 点击当前页
    handleCurrentChange(val) {
      this.queryParams.current = val
      this.getList()
    },
    // 下载错误信息
    handledownload(row) {
      getdownload(row.id).then(res => {
        this.downloadExcel(res)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.gray {
  color: #b9b8b8 !important;
}
.red {
   color: #ff4949 !important;
}
</style>
