<template>
  <AFormPanel
    ref="formPanel"
    v-bind="formPanelProps">
    <template #default="formData">
      <div class="form-items">
        <ElFormItem label="任务名称">
          <ElInput v-model="formData.taskName" placeholder="任务名称"/>
        </ElFormItem>
        <ElFormItem label="执行函数">
          <ElSelect v-model="formData.fn" placeholder="请选择任务执行函数">
            <ElOption v-for="item in fnList" :key="item.fn" :label="item.fn" :value="item.fn!"/>
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="日志等级">
          <ElSelect v-model="formData.logLevel" placeholder="请选择日志等级">
            <ElOption v-for="item in logLevelList" :key="item.value" :label="item.label" :value="item.value"/>
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="调度方式">
          <ElSelect v-model="formData.scheduleType" placeholder="请选择调度方式">
            <ElOption v-for="item in scheduleTypeList" :key="item.value" :label="item.label" :value="item.value"/>
          </ElSelect>
        </ElFormItem>
        <ElFormItem v-if="formData.scheduleType === 'Cron'" label="调度配置">
          <Cron v-model="formData.scheduleConf" placeholder="调度配置"/>
        </ElFormItem>
        <ElFormItem v-else-if="formData.scheduleType === 'Fixed'" label="调度配置">
          <ElInput v-model="formData.scheduleConf" placeholder="调度配置">
            <template #suffix>周期（秒）</template>
          </ElInput>
        </ElFormItem>
        <ElFormItem label="是否禁用">
          <ElSwitch v-model="formData.disabled" active-text="禁用" inactive-text="启用"/>
        </ElFormItem>
        <ElFormItem label="备注">
          <ElInput v-model="formData.memo" placeholder="备注"/>
        </ElFormItem>
      </div>
    </template>
  </AFormPanel>
</template>
<script lang="ts" setup>
import TaskApi from '@/pages/sys/task/task-api.ts'
import Strings from '@/common/utils/strings.ts'
import Cron from '@/pages/sys/task/cron/Cron.vue'
import AFormPanel, {
  type AFormPanelInstance,
  buildFormPanelProps,
} from '@/components/a-form-panel/AFormPanel.tsx'

const props = withDefaults(defineProps<{
  research?: () => void
}>(), {
  research: () => {
  },
})
const status = ref<'add' | 'modify'>('add')
const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
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 fnList = ref<TaskTypes.FnHandle[]>([])
const formPanelProps = buildFormPanelProps<TaskTypes.SearchTaskResult>({
  detailsLoader(id?: string) {
    if (Strings.isBlank(id)) {
      status.value = 'add'
      return Promise.resolve({
        scheduleConf: '* * * * * ?',
        scheduleType: 'Manually',
        logLevel: 'DEBUG',
        disabled: false,
      })
    } else {
      status.value = 'modify'
      return TaskApi.detail(id!).then((res) => res.data)
    }
  },
  doSubmit(data) {
    if (status.value === 'add') {
      return TaskApi.add(data)
        .then(props.research)
    } else {
      return TaskApi.modify(data)
        .then(props.research)
    }
  },
  watchForm: {
    formItems: [],
    callback(formData) {
      const val = formData.scheduleType
      if (val === 'Manually') {
        formData.scheduleConf = ''
      } else if (val === 'Fixed') {
        formData.scheduleConf = '1'
      } else if (val === 'Cron') {
        formData.scheduleConf = '* * * * * ?'
      }
    },
  },
})
watchEffect(() => {
  formPanelProps.title = status.value === 'add' ? '新建任务' : '修改任务'
})
defineExpose({
  open(data?: TaskTypes.SearchTaskResult) {
    formPanelIns.value?.open(data?.id)
    TaskApi.fn().then(res => {
      fnList.value = res.data
    })
  },
})


</script>
<style lang="stylus" scoped>
.form-items {
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "picture ." \
  "picture .";

  :deep(.el-form-item) {
  }
}
</style>
