<template>
  <div class="export-download">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
    <div class="component-content screenSet" id="screenSet">
      <p>导出文件列表</p>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="fileName" label="名称" align="center" min-width="150"></el-table-column>
        <el-table-column prop="createdTime" label="时间" align="center" min-width="120">
          <template slot-scope="scope">{{ scope.row.createdTime }}</template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center" min-width="150">
          <template slot-scope="scope">{{ scope.row.status | exportStatus }}</template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" min-width="70">
          <template slot-scope="scope">
            <el-button
              type="primary"
              :disabled="scope.row.buttonStatus"
              size="small"
              @click="update(scope.row)"
            >{{ scope.row.buttonText }}</el-button>
          </template>
        </el-table-column>
        <div slot="empty">
          <div class="table-empty">
            <img src="../../assets/image/no-content1.png">
            <p>没有相关数据，请重新选择查询范围</p>
          </div>
        </div>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="param.pageNo"
          :page-sizes="[10, 30, 50]"
          :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";
let vm = null;
export default {
  components: {
    BreadCrumb
  },
  data() {
    return {
      curmbFirst: "学情报告",
      curmbSecond: "导出下载",
      projectId: '',
      tableData: [],
      param: {
        pageSize: 10,
        pageNo: 1
      },
      totalRows: 0,
      totalTime: 3,
      // buttonText: "刷新",
      // buttonStatus: false,
    };
  },
  created() {
    vm = this;
    this.projectId = vm.getUrlSearch(window.location.href, "projectId");
    this.search();
  },
  mounted: function() {
    commonUtil.resizeHeight();
  },
  methods: {
    setButton() {
      for (let i = 0; i < vm.tableData.length; i++) {
        vm.tableData[i].index = i;
        if(vm.tableData[i].status == 1) {
          vm.tableData[i].buttonText = "下载";
          vm.tableData[i].buttonStatus = false;
        } else {
          vm.tableData[i].buttonText = "刷新";
          vm.tableData[i].buttonStatus = false;
        }
      }
    },
    search() {
      vm.tableData = [
        // {
        //   id: 123,
        //   fileName:
        //     "浙江省心脑项目，浙江省杭州市区西湖区，第二人民医院杭州市中医院---",
        //   createdTime: 1562221264000,
        //   status: 0,
        // },
        // {
        //   id: 233,
        //   fileName:
        //     "江西省心脑项目，浙江省杭州市区西湖区，第二人民医院杭州市中医院---",
        //   createdTime: 1562221874000,
        //   status: 0,
        // },
        // {
        //   id: 666,
        //   fileName:
        //     "上海市心脑项目，浙江省杭州市区西湖区，第二人民医院杭州市中医院---",
        //   createdTime: 1562225864000,
        //   status: 0,
        // }
      ];
      // this.setButton();
      let req = {
        projectId : vm.projectId,
      }
      vm.reportGET("report/downLoad/getDownloadList", req).then(res => {
        vm.tableData = res.data.data;
        vm.setButton();
      });
    },
    downLoad() {
      console.log('下载Excel');

      // let url = '';
      // let fileName = '文件';
      // let blob = new Blob([url], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' }) // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
      // let downloadElement = document.createElement('a')
      // let href = window.URL.createObjectURL(blob) // 创建下载的链接
      // downloadElement.href = href
      // downloadElement.download = typeof fileName !== 'undefined' ? fileName + '.xls' : new Date().getTime() + '.xls' // 下载后文件名
      // document.body.appendChild(downloadElement)
      // downloadElement.click() // 点击下载
      // document.body.removeChild(downloadElement) // 下载完成移除元素
      // window.URL.revokeObjectURL(href) // 释放掉blob对象
    },
    getDownLoadStatus() {

    },
    update(row) {
      if(vm.tableData[row.index].status == 1) {
        vm.downLoad();
      } else {
        this.$nextTick(function() {
          vm.getDownLoadStatus();
          console.log(vm.tableData[row.index]);
          let nowTime = vm.totalTime;
          vm.tableData[row.index].fileName = vm.tableData[row.index].fileName+ ' ';
          vm.tableData[row.index].buttonText = nowTime + "s后可以刷新";
          vm.tableData[row.index].buttonStatus = true;
          
          let clock = window.setInterval(() => {
            nowTime--;
            vm.tableData[row.index].fileName = vm.tableData[row.index].fileName+ ' ';
            vm.tableData[row.index].buttonText = nowTime + "s后可以刷新";
            if (nowTime < 0) {
              window.clearInterval(clock);
              vm.tableData[row.index].fileName = vm.tableData[row.index].fileName+ ' ';
              // vm.tableData[row.index].buttonText = "刷新";
              vm.tableData[row.index].buttonStatus = false; //这里重新开启
              vm.tableData[row.index].status = Boolean(Math.round(Math.random()));
              if(vm.tableData[row.index].status == 1) {
                vm.tableData[row.index].buttonText = "下载";
              } else {
                vm.tableData[row.index].buttonText = "刷新";
              }
            }
          }, 1000);
        });
      }
    },
    // 更改数据显示数量
    handleSizeChange(val) {
      vm.param.pageSize = val;
      vm.search();
    },
    // 换页
    handleCurrentChange(val) {
      vm.param.pageNo = value;
      vm.search();
    }
  }
};
</script>
<style lang="scss">
.export-download {
  .component-content {
    background: #fff;
    padding: 10px;
  }
}
</style>