<template>
  <ele-modal
    :visible.sync="visible"
    title="任务详细"
    width="700px"
    append-to-body
    :maxable="true"
  >
    <el-descriptions :column="2" size="medium" border>
      <el-descriptions-item>
        <template slot="label">任务编号</template>
        {{ detailData.id }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">任务状态</template>
        <!-- <dict-tag :type="DICT_TYPE.INFRA_JOB_STATUS" :value="detailData.status" /> -->
        {{ getDictValue('定时任务状态', detailData.status) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">任务名称</template>
        {{ detailData.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">任务类名</template>
        {{ detailData.handlerName }}
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template slot="label">CRON 表达式</template>
        {{ detailData.cronExpression }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">任务参数</template>
        {{ detailData.handlerParam || '-' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">重试次数</template>
        {{ detailData.retryCount }} 次
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">重试间隔</template>
        {{ detailData.retryInterval }} 毫秒
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">监控超时</template>
        {{ detailData.monitorTimeout > 0 ? detailData.monitorTimeout + ' 毫秒' : '未开启' }}
      </el-descriptions-item>
    </el-descriptions>

    <headerTitle title="后续执行时间" style="margin-top: 15px"></headerTitle>
    <el-timeline v-if="nextTimes && nextTimes.length">
      <el-timeline-item
        v-for="(nextTime, index) in nextTimes"
        :key="index"
        :timestamp="formatDate(nextTime)"
      >
        第 {{ index + 1 }} 次执行
      </el-timeline-item>
    </el-timeline>
    <el-empty v-else description="暂无后续执行时间" :image-size="60"></el-empty>

    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </ele-modal>
</template>

<script>
// import { DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import * as JobApi from '@/api/config/scheduledTasks'
import dictMixins from '@/mixins/dictMixins';

export default {
  name: 'InfraJobDetail',
  mixins: [dictMixins],
  data() {
    return {
      visible: false,
      loading: false,
      detailData: {},
      nextTimes: [],
      // DICT_TYPE
    }
  },
  created() {
    this.requestDict('定时任务状态');
  },
  methods: {
    formatDate,

    /** 打开弹窗 */
    open(id) {
      this.visible = true
      this.loading = true

      // 获取详情和后续执行时间
      Promise.all([JobApi.getJob(id), JobApi.getJobNextTimes(id)])
        .then(([detailData, nextTimes]) => {
          this.detailData = detailData
          this.nextTimes = nextTimes || []
        })
        .catch((e) => {
          console.error(e)
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-timeline {
  padding-left: 10px;
  margin-top: 10px;
}
</style>
