<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import moment from 'moment'

const emit = defineEmits(['addRenewal','close'])

const rules = {
    signDate:[{required: true, message: '请选择签署日期', trigger: 'change' },],
    expirationDate:[{required: true, message: '请选择签署日期', trigger: 'change' },],
}

const ruleForm = reactive({
    signDate:'',
    expirationDate:''
})

const ruleFormRef = ref(null)
function handleSave(){
    ruleFormRef.value.validate((valid)=>{
        if(valid){
            const flag=moment(ruleForm.signDate).isBefore(ruleForm.expirationDate);
            if(!flag){
                ElMessage.warning('到期时间不得早于签约时间')
                return
            }
            emit('addRenewal',ruleForm)
            initForm()
        }
    })
}

function initForm(){
    ruleForm.signDate = ''
    ruleForm.expirationDate = ''
    ruleFormRef.value.resetFields();
}

function handleClose(){
    initForm()
    emit('close')
}

</script>
<template>
  <div class="add-renewal-wrap">
        <el-form 
            :model="ruleForm" 
            :rules="rules" 
            ref="ruleFormRef" 
            label-width="100px" 
            class="demo-ruleForm"
        >
            <el-form-item label="签约时间" prop="signDate">
                <el-date-picker
                    v-model="ruleForm.signDate"
                    type="date"
                    placeholder="选择日期"
                    value-format="YYYY-MM-DD"
                />
            </el-form-item>
            <el-form-item label="到期时间" prop="expirationDate">
                <el-date-picker
                    v-model="ruleForm.expirationDate"
                    type="date"
                    placeholder="选择日期"
                    value-format="YYYY-MM-DD"
                />
            </el-form-item>
            <div style="text-align:center;margin:30px 0">
                <el-button type="primary" plain @click="handleClose">取消</el-button>
                <el-button type="primary" @click="handleSave">保存</el-button>
            </div>
        </el-form>
    </div>
</template>
<style scoped lang="scss">

</style>