<script>
import awsuiAxios from "@/awsuiAxios";

export default {
  name: "ExportLog",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    wsId: {// 资产库ID
      type: String,
      default: '',
      required: true
    }
  },
  data() {
    return {
      internalVisible: this.visible,
      width: '800px',
      timer: null, // 定时器
      exportLogData: [],
      loading: true,
      executingIds: [] // 记录状态在执行中的导出记录ID
    }
  },
  methods: {
    async init() {
      const param = {
        url:'jd',
        data:{
          cmd: 'com.actionsoft.apps.coe.pal.processlist_export_log_data',
          wsId: this.wsId
        }
      };
      const {result, msg, data } = await awsuiAxios.post(param);
      // console.log('导出记录',result, msg)
      if (result === 'ok'){
        this.loading = false;
        this.exportLogData = [...data.exportList]
        this.executingIds = [...data.executeIdList]
        this.handleClearInterVal(data.isAllComplate)
      }else {
        this.$message({
          type: 'error',
          message: msg
        })
      }
    },
    // 处理导出记录状态信息 只针对执行中的
    async handleExportExecutingStatusInfo(){
      if (!this.executingIds.length){
        return;
      }
      const param = {
        url:'jd',
        data:{
          cmd: 'com.actionsoft.apps.coe.pal.processlist_export_executing_status_get',
          wsId: this.wsId,
          exportIds: JSON.stringify(this.executingIds)
        }
      };
      const { result, msg, data } = await awsuiAxios.post(param);
      if (result === 'ok'){
        // console.log('状态执行中的定时查询结果', data)
        this.executingIds = [...data.executeIdList]
        const exportLogData = [...data.exportList]
        exportLogData.forEach(item1 => {
          this.exportLogData.forEach(item2 => {
            if (item1.id === item2.id){
              item2.progress = item1.progress
              item2.status = item1.status
              item2.statusText = item1.statusText
              item2.updateTime = item1.updateTime
              item2.downloadUrl = item1.downloadUrl
            }
          })
        })
        this.handleClearInterVal(data.isAllComplate)
      }else {
        this.$message({
          type: 'error',
          message: msg
        })
      }
    },
    handleClearInterVal(isAllComplate){
      if (isAllComplate){
        // console.log('全部加载完成清除定时器')
        clearInterval(this.timer);
      }
    },
    downloadExportLog(url){
      if (url){
        document.getElementById("downloadIframe").src = url;
      }
    },
    handleClose(done) {
      this.$emit('close')
      done();
    },
  },
  watch: {
    visible(newVal) {
      this.internalVisible = newVal;
    }
  },
  mounted() {
    this.init(); // 初始化调用一次数据接口
    this.timer = setInterval( () => {
       this.handleExportExecutingStatusInfo(); // 每隔5s调用一次数据接口
    }, 5000);
  },
  beforeDestroy() {
    clearInterval(this.timer); // 组件销毁前清除定时器
    // console.log('组件销毁 清除定时器')
  }
}
</script>

<template>
  <el-dialog
      title="导出记录"
      :visible.sync="internalVisible"
      :destroy-on-close=true
      :width="width"
      :modal-append-to-body=false
      :close-on-click-modal=false
      :before-close="handleClose"
      :append-to-body=true>
    <div class="export-log-content">
      <el-table
          :data="exportLogData"
          v-loading="loading"
          height="350"
          style="width: 100%">
        <el-table-column
            align="center"
            prop="fileName"
            label="文件名称"
            width="280">
        </el-table-column>
        <el-table-column
            prop="statusText"
            align="center"
            label="状态"
            width="80">
        </el-table-column>
        <el-table-column
            prop="progress"
            align="center"
            width="100"
            label="进度">
          <template slot-scope="{ row }">
            <el-progress :percentage="row.progress" ></el-progress>
          </template>
        </el-table-column>
        <el-table-column
            prop="updateTime"
            align="center"
            label="更新时间"
            width="200">
        </el-table-column>
        <el-table-column
            width="80"
            align="center"
            label="下载">
          <template slot-scope="{ row }">
            <i v-if="row.status === 1" style="cursor: pointer;" class="awsui-iconfont" @click="downloadExportLog(row.downloadUrl)">&#xe653;</i>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<style scoped>

</style>