<template>
  <div>
    <el-dialog title="更新日志"
      :visible.sync="visible"
      width="1000px"
      append-to-body
      :before-close="close"
      :close-on-click-modal="false">
      <div style="height: 800px;overflow: auto;" infinite-scroll-immediate="false" v-infinite-scroll="load">
         <el-timeline>
          <el-timeline-item v-for="item in tableData" :timestamp="item.createTime" placement="top">
            <el-card>
              <p>状态：{{ statusObj[item.status] }}</p>
              <p>总条数：{{ item.total  }} </p>
              <p>成功数量：{{ item.trueSuccessNum }}</p>
              <p>失败条数：{{ item.defaultNum }}</p>
              <p>完成时间：{{ $d(item.endTime) }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { cron } from "@/views/workspace/components/common/mixins";
export default {
  mixins:[cron],
  data() {
    return {
      tableData:[],
      visible:false,
      statusObj: {
        0: '等待中',
        1: '进行中',
        2: '已完成',
        4: '已暂停',
        5: '已取消',
      },
      queryParams: {
        taskId: '',
        size: 10,
        current: 0,
        orderBy:'createTime',
        orderType:'desc'
      },
      total: 1,
    }
  },
  watch: {

  },
  mounted() {

  },
  methods: {
    initTask(webSocket1) {
      webSocket1.onmessage = (e) => {
        const { code, data, message } = JSON.parse(e.data)
        if (code === 903 || code === 904) {
          if (this.tableData[0].id==data.id) {
            var index=this.tableData[0]
            if (index === -1) {
              // this.taskData.push(data)
            } else {
              this.tableData[index].status = data.taskStatus
              // this.$set(this.tableData, index, data)
            }
          }
          // const index = this.taskData.findIndex(item=>{return item.id == data.id || item.taskId==data.taskId})
          // const index = this.taskData.findIndex(item=>{return item.id == data.id})
          // if (index === -1) {
          //   // this.taskData.push(data)
          // } else {
          //   this.tableData[index].status = data.taskStatus
          //   // this.$set(this.tableData, index, data)
          // }
          if (data.complete) {
            this.tableData[0].status = 2
            
            // console.log(this.form)
           
            // this.getList()
          }
        } else if (code === 803 || code === 804) {
          this.$message.error(message)
          this.getList()
        }
      }
    },
    getList() {
      this.$api.queryQrtzTaskLogs(this.queryParams).then(res => {
        if (res.code == 200) {
          this.total = res.data.total
          if (res.data.records.length > 0) {
            this.tableData= this.tableData.concat(res.data.records)
          }
        } 
      })
    },
    open(row, webSocket1) {
      this.queryParams.taskId = row.id
      this.initTask(webSocket1)
      this.load()
      this.visible = true
    },
    // 懒加载
    load() {
      if (this.total > this.queryParams.current * this.queryParams.size) {
        this.queryParams.current += 1
        this.getList();
      }
      
    },
    close() {
      this.total = 1
      this.tableData = []
      this.queryParams.current = 0
      this.visible = false
    }

  },
  
}
</script>

<style lang="scss" scoped>
.pagination {
    text-align: center;
    margin: 20px 0;
  }
</style>