<template>
  <div style="padding:5px 10px;">
    <el-table :data="taskData" border header-row-class-name="custom-table-header" :maxHeight="tableHeight - 150" v-loading="loadingCancel" element-loading-text = "请耐心等待，数据正在加载中...">
            <el-table-column label="任务名称" prop="taskName" align="center" show-overflow-tooltip></el-table-column>
            <!-- <el-table-column label="任务数量" prop="total" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <div>
                  <span>{{ scope.row.total?scope.row.total:scope.row.allNum }}</span>
                </div>
              </template>
            </el-table-column> -->
            <!-- <el-table-column label="当前下标" prop="index" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <div>
                  <span>{{ scope.row.index?scope.row.index:scope.row.successNum }}</span>
                </div>
              </template>
            </el-table-column> -->
            <el-table-column label="实时进度" align="center" min-width="200px" show-overflow-tooltip>
              <template slot-scope="scope">
                <div style="display:flex">
                  <span style="width:100%"><el-progress :text-inside="true" :stroke-width="20" :percentage="scope.row.percentage?scope.row.percentage:Math.floor(Number(scope.row.successNum)/Number(scope.row.total)*100)" :color="customColors"></el-progress></span>
                  <span ><span >{{ scope.row.successNum }}/</span><span>{{ scope.row.total }}</span></span>
                </div>
                
              </template>
            </el-table-column>
            <el-table-column label="当前状态" align="center" min-width="100px" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ statusObj[scope.row.status] }}</span>
              </template>
            </el-table-column>
       
            <el-table-column label="操作" align="center" width="120" v-if="form === 2">
                        <template slot-scope="scope">
                          <div class="operate">
                            <span v-if="!scope.row.url">等待中</span>
                            <el-link v-else type="primary" @click.native="handleDownload(scope.row)">
                              <el-tooltip class="item" effect="dark" content="下载" placement="top">
                                <i class="iconfont icon-xiazai"></i>
                              </el-tooltip>
                            </el-link>
                            <el-link class="margin-left_10" type="primary" @click="handleCancelZan(scope.row)" v-if="scope.row.status==4">
                              <el-tooltip class="item" effect="dark" content="继续" placement="top">
                                <i class="iconfont icon-zanting"></i> 
                              </el-tooltip>
                            </el-link>
                            <el-link class="margin-left_10" type="primary" @click="handleCancelZan(scope.row)" v-if="scope.row.status==1">
                              <el-tooltip class="item" effect="dark" content="暂停" placement="top">
                                <i class="iconfont icon-zanting1"></i>
                              </el-tooltip>
                            </el-link>
                          </div>
                            
                        </template>
              </el-table-column> 
          
         
                <el-table-column label="操作" align="center" width="150" v-else>
                    <template slot-scope="scope">
                      <div class="operate">
                         <!-- <p v-if="scope.row.status!=5"> -->
                        
                        <el-link class="margin-left_10" type="primary"  @click="handleCancelZan(scope.row)" v-if="scope.row.status==4">
                          <el-tooltip class="item" effect="dark" content="继续" placement="top">
                            <i class="iconfont icon-zanting"></i> 
                          </el-tooltip>
                        </el-link>
                        <!-- <span class="loadCss" type="danger" @click="handleCancelZan(scope.row)" v-else-if="scope.row.taskDetailState==8" >暂停中</span> -->
                        <el-link class="margin-left_10" type="primary" @click="handleCancelZan(scope.row)" v-if="scope.row.status==1">
                          <el-tooltip class="item" effect="dark" content="暂停" placement="top">
                            <i class="iconfont icon-zanting1"></i>
                          </el-tooltip>
                        </el-link>
                        <el-link class="margin-left_10" type="danger"  @click="cancel(scope.row)" v-if="scope.row.status!=2">
                          <el-tooltip class="item" effect="dark" content="取消" placement="top">
                            <i class="iconfont icon-quxiaorenwu1"></i> 
                          </el-tooltip>
                        </el-link>
                        <!-- </p> -->
                        <!-- <p class="margin-left_10" type="danger" v-else>已取消</p> -->
                      </div>
                       
                    </template>
                </el-table-column>
           
            
          </el-table>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { common } from './mixins';
export default {
  components: {},
  props: [],
  mixins:[common],
  data() {
    return {
      taskData:[],
      loadingCancel:false,
      customColors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ],
      queryParams:{
        taskStatus:[0,1,4],
        projectId:this.projectId,
        productId:this.productId,
        reportId:this.reportId,
      }
    };
  },
  watch: {},
  computed: {
    ...mapGetters(['webSocket', 'userinfo'])
  },
  created() {},
  mounted() {
    this.initTask()
    this.getList()
  },
  methods: {
    initTask() {
      var webSocket = this.webSocket
      webSocket.onmessage = (e) => {
        const { code, data, message } = JSON.parse(e.data)
        console.log({ code, data, message });
        if (code === 903 || code === 904) {
          const index = this.taskData.findIndex(item=>{return item.id == data.taskId})
          // const index = this.taskData.findIndex(item=>{return item.id == data.id})
          if (index === -1) {
            if(data.projectId == this.projectId){
              this.getList()
            }
            
            // this.taskData.unshift(data)
          } else {
            var arr = this.taskData[index]
            arr.index = data.index
            arr.percentage = data.percentage
            arr.successNum =  data.index
            arr.status =  data.taskStatus
            this.$set(this.taskData, index, arr)
          }
          if (data.complete) {
            if(data.taskType!=2){
              this.$message.success(`导入任务完成`)
               for(var i = 0;i<this.taskData.length;i++){
                if(this.taskData[i].complete==true){
                  this.taskData.splice(i,1)
                }
              }
            }else{
              this.$message.success(`导出任务完成`)
            }
            
            // console.log(this.form)
           
            this.getList()
          }
        } else if (code === 803 || code === 804) {
          this.$message.error(message)
          this.getList()
        }
      }
    },
    getList(){
      this.loadingCancel = true
      this.$api.getTasks(this.queryParams).then(response=>{
        if(response.code == 200){
          this.taskData = response.data.records
          this.loadingCancel = false
        }
      }).catch(error=>{
        this.loadingCancel = false
      })
    },
   
    // 实时进度暂停继续
    handleCancelZan(row) {
      let task = {
        taskId: row.id,
        // state:0
      }
      if (row.status==4) {
        //  task.state = 0
         this.$api.resumeJobTask(task).then(res => {
          if (res.code==200) {
            this.$message.success('继续执行')
              // this.getList()
              row.status = res.data
            }
         }).catch(error => {
            this.$message.error(error.message)
            this.loadingCancel=false
         })
      } else if (row.status==1) {
        // task.state = 8
        this.$api.pauseJobTask(task).then(res => {
          if (res.code==200) {
            this.$message.success('已暂停')
            // this.getList()
            row.status = 4
            }
        }).catch(error => {
          this.$message.error(error.message)
          this.loadingCancel=false
        })
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.operate{
  i{
    font-size: 24px;
  }
}
.pagination {
    text-align: center;
    margin: 20px 0;
  }
</style>