<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" :label-col="labelCol" :wrapper-col="wrapperCol">
            <!-- 名称 -->
            <a-form-item label="记录id" name="ID">
                <a-input v-model:value="form.ID" style="width: 100%" placeholder="根据名称生成" disabled />
            </a-form-item>
            <!-- 编码 -->
            <a-form-item label="用户名称" name="USERNAME">
                <a-input v-model:value="form.USERNAME" style="width: 100%" placeholder="根据名称生成" disabled />
            </a-form-item>
            <!-- 排序 -->
            <a-form-item label="用户id" name="USERID">
                <a-input v-model:value="form.USERID" style="width: 100%" placeholder="根据名称生成" disabled />
            </a-form-item>
            <!-- 排序 -->
            <a-form-item label="操作类型" name="OPT">
                <a-input v-model:value="form.OPT" style="width: 100%" placeholder="根据名称生成" disabled />
            </a-form-item>
            <!-- 排序 -->
            <a-form-item label="操作说明" name="CZSM">
                <a-input v-model:value="form.CZSM" style="width: 100%" placeholder="根据名称生成" disabled />
            </a-form-item>
            <!-- 排序 -->
            <a-form-item label="是否成功" name="SFCG">
                <a-input v-model:value="form.SFCG" style="width: 100%" placeholder="根据名称生成" disabled />
            </a-form-item>
            <!-- 排序 -->
            <a-form-item label="创建时间" name="CJRQ">
                <a-input v-model:value="form.CJRQ" style="width: 100%" placeholder="根据名称生成" disabled />
            </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';

const props = {
    formData: {
        type: Object,
        default: () => {
            return {}
        }
    },
    drawerTitle: {
        type: String,
        default: "操作记录详情"
    }
}
export default defineComponent({
    name: 'OperateDrawer',
    components: {},
    props,
    setup(props, { emit }) {
        const form = reactive({
            ID: "",
            USERNAME: "",
            USERID: "",
            OPT: "",
            CZSM: "",
            SFCG: 0,
            CJRQ: "",
        });
        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]
                }
                form.SFCG = form.SFCG === 0?'失败':'成功'
            };
        })

        watch(
            () => [props.formData, props.drawerTitle],
            ([newF, newD]) => {
                for (let key in form) {
                    form[key] = props.formData[key]
                }
                form.SFCG = form.SFCG === 0?'失败':'成功'
                title.value = newD
            },
            {
                immediate: true,
                deep: true
            }
        )
        // 关闭弹窗
        const onClose = () => {
            emit('closeDialog')
            resetForm()
        };
        // 提交信息
        const onSubmit = () => {
            onClose();
        };
        // 重置表单
        const resetForm = () => {
            formRef.value.resetFields();
        };
        return {
            form,
            title,
            formRef,
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },
            onClose,
            onSubmit,
            resetForm
        };
    },
});
</script>