<template>
    <el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="700px">
        <template #header>
            <div>
                <el-icon class="el-custom-dialog-icon">
                    <Edit />
                </el-icon>
                <span>延期Job</span>
            </div>
        </template>
        <div class="app-container" v-loading="state.loading" style="min-height: 200px;">
            <el-form ref="elFormRef" :model="state.form" label-width="90px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="结束时间">
                            <el-date-picker v-model="state.form.endTime" type="datetime" placeholder="结束时间" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <template #footer>
            <div class="el-custom-dialog-footer">
                <el-button type="primary" @click="submit" :disabled="state.loading">确定</el-button>
                <el-button @click="() => (state.isShowDialog = false)" :disabled="state.loading">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { reactive, ref,defineExpose } from 'vue'
import {  deferredJob } from '@/api/system/autoJobApi'
import { ElMessage } from 'element-plus'

const emits = defineEmits(['onClose'])

const state = reactive({
    isShowDialog: false,
    form: {},
    loading: false,
})
const elFormRef = ref()
function openDialog(obj) {
    state.loading = true
    resetForm()
    state.form.id=obj.id
    state.form.endTime=obj.endTime
    state.loading = false
    state.isShowDialog = true
}

function resetForm() {
    state.form = {
        id: null,
        endTime:'',
    }
    elFormRef.value?.resetFields()
}

function submit() {
    state.loading = true
    deferredJob(state.form).then(() => 
    {
        ElMessage('延期成功')
        emits('onClose')
        state.isShowDialog = false
        state.loading = false
    })
}

defineExpose({
    openDialog
})
</script>