<template>
    <ele-modal
        :width="600"
        v-model="visible"
        :title="title"
        @confirm="handleConfirm"
        @cancel="handleCancel"
        :confirm-loading="loading"
    >
        <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="书单名称" prop="showName">
                <el-input
                    v-model="form.showName"
                    placeholder="请输入书单名称"
                />
            </el-form-item>

            <el-form-item label="是否上线" prop="showStatus">
                <el-switch
                    v-model="form.showStatus"
                    :active-value="1"
                    :inactive-value="2"
                />
            </el-form-item>

            <el-form-item label="书单banner" prop="imgUrl">
                <div class="flex flex-col">
                    <image-upload
                        v-model="form.imgUrl"
                        :limit="1"
                        :fileSize="2"
                        fileType="jpg"
                    />
                    <span class="text-gray-400 text-xs mt-1"
                        >建议尺寸：750*350</span
                    >
                </div>
            </el-form-item>

            <el-form-item label="书单描述" prop="remark">
                <el-input
                    v-model="form.remark"
                    type="textarea"
                    placeholder="请输入书单描述"
                />
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="flex justify-end items-center">
                <el-button @click="handleCancel">取消</el-button>
                <el-button
                    type="primary"
                    :loading="loading"
                    @click="handleConfirm"
                    >确定</el-button
                >
            </div>
        </template>
    </ele-modal>
</template>

<script setup>
    import { ref, reactive, computed } from 'vue';
    import ImageUpload from '@/components/ImageUpload/index.vue';
    import request from '@/utils/request';
    import { EleMessage } from 'ele-admin-plus/es';

    const emit = defineEmits(['success']);

    const visible = ref(false);
    const loading = ref(false);
    const formRef = ref(null);

    const form = reactive({
        id: undefined,
        showName: '',
        imgUrl: '',
        showStatus: 1,
        remark: '',
        cateType: 2 //书单
    });

    const rules = {
        showName: [
            { required: true, message: '请输入书单名称', trigger: 'blur' }
        ],
        imgUrl: [
            { required: true, message: '请上传Banner', trigger: 'change' }
        ],
        showStatus: [
            { required: true, message: '请选择状态', trigger: 'change' }
        ]
    };

    const title = computed(() => (form.id ? '编辑书单' : '添加书单'));

    const handleOpen = async (row) => {
        visible.value = true;

        if (row) {
            Object.assign(form, {
                id: row.id,
                showName: row.showName,
                imgUrl: row.imgUrl,
                showStatus: row.showStatus,
                remark: row.remark,
                cateType: 2 //书单
            });
        } else {
            Object.assign(form, {
                id: undefined,
                showName: '',
                imgUrl: '',
                showStatus: 1,
                remark: '',
                cateType: 2 //书单
            });
        }
    };

    const handleConfirm = () => {
        formRef.value?.validate(async (valid) => {
            if (!valid) return;
            loading.value = true;
            try {
                const params = { ...form };
                if (!params.id) {
                    delete params.id;
                }
                await request.post('/book/showIndex/addSpecial', params);

                EleMessage.success(title.value + '成功');
                visible.value = false;
                emit('success');
            } catch (e) {
                console.error(e);
                EleMessage.error(e.message || '操作失败');
            } finally {
                loading.value = false;
            }
        });
    };

    const handleCancel = () => {
        visible.value = false;
    };

    defineExpose({
        handleOpen
    });
</script>
