<template>
    <div class="substance_edit-help">
        <el-card class="!border-none mt-4" shadow="never">
            <el-page-header :content="mode == 'add' ? '新增定时任务' : '编辑定时任务'" @back="$router.go(-1)" />
        </el-card>

        <el-card shadow="never" class="!border-none mt-4">
            <el-form :rules="rules" ref="formRef" :model="formData" label-width="120px">
                <!-- 标题输入框 -->
                <el-form-item label="任务名称" prop="name">
                    <el-input v-model="formData.name" show-word-limit placeholder="请输入任务名称" class="max-w-[300px]"></el-input>
                </el-form-item>
                <el-form-item label="任务分组" prop="types">
                    <el-select class="ls-input" v-model="formData.types" placeholder="请选择任务分组">
                        <el-option label="默认" value="default" />
                        <el-option label="系统" value="system" />
                    </el-select>
                </el-form-item>
                <el-form-item label="调用方法" prop="command">
                    <el-input v-model="formData.command" class="max-w-[300px]" placeholder="请输入调用目标字符串"></el-input>
                </el-form-item>
                <el-form-item label="cron表达式" prop="rules">
                    <el-input v-model="formData.rules" class="max-w-[300px]" placeholder="请输入cron执行表达式"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input
                        type="textarea"
                        class="max-w-[300px]"
                        :autosize="{ minRows: 3, maxRows: 6 }"
                        :maxlength="200"
                        show-word-limit
                        clearable
                        v-model="formData.remark"
                        placeholder="多行输入"
                    ></el-input>
                </el-form-item>
                <el-form-item label="执行策略">
                    <el-radio-group v-model="formData.strategy">
                        <el-radio :label="1">立即执行</el-radio>
                        <el-radio :label="2">执行一次</el-radio>
                        <el-radio :label="3">放弃执行</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否并发">
                    <el-radio-group v-model="formData.concurrent">
                        <el-radio :label="1">允许</el-radio>
                        <el-radio :label="0">禁止</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="formData.status" :active-value="1" :inactive-value="2" />
                </el-form-item>
            </el-form>
        </el-card>

        <!-- Footer Start -->
        <footer-btns>
            <el-button type="primary" @click="handleSave">保存</el-button>
        </footer-btns>
        <!-- Footer End -->
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { apiCrontabAdd, apiCrontabEdit, apiCrontabDetail } from '@/api/setting/system'
import { PageMode } from '@/utils/enum'
import type { ElForm } from 'element-plus'
import feedback from '@/utils/feedback'
import useMultipleTabs from '@/hooks/useMultipleTabs'

type FormInstance = InstanceType<typeof ElForm>
const route = useRoute()
const router = useRouter()
const mode = ref<string>(PageMode['ADD']) // 当前页面: add-添加角色 edit-编辑角色

// 表单数据
const formData = reactive({
    id: '',
    name: '',
    types: 'default',
    command: '',
    rules: '',
    status: 1,
    strategy: 1,
    concurrent: 0,
    remark: ''
})

const formRef = shallowRef<FormInstance>()
const rules = reactive({
    name: [{ required: true, message: '请输入任务名称' }],
    command: [{ required: true, message: '请输入调用目标字符串' }],
    rules: [{ required: true, message: '请输入cron执行表达式' }]
})

const { removeTab } = useMultipleTabs()

const getDetails = async () => {
    const data = await apiCrontabDetail({
        id: route.query.id
    })
    Object.keys(formData).forEach(key => {
        //@ts-ignore
        formData[key] = data[key]
    })
}

const handleSave = async () => {
    await formRef.value?.validate()
    if (route.query.id) {
        await apiCrontabEdit(formData)
    } else {
        await apiCrontabAdd(formData)
    }
    feedback.msgSuccess('操作成功')
    removeTab()
    router.back()
}
onMounted(async () => {
    if (!route.query.id) {
        return
    }
    await getDetails()
})
</script>
