<template>
    <el-form ref="formRef" :model="formData" label-width="110px" :rules="formRules">
        <el-row>
            <el-col :span="8">
                <el-form-item label="开始时间" prop="kssj">
                    <el-date-picker class="flex-1 !flex" v-model="formData.kssj" clearable type="datetime"
                        value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间" @change="calcDay">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="结束时间" prop="jssj">
                    <el-date-picker class="flex-1 !flex" v-model="formData.jssj" clearable type="datetime"
                        value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间" @change="calcDay">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="出差天数">
                    <el-input v-model="formData.qjts" clearable placeholder="请输入请假天数" />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="出差事由" prop="ccsy">
                    <el-input v-model="formData.ccsy" clearable placeholder="请输入请假事由" type="textarea" />
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="附件">
                    <uploadAnnex :form-data="formData"></uploadAnnex>
                </el-form-item>
            </el-col>

        </el-row>

    </el-form>
</template>

<script setup lang="ts">
const qjlxList = reactive(['事假', '年假', '调休假', '病假', '婚假', '产假', '陪产假', '其他'])
const formData = reactive({})
const formRef = ref(null)


const checkDate = (rule: any, value: any, callback: any) => {
    if (new Date(formData.jssj) < new Date(formData.kssj)) {
        callback(new Error('结束时间不能早于开始时间'))
    } else {
        callback()
    }
}

// 表单验证
const formRules = reactive({
    qjlx: [{
        required: true,
        message: '不可为空',
        trigger: ['blur']
    }],
    kssj: [{
        required: true,
        message: '不可为空',
        trigger: ['blur']
    }],
    jssj: [
        {
            required: true,
            message: '不可为空',
            trigger: ['blur']
        },
        {
            validator: checkDate,
            trigger: ['blur']
        }
    ],
    ccsy: [{
        required: true,
        message: '不可为空',
        trigger: ['blur']
    }],
})

const calcDay = () => {
    const date1 = formData.kssj;
    const date2 = formData?.jssj;
    if (date1 && date2) {
        const timeDiff = new Date(date2).getTime() - new Date(date1).getTime();
        const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
        formData.qjts = daysDiff || 0
    }
}

</script>