<template>
  <div class="export-download">
    <bread-crumb
      :curmbFirst="curmbFirst"
      :curmbSecond="curmbSecond"
    ></bread-crumb>
    <div class="component-content screenSet" id="screenSet">
      <div class="p-title">任务列表</div>
      <el-tabs v-model="listType" type="card" @tab-click="handleClick">
        <el-tab-pane label="查看报告" name="2"></el-tab-pane>
        <el-tab-pane label="导出列表" name="1"></el-tab-pane>
      </el-tabs>
      <!-- 
              :cell-style = "cellStyle"
              :header-cell-style = "headCellStyle"
             -->
      <el-table :data="tableData" class="table-export" style="width: 100%">
        <el-table-column
          prop="title"
          label="名称"
          align="left"
          min-width="150"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="time"
          label="时间"
          align="center"
          min-width="120"
        >
          <template v-slot="scope">{{ scope.row.time }}</template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="left" min-width="75">
          <template v-slot="scope">
            <span
              v-bind:class="{
                logo_0: scope.row.status == 0,
                logo_1: scope.row.status == 1,
                logo_2: scope.row.status == 2,
              }"
              class="logo"
            ></span>
            <span class="text">{{
              $filters.exportStatus(scope.row.status)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center">
          <template v-slot="scope">
            <el-button
              :disabled="scope.row.buttonStatus"
              size="small"
              type="text"
              v-if="scope.row.status != 2"
              @click="update(scope.row)"
              >{{ scope.row.buttonText }}</el-button
            >
            <div v-if="scope.row.status == 2">-</div>
          </template>
        </el-table-column>
        <template v-slot:empty>
          <div>
            <div class="table-empty">
              <img src="../../assets/image/noData.png" />
            </div>
          </div>
        </template>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="param.pageNo"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="param.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRows"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import BreadCrumb from '../../components/breadcrumb.vue'
import * as commonUtil from '../../utils/utils'
import { openLoading, closeLoading } from '../../utils/utils'
import axios from 'axios'
let vm = null
export default {
  components: {
    BreadCrumb,
  },
  data() {
    return {
      curmbFirst: '教培项目',
      curmbSecond: '下载报告',
      projectId: '',
      tableData: [],
      param: {
        pageSize: 20,
        pageNo: 1,
      },
      totalRows: 0,
      totalTime: 3,
      queryData: {},
      listType: '2',
      idType: 1,
      // buttonText: "刷新",
      // buttonStatus: false,
    }
  },
  created() {
    vm = this
    vm.idType = localStorage.getItem('storageIdType')
    this.curmbFirst = vm.idType == 1 ? '教培项目' : '教育培训'

    this.projectId = vm.getUrlSearch(window.location.href, 'projectId')
    let listType = vm.getUrlSearch(window.location.href, 'listType')
    if (listType == null) {
      vm.listType = '2'
    } else {
      vm.listType = listType
    }
    this.search()
  },
  mounted: function () {
    commonUtil.resizeHeight()
  },
  methods: {
    handleClick(tab, event) {
      vm.listType = tab.name
      vm.search()
    },
    setButton() {
      for (let i = 0; i < vm.tableData.length; i++) {
        vm.tableData[i].index = i
        if (vm.tableData[i].status == 1) {
          if (vm.listType == '2') {
            vm.tableData[i].buttonText = '查看报告'
          } else if (vm.listType == '1') {
            vm.tableData[i].buttonText = '下载'
          }
          vm.tableData[i].buttonStatus = false
        } else if (vm.tableData[i].status == 0) {
          vm.tableData[i].buttonText = '刷新'
          vm.tableData[i].buttonStatus = false
        } else if (vm.tableData[i].status == 2) {
          vm.tableData[i].buttonText = '刷新'
          vm.tableData[i].buttonStatus = true
        }
      }
    },
    search() {
      let projectId = ''
      if (vm.projectId != null) {
        projectId = vm.projectId
      }
      let reqList = {
        projectId: projectId,
        pageNo: vm.param.pageNo,
        pageSize: vm.param.pageSize,
        type: parseInt(vm.listType),
        id: '',
      }
      vm.GET('stats/mission/missionlist', reqList).then((res) => {
        if (res.code == '000000') {
          vm.tableData = res.data.list
          vm.totalRows = res.data.totalSize
          vm.setButton()
        }
      })
    },
    getDownLoadStatus(row) {
      // let req = {
      //   id: row.id
      // };
      let projectId = ''
      if (vm.projectId != null) {
        projectId = vm.projectId
      }
      let reqList = {
        projectId: projectId,
        pageNo: vm.param.pageNo,
        pageSize: vm.param.pageSize,
        type: parseInt(vm.listType),
        id: row.id,
      }
      vm.GET('stats/mission/missionlist', reqList).then((res) => {
        if (res.code == '000000') {
          vm.tableData[row.index].status = res.data.list[0].status
          let updateStatus = res.data.list[0].status
          // console.log('res.data.data',res.data.data);
          if (updateStatus == 1) {
            vm.tableData[row.index].title = vm.tableData[row.index].title + ' '
            // vm.tableData[row.index].buttonText = "下载";
            if (vm.listType == '2') {
              vm.tableData[row.index].buttonText = '查看报告'
            } else if (vm.listType == '1') {
              vm.tableData[row.index].buttonText = '下载'
            }
            vm.tableData[row.index].url = res.data.list[0].url
          } else if (updateStatus == 0) {
            vm.tableData[row.index].title = vm.tableData[row.index].title + ' '
            vm.tableData[row.index].buttonText = '刷新'
          } else if (updateStatus == 2) {
            vm.tableData[row.index].title = vm.tableData[row.index].title + ' '
            vm.tableData[row.index].buttonText = '刷新'
            vm.tableData[row.index].buttonStatus = true
          }
        } else {
          vm.$message(res.message)
          vm.tableData[row.index].title = vm.tableData[row.index].title + ' '
          vm.tableData[row.index].buttonText = '刷新'
        }
      })
    },
    downLoad(row) {
      setTimeout(() => {
        window.open(row.url)
      }, 500)
    },
    exportTime(row) {
      vm.$router.push('item-list?downloadId=' + row.id)
    },
    update(row) {
      if (vm.tableData[row.index].status == 1) {
        // vm.downLoad(row);
        if (vm.listType == '2') {
          vm.exportTime(row)
        } else if (vm.listType == '1') {
          vm.downLoad(row)
        }
      } else {
        this.$nextTick(function () {
          console.log(vm.tableData[row.index])
          let nowTime = vm.totalTime
          vm.tableData[row.index].title = vm.tableData[row.index].title + ' '
          vm.tableData[row.index].buttonText = nowTime + 's后可以刷新'
          vm.tableData[row.index].buttonStatus = true

          let clock = window.setInterval(() => {
            nowTime--
            vm.tableData[row.index].title = vm.tableData[row.index].title + ' '
            vm.tableData[row.index].buttonText = nowTime + 's后可以刷新'
            if (nowTime <= 0) {
              window.clearInterval(clock)
              vm.tableData[row.index].title =
                vm.tableData[row.index].title + ' '
              // vm.tableData[row.index].buttonText = "刷新";
              vm.tableData[row.index].buttonStatus = false //这里重新开启
              vm.getDownLoadStatus(row)
            }
          }, 1000)
        })
      }
    },
    // 更改数据显示数量
    handleSizeChange(val) {
      vm.param.pageSize = val
      vm.param.pageNo = 1
      vm.search()
    },
    // 换页
    handleCurrentChange(val) {
      vm.param.pageNo = val
      vm.search()
    },

    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        console.log('column', column)
        return `padding-left:40px;`
      } else {
        return ''
      }
    },

    // 表头行的 style 的回调方法
    headCellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 && rowIndex === 0) {
        return `padding-left:40px;`
      } else {
        return ''
      }
    },
  },
}
</script>

<style lang="scss">
.el-tooltip__popper {
  max-width: 300px;
}
.export-download {
  .component-content {
    background: #fff;
    padding: 10px;

    .p-title {
      position: relative;
      margin-top: 30px;
      margin-left: 30px;
      margin-bottom: 30px;
      height: 25px;
      font-size: 18px;
      font-weight: 600;
      line-height: 25px;
      color: #000000;
    }
    .table-export {
      thead th {
        background: #fff;
      }
      .logo {
        margin-top: 8px;
        margin-right: 6px;
        float: left;
        width: 6px;
        height: 6px;
        border-radius: 50%;
      }
      .logo_0 {
        background: #1890ff;
      }
      .logo_1 {
        background: #52c41a;
      }
      .logo_2 {
        background: #f5222d;
      }
      .text {
        float: left;
      }
      .el-button--text {
        color: #449284;
      }
      .el-button.is-disabled {
        background: #fff !important;
        border: 0px solid #fff !important;
      }
    }
    .table-empty {
      img {
        height: 24px;
        width: 106px;
      }
    }
  }
}
</style>
