<template>
    <el-dialog draggable width="500px" v-model="dialogVisible" :title="title">

        <el-form :inline="false" :model="form" label-width="auto" class="form-one" :rules="rules" ref="formRef">
            <el-form-item label="任务名称" prop="timerName">
                <el-input maxlength="32" show-word-limit  v-model.trim="form.timerName" clearable  
                    placeholder="请输入任务名称" />
            </el-form-item>
            <el-form-item label="任务执行器" prop="actionClass">
                <el-select v-model.trim="form.actionClass" placeholder="请选择任务执行器" filterable>
                    <el-option v-for="item in actionClassesOptions" :key="item" :label="item" :value="item"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="任务表达式" prop="cron">
                <el-input maxlength="32" show-word-limit  v-model.trim="form.cron" clearable placeholder="请输入任务表达式" />
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input-number style="width: 100%" :min="0" v-model.number="form.sort" placeholder="请输入排序" />
                <!-- <el-input maxlength="32" show-word-limit  style="width: 100%" v-model.number.trim="form.sort"  placeholder="请输入排序" /> -->
            </el-form-item>
            <el-form-item label="备注">
                <el-input maxlength="300" show-word-limit  v-model.trim="form.remark" clearable :rows="2" type="textarea" placeholder="请输入备注" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submit" :loading="loading">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject, onMounted } from 'vue'
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { getActionClasses, addTimer, updateTimer } from '@/api/system-boot/csDictData'
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
const emit = defineEmits(['submit'])
const dialogVisible = ref(false)
const title = ref('')
const tableStore = inject('tableStore') as TableStore
const formRef = ref()
const loading = ref(false)
// 注意不要和表单ref的命名冲突
const form = reactive<anyObj>({
    cron: '',
    actionClass: '',
    timerName: '',
    remark: '',
    jobStatus: 1,
    sort: 100,
    id: '',

})
const actionClassesOptions = ref([])
const rules = {
    actionClass: [{ required: true, message: '请选择任务执行器', trigger: 'change' }],
    timerName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
    cron: [{ required: true, message: '请输入任务表达式', trigger: 'blur' }],
    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
    date: [{ required: true, message: '请输入日期', trigger: 'blur' }],
}

const open = (text: string, data?: anyObj) => {
    formRef.value?.resetFields()
    title.value = text
    dialogVisible.value = true
    if (data) {
        // 表单赋值
        for (let key in form) {
            form[key] = data[key]
        }
    } else {
        // 在此处恢复默认表单
        for (let key in form) {
            key == 'sort' ? form[key] = 100 : form[key] = ''
        }
    }
}
onMounted(() => {
    getActionClasses().then(res => {
        actionClassesOptions.value = res.data
    })
})
const submit = () => {
    formRef.value.validate(async (valid: boolean) => {
        if (valid) {
            loading.value = true
            if (title.value == '新增定时任务') {
                addTimer(form).then(res => {
                    ElMessage.success('新增成功')
                    dialogVisible.value = false
                    emit('submit')
                }).finally(() => {
                    loading.value = false
                })
            } else {
                updateTimer(form).then(res => {
                    ElMessage.success('新增成功')
                    dialogVisible.value = false
                    emit('submit')
                }).finally(() => {
                    loading.value = false
                })
            }



        }
    })
}

defineExpose({ open })
</script>
