<template>
    <ele-modal
        :width="600"
        v-model="visible"
        title="拒绝退款"
        :body-style="{ padding: '20px 40px' }"
    >
        <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
            <el-form-item label="驳回原因" prop="reason">
                <dict-data
                    :code="
                        refundType == 2
                            ? 'shop_refund_money_reason'
                            : 'shop_refund_reason'
                    "
                    v-model="form.reason"
                    placeholder="请选择"
                    class="w-full"
                />
            </el-form-item>

            <el-form-item label="驳回描述" prop="description">
                <el-input
                    v-model="form.description"
                    type="textarea"
                    :rows="4"
                    placeholder="请详细描述您向消费者提供的解决方案。"
                    maxlength="200"
                    show-word-limit
                />
            </el-form-item>

            <el-form-item label="协商凭证" prop="imgUrlsStr">
                <ImageUpload v-model="form.imgUrlsStr" :limit="5" />
                <div class="text-xs text-gray-400 mt-1">上传图片最多5张</div>
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="flex justify-center gap-4">
                <el-button
                    type="success"
                    :loading="loading"
                    @click="handleSubmit"
                    >提交</el-button
                >
                <el-button @click="visible = false">取消</el-button>
            </div>
        </template>
    </ele-modal>
</template>

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

    const visible = ref(false);
    const loading = ref(false);
    const formRef = ref(null);
    const currentRefundOrderId = ref('');
    const refundType = ref('');

    const form = reactive({
        reason: '',
        description: '',
        imgUrlsStr: ''
    });

    const rules = {
        reason: [
            { required: true, message: '请选择驳回原因', trigger: 'change' }
        ],
        description: [
            { required: true, message: '请输入驳回描述', trigger: 'blur' }
        ]
    };

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

    const open = (refundOrderId, type) => {
        currentRefundOrderId.value = refundOrderId;
        refundType.value = type;
        // 重置表单
        form.reason = '';
        form.description = '';
        form.imgUrlsStr = '';
        if (formRef.value) {
            formRef.value.clearValidate();
        }
        visible.value = true;
    };

    const handleSubmit = async () => {
        if (!formRef.value) return;

        await formRef.value.validate((valid) => {
            if (valid) {
                submitData();
            }
        });
    };

    const submitData = () => {
        const params = {
            refundOrderId: currentRefundOrderId.value,
            reason: form.reason,
            description: form.description,
            imgUrls: form.imgUrlsStr ? form.imgUrlsStr.split(',') : []
        };

        loading.value = true;
        request
            .post('/shop/shopOrder/refund/auditRefuse', params)
            .then((res) => {
                if (res.data.code === 200) {
                    EleMessage.success('操作成功');
                    visible.value = false;
                    emit('success');
                } else {
                    EleMessage.error(res.data.msg || '操作失败');
                }
            })
            .catch((e) => {
                console.error(e);
                EleMessage.error('网络错误');
            })
            .finally(() => {
                loading.value = false;
            });
    };

    defineExpose({
        open
    });
</script>

<style scoped>
    /* 可根据需要调整样式 */
</style>
