<template>
    <a-drawer :title="title" :visible="true" :width="540" :body-style="{ paddingBottom: '80px' }"
        :footer-style="{ textAlign: 'right' }" @close="onClose">
        <a-form ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <!-- 名称 -->
            <a-form-item label="版本名称" name="name">
                <a-input v-model:value="form.name" style="width: 100%" placeholder="请输入名称" />
            </a-form-item>
            <!-- 说明 -->
            <a-form-item label="版本说明" name="description">
                <a-input v-model:value="form.description" style="width: 100%" placeholder="请输入说明" />
            </a-form-item>
        </a-form>
        <div :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: 1,
        }">
            <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
            <a-button type="primary" @click="onSubmit">确定</a-button>
        </div>
    </a-drawer>
</template>
<script>
import { defineComponent, reactive, ref, onMounted, watch } from 'vue';
import { message } from 'ant-design-vue';
// import { addVersion, updateVersion } from '/@/api/sys/version';
import { session } from '/@/utils/Memory';
import moment from 'moment';

const props = {
    formData: {
        type: Object,
        default: () => {
            return {}
        }
    },
    drawerTitle: {
        type: String,
        default: "新增版本"
    }
}
export default defineComponent({
    name: 'VersionDrawer',
    components: {},
    props,
    setup(props, { emit }) {
        const form = reactive({
            dataVersionConfs: [],
            description: "",
            insertTime: "",
            name: "",
            type: "",
            updateTime: "",
            vid: "",
        });
        const rules = {
            name: [{
                required: true,
                message: '请输入版本名称',
                trigger: 'blur'
            }],
            description: [{
                required: true,
                message: '请选择版本说明',
                trigger: 'blur'
            }]
        };
        const title = ref(props.drawerTitle)
        const formRef = ref()

        onMounted(() => {
            if (Object.keys(props.formData).length) {
                for (let key in form) {
                    form[key] = props.formData[key]
                }
            };
        })

        watch(
            () => [props.formData, props.drawerTitle],
            ([newF, newD]) => {
                for (let key in form) {
                    form[key] = props.formData[key]
                }
                title.value = newD
            },
            {
                immediate: true,
                deep: true
            }
        )
        // 关闭弹窗
        const onClose = () => {
            emit('closeDialog')
            resetForm()
        };
        // 提交信息
        const onSubmit = () => {
            // formRef.value.validate().then(() => {
            //     //此处调用新增
            //     if (title.value === '新增版本') {
            //         let { name, description } = form
            //         //新增版本
            //         let param = {
            //             1: session.getItem('tokenV2'),
            //             2: JSON.stringify({ name: name, description: description })
            //         }
            //         addVersion(param).then(res => {
            //             if (res.status === "0") {
            //                 message.success('操作成功')
            //                 resetForm()
            //                 emit('onSubmit', true)
            //             } else {
            //                 message.error('操作失败')
            //             }
            //         })
            //     } else {
            //         form.updateTime = moment().format('YYYY-MM-DD HH:mm:ss')
            //         let param = {
            //             1: session.getItem('tokenV2'),
            //             2: JSON.stringify(form)
            //         }
            //         updateVersion(param).then(res => {
            //             if (res.status === "0") {
            //                 message.success('操作成功')
            //                 resetForm()
            //                 emit('onSubmit', true)
            //             } else {
            //                 message.error('操作失败')
            //             }
            //         })
            //     }
            // }).catch((error) => {
            //     console.log('error', error);
            // });
        };
        // 重置表单
        const resetForm = () => {
            formRef.value.resetFields();
        };
        return {
            form,
            rules,
            title,
            formRef,
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },
            onClose,
            onSubmit,
            resetForm
        };
    },
});
</script>