<template>
    <vxe-modal v-model="dialogVisible" :title="title" show-zoom resize show-footer destroy-on-close transfer @hide="close" :width="width" :z-index="1002">
        <template #default>
            <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
                <div class="mb-10 f-s-14 c-333 f-w-5">
                    修改企业：
                    <span class="c-primary">{{ info?.cpyName }}</span>
                </div>
                <el-form-item label="有效期至:" prop="endDate">
                    <el-date-picker v-model="form.endDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择有效期" clearable style="width: 100%"></el-date-picker>
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="submitForm">确认修改</el-button>
        </template>
    </vxe-modal>
</template>

<script setup name="EditVipEndDate" lang="ts">
import { editValidityDate } from '@/api/dgtmedicine/member/index';
import { propTypes } from '@/utils/propTypes';
import { FormInstance } from 'element-plus';
const emit = defineEmits(['update:show', 'close', 'success']);
const props = defineProps({
    show: propTypes.bool.def(false),
    title: propTypes.string.def('修改有效期'),
    width: propTypes.number.def(560),
    info: propTypes.any.def(null),
    dict: propTypes.object.def({}),
});
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const dialogVisible = ref(false);
const form = ref<any>({
    endDate: ''
});
const rules = reactive({
    endDate: [{ required: true, message: '请选择有效期', trigger: 'change' }],
})
const formRef = ref<FormInstance>();
const close = () => {
    formRef.value?.resetFields();
    emit('update:show', false);
    emit('close', false);
};
const submitForm = async () => {
    try {
        await formRef.value?.validate();
        proxy?.$modal.loading('修改中...');
        const res = await editValidityDate({ ...form.value, id: props.info?.id }).finally(() => {
            proxy?.$modal.closeLoading();
        });
        if (res?.code === 200) {
            close();
            emit('success', true);
        }
    } catch (error) {
        console.error(error);
    }
};

watch(
    () => props.show,
    (val) => {
        dialogVisible.value = val;
    },
    { immediate: true }
);
</script>
