<template>
  <ElDialog v-model="showDialog"
    :close-on-click-modal="false"
    destroy-on-close width="25vw" @close="dialogCloseHandler">
    <ElForm :model="taskFormData" class="sys_task-form">
      <ElFormItem label="任务名称">
        <ElInput v-model="taskFormData.taskName" placeholder="任务名称"/>
      </ElFormItem>
      <ElFormItem label="任务执行函数">
        <ElSelect v-model="taskFormData.fn" placeholder="请选择任务执行函数">
          <ElOption v-for="item in fnList" :key="item.fn" :label="item.fn" :value="item.fn!"/>
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="日志等级">
        <ElSelect v-model="taskFormData.logLevel" placeholder="请选择日志等级">
          <ElOption v-for="item in logLevelList" :key="item.value" :label="item.label" :value="item.value"/>
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="调度方式">
        <ElSelect v-model="taskFormData.scheduleType" placeholder="请选择调度方式" @change="scheduleTypeChange">
          <ElOption v-for="item in scheduleTypeList" :key="item.value" :label="item.label" :value="item.value"/>
        </ElSelect>
      </ElFormItem>
      <ElFormItem v-if="taskFormData.scheduleType === 'Cron'" label="调度配置">
        <Cron v-model="taskFormData.scheduleConf" placeholder="调度配置"/>
      </ElFormItem>
      <ElFormItem v-else-if="taskFormData.scheduleType === 'Fixed'" label="调度配置">
        <ElInput v-model="taskFormData.scheduleConf" placeholder="调度配置">
          <template #suffix>周期（秒）</template>
        </ElInput>
      </ElFormItem>
      <ElFormItem label="是否禁用">
        <ElSwitch v-model="taskFormData.disabled" active-text="禁用" inactive-text="启用"/>
      </ElFormItem>
      <ElFormItem label="备注">
        <ElInput v-model="taskFormData.memo" placeholder="备注"/>
      </ElFormItem>
    </ElForm>
    <template #footer>
      <ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
      <ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
    </template>
  </ElDialog>
</template>
<script lang="ts" setup>
import TaskApi from '@/pages/sys/task/task-api.ts'
import Strings from '@/common/utils/strings.ts'
import { ElMessage } from 'element-plus'
import Cron from '@/pages/sys/task/cron/Cron.vue'

const emits = defineEmits([ 'editSucc' ])
const scheduleTypeList = [
  {value: 'Manually', label: '手动'},
  {value: 'Fixed', label: '固定周期'},
  {value: 'Cron', label: '自定义'},
]
const logLevelList = [
  {value: 'DEBUG', label: '调试'},
  {value: 'INFO', label: '普通'},
  {value: 'WARN', label: '警告'},
  {value: 'ERROR', label: '错误'},
  {value: 'OFF', label: '关闭'},
]
const showDialog = ref(false)
const submiting = ref(false)
const status = ref<'add' | 'view' | 'modify'>('add')
let taskFormData = ref<TaskTypes.SearchTaskResult>({})
const fnList = ref<TaskTypes.FnHandle[]>([])

function dialogCloseHandler() {
  taskFormData.value = {}
}

function scheduleTypeChange(val: string) {
  if (val === 'Manually') {
    taskFormData.value.scheduleConf = ''
  } else if (val === 'Fixed') {
    taskFormData.value.scheduleConf = '1'
  } else if (val === 'Cron') {
    taskFormData.value.scheduleConf = '* * * * * ?'
  }
}

function submitHandler() {
  if (status.value === 'view') return
  submiting.value = true
  if (taskFormData.value.id != null) {
    TaskApi.modify(taskFormData.value)
      .then(() => {
        ElMessage.success('修改成功')
        emits('editSucc')
        showDialog.value = false
      })
      .finally(() => {
        submiting.value = false
      })
  } else {
    TaskApi.add(taskFormData.value)
      .then(() => {
        ElMessage.success('添加成功')
        emits('editSucc')
        showDialog.value = false
      })
      .finally(() => {
        submiting.value = false
      })
  }
}

defineExpose({
  open(data: TaskTypes.SearchTaskResult = {}) {
    showDialog.value = true
    TaskApi.fn().then(res => {
      fnList.value = res.data
    })
    if (!Strings.isBlank(data.id)) {
      status.value = 'modify'
      TaskApi.detail(data.id!).then((res) => {
        taskFormData.value = res.data
      })
    } else {
      status.value = 'add'
      data.scheduleConf = '* * * * * ?'
      taskFormData.value = data
    }
  },
})
</script>
<style lang="stylus" scoped>
.sys_task-form {
  padding 20px
}
</style>
