<template>
  <el-dialog :visible.sync="visible" @close="handleClose" :close-on-click-modal="false" :close-on-press-escape="false">
    <main v-loading="loading">
      <template v-if="list.length !== 0">
        <div v-for="item in list" :key="item.taskId" class="list">
          <el-card shadow="hover" class="list-item">
            <div class="name">{{ item.taskName }}</div>
            <div class="desc">{{ item.desc }}</div>
            <div class="progress-box">
              <el-progress
                :percentage="item.state == 'Complete'? 100 : parseFloat((item.current / item.total * 100).toFixed(2))"
                status="success"
                :text-inside="true"
                :stroke-width="16"></el-progress>
            </div>
          </el-card>
        </div>
      </template>
      <el-empty v-else description="暂无数据"></el-empty>
    </main>
  </el-dialog>
</template>

<script>

export default {
  name: "top-task",
  data() {
    return {
      list: [],
      timer: 0,
      visible: false,
      loading: true
    }
  },
  computed: {
    isDot() {
      return this.list.some((item) => {
        return item.state !== 'Complete'
      })
    },
  },
  created() {
    this.$Bus.$on('showTask', visible => {
      console.log("监听showTask")
      this.loading = true
      this.visible = visible
      this.timer = setInterval(() => {
        console.log(this.visible)
        this.visible && this.getTaskList();
      }, 3000)
    })

  },
  // mounted(){
  //   this.$nextTick(() => {
  //
  //
  //   })
  // },

  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    handleClose(){
      this.visible = false;
      clearInterval(this.timer);
    },
    getTaskList(){
      this.$http({
        url: this.$http.adornUrl('/order/thirdPrintOrder/printPdfTaskList'),
        method: 'get'
      }).then(({ data }) => {
        this.list = data
      }).finally(() => this.loading = false)
    },
    // getTaskList() {
    //   this.$apiFiles?.platformConfigFile?.taskList().then((res) => {
    //     this.list = res.data?.data
    //   }).finally(() => this.loading = false)
    // },
  }
}
</script>

<style scoped lang="scss">
  v-deep .el-card__body {
  padding: 8px!important;
}
main {
  max-height: 400px;
  min-height: 400px;
  overflow: scroll;
  .list {
    margin-bottom: 8px;
    .name {
      margin: 4px;
      font-size: 14px;
      font-weight: 500;
    }
    .desc {
      font-size: 8px;
      color: #888888;
    }
  }
}
</style>
