<template>
    <el-dialog
        v-model="dialogVisible"
        title="协商（留言）"
        width="500px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
        <div>
            <div class="mb-2">说明：</div>
            <el-input
                v-model="form.description"
                type="textarea"
                :rows="5"
                placeholder="请输入"
            />

            <div class="mt-4 mb-2">附件：</div>
            <ImageUpload
                v-model="fileUrls"
                multiple
                :limit="3"
                @change="handleFileUrlsChange"
            />
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleCancel">取消</el-button>
                <el-button type="primary" @click="handleSubmit">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
    import {
        ref,
        reactive,
        defineEmits,
        defineProps,
        defineExpose,
        watch
    } from 'vue';
    import { EleMessage } from 'ele-admin-plus/es';
    import ImageUpload from '@/components/ImageUpload/index.vue';

    const props = defineProps({
        visible: {
            type: Boolean,
            default: false
        },
        id: {
            type: [Number, String],
            default: ''
        }
    });

    const emit = defineEmits(['update:visible', 'submit', 'cancel']);

    // 对话框可见性
    const dialogVisible = ref(false);

    // 监听visible属性变化
    watch(
        () => props.visible,
        (val) => {
            dialogVisible.value = val;
            if (val) {
                // 重置表单
                resetForm();
            }
        }
    );

    // 监听dialogVisible变化
    watch(dialogVisible, (val) => {
        emit('update:visible', val);
    });

    // 表单数据
    const form = reactive({
        id: '',
        description: '',
        fileUrls: []
    });

    // 文件URL字符串，用于ImageUpload组件
    const fileUrls = ref('');

    // 重置表单
    const resetForm = () => {
        form.id = props.id;
        form.description = '';
        form.fileUrls = [];
        fileUrls.value = '';
    };

    // 处理文件URL变更
    const handleFileUrlsChange = (value) => {
        if (!value) {
            form.fileUrls = [];
            return;
        }

        try {
            // ImageUpload组件返回的是JSON字符串，需要解析
            const parsed = JSON.parse(value);
            form.fileUrls = Array.isArray(parsed) ? parsed : [parsed];
        } catch (e) {
            // 尝试逗号分割
            if (typeof value === 'string' && value.includes(',')) {
                form.fileUrls = value.split(',').filter((item) => item);
            } else {
                // 单个文件的情况，直接作为字符串处理
                form.fileUrls = [value];
            }
        }
    };

    // 取消
    const handleCancel = () => {
        dialogVisible.value = false;
        emit('cancel');
    };

    // 提交
    const handleSubmit = () => {
        if (!form.description.trim()) {
            EleMessage.warning('请输入协商内容');
            return;
        }

        // 准备提交数据
        const submitData = {
            id: form.id,
            description: form.description,
            fileUrls: form.fileUrls
        };

        // 发送提交事件
        emit('submit', submitData);
    };

    // 对外暴露方法
    defineExpose({
        resetForm
    });
</script>

<style lang="scss" scoped>
    .upload-demo {
        .el-upload {
            margin-right: 10px;
        }
    }
</style>
