<template>
  <div>
    <template>
      <el-dialog title="批量导入日志" :close-on-click-modal="false" :visible.sync="visible" class="JNPF-dialog JNPF-dialog_center" lock-scroll append-to-body>
        <el-table v-loading="listLoading" :data="tableData" border :height="400" style="width: 100%">
          <el-table-column label="序号" align="center" width="50">
            <template slot-scope="scope">
              {{ scope.$index + 1 + size * (current - 1) }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
          <!--      <el-table-column prop="name" label="任务名称" align="center"></el-table-column>-->
          <el-table-column prop="operator" label="操作人" align="center"></el-table-column>
          <el-table-column prop="count" label="导入条数" align="center"></el-table-column>
          <el-table-column prop="finishTime" label="完成时间" align="center"></el-table-column>
          <el-table-column prop="takeUpTime" label="耗时" align="center"></el-table-column>
          <el-table-column prop="name" label="备注" align="center"></el-table-column>
          <el-table-column label="任务状态" align="center">
            <template slot-scope="scope">
              {{ scope.row.status === 0 ? '导入中' : scope.row.status === 1 ? '导入成功' : '导入失败' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button :disabled="scope.row.status !== 1" type="text" size="small" @click="downloadClick(scope.row)">下载</el-button>
              <el-button v-if="assemblyOptions.includes('uploadRevoke')" :disabled="scope.row.status !== 1" type="text" size="small" @click="revokeClick(scope.row)">撤销</el-button>
            </template>
          </el-table-column>
        </el-table>
        <template>
          <pagination :total="total" :page.sync="current" :limit.sync="size" @pagination="init()" />
        </template>
      </el-dialog>
    </template>
  </div>
</template>

<script>
import { importModelList, importModelListDownload, importModelRevoke } from '@/api/onlineDev/visualDev'
export default {
  name: 'uploadList',
  props: ['modelId', 'assemblyOptions'],
  data() {
    return {
      visible: false,
      listLoading: false,
      tableData: [],
      current: 1,
      size: 10,
      total: 0
    }
  },
  methods: {
    init() {
      this.visible = true
      this.listLoading = true
      let parmes = {
        current: this.current,
        size: this.size,
        modelId: this.modelId
      }
      importModelList(parmes).then((res) => {
        if (res.data.code === 200) {
          this.tableData = res.data.data.records
          this.total = res.data.data.total
          this.listLoading = false
        }
      })
    },
    async downloadClick(row) {
      let loading = this.$loading({
        lock: true,
        text: '下载量较大,请耐心等待',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const param = new URLSearchParams()
      param.append('id', row.id)
      const res = await importModelListDownload(param)
      if (res.data) {
        loading.close()
        let a = document.createElement('a')
        let blob = new Blob([res.data], {
          type: 'application/vnd.ms-excel'
        })
        let objectUrl = URL.createObjectURL(blob)
        a.setAttribute('href', objectUrl)
        a.setAttribute('download', `${row.id}.xlsx`)
        a.click()
        URL.revokeObjectURL(a.objectUrl)
      }
      // exportModelListDownload({id:row.id}).then(res => {
      //   if (res.data) {
      //     loading.close();
      //     let a = document.createElement("a");
      //     let blob = new Blob([res.data], {
      //       type: "application/vnd.ms-excel",
      //     });
      //     let objectUrl = URL.createObjectURL(blob);
      //     a.setAttribute("href", objectUrl);
      //     a.setAttribute("download", `${row.name}.xlsx`);
      //     a.click();
      //     URL.revokeObjectURL(a.objectUrl);
      //   }
      // })
    },
    revokeClick(row) {
      this.$confirm('此操作将撤销已导入的数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let parmes = {
            id: row.id
          }
          importModelRevoke(parmes).then((res) => {
            if (res.data.code === 200) {
              this.$message({ message: '操作成功', type: 'success' })
              this.init()
            }
          })
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.JNPF-dialog_center {
  >>> .el-dialog__body {
    padding: 20px !important;
  }
}
</style>
