<template>
  <m-dialog title="任务进度" :visible.sync="show" :footer="false">
    <div style="min-height: 300px; " v-loading="loading">
      <div class="text-right">
        <v-btn color="primary" @click="getStatus">
          <v-icon left>mdi-refresh</v-icon>
          刷新
        </v-btn>
      </div>
      <v-stepper
        alt-labels
        class="my-12"
        elevation="0"
      >
        <v-stepper-header>
          <template
            v-for="(status, index) in statusItems"
          >
            <v-stepper-step
              :key="status.key + index"
              :step="index + 1"
              :complete="status.value === 'completed'"
              :rules="[() => status.value !== 'failed']"
            >
              {{ status.key }}
              <div class="mt-3 text-center">
                <v-chip :color="statusList[status.value]">{{ status.value }}</v-chip>
              </div>
              <div class="text-center mt-3">
                <v-btn color="primary" :loading="status.loading" @click="handleRun(status)">
                  <v-icon left>mdi-play</v-icon>
                  重新执行
                </v-btn>
              </div>
              <div class="text-center mt-3">
                <v-btn :loading="status.loading" @click="handleTest(status)">
                  <v-icon left>mdi-play</v-icon>
                  测试执行
                </v-btn>
              </div>
            </v-stepper-step>

            <v-divider :key="status.key" v-if="index < statusItems.length - 1"></v-divider>
          </template>
        </v-stepper-header>
      </v-stepper>
    </div>
    <m-dialog title="确认执行" :visible.sync="showConfirm" :widthType="2" @submit="handleSubmit">
      <MForm :items="formItems" v-model="formValues" v-loading="loadingTest"></MForm>
    </m-dialog>
  </m-dialog>
</template>

<script>
import MDialog from '@/components/Dialog'
import MForm from '@/components/MForm'
import { getDataTasksStatus, executeDataTasks } from '@/api/dataChart'
export default {
  name: 'modelTrainStatus',
  components: {
    MDialog,
    MForm
  },
  data () {
    return {
      showConfirm: false,
      statusList: {
        preparing: 'primary',
        completed: 'success',
        failed: 'error',
        pending: 'warning'
      },
      show: false,
      loading: false,
      statusItems: [],
      id: null,
      loadingTest: false,
      formItems: [
        {
          label: '备份vector表数据到CSV文件',
          type: 'ifRadio',
          key: 'backup_vector_tables',
          width: 180,
          items: [
            { label: '是', value: true },
            { label: '否', value: false }
          ]
        },
        {
          label: '清空vector表数据',
          type: 'ifRadio',
          key: 'truncate_vector_tables',
          width: 180,
          items: [
            { label: '是', value: true },
            { label: '否', value: false }
          ]
        },
        {
          label: '跳过训练文件处理',
          type: 'ifRadio',
          key: 'skip_training',
          width: 180,
          items: [
            { label: '是', value: true },
            { label: '否', value: false }
          ]
        }
      ],
      formValues: {
        backup_vector_tables: false,
        truncate_vector_tables: false,
        skip_training: false
      },
      itemData: null
    }
  },
  methods: {
    async open (id) {
      this.id = id
      this.show = true
      this.getStatus()
    },
    async getStatus () {
      this.loading = true
      try {
        const { data } = await getDataTasksStatus(this.id)
        this.statusItems = Object.keys(data.step_status).map(key => {
          return {
            key,
            value: data.step_status[key],
            loading: false
          }
        })
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    },
    handleTest (item) {
      this.itemData = item
      this.formValues = {
        backup_vector_tables: false,
        truncate_vector_tables: false,
        skip_training: false
      }
      this.showConfirm = true
    },
    async handleSubmit () {
      this.loadingTest = true
      const check = await this.handleRun(this.itemData, this.formValues)
      this.loadingTest = false
      if (check) {
        this.showConfirm = false
      }
    },
    async handleRun (item, data = {
      backup_vector_tables: false,
      truncate_vector_tables: false
    }) {
      item.loading = true
      try {
        await executeDataTasks(this.id, {
          execution_mode: 'step',
          step_name: item.key,
          ...data
        })
        this.$snackbar.success('任务已启动')
        this.getStatus()
        return true
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        item.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
