<template>
    <ele-modal
        :width="700"
        v-model="visible"
        title="申请协商"
        :body-style="{ padding: '20px' }"
        @closed="handleClosed"
    >
        <div class="negotiate-content">
            <!-- Step 1 -->
            <div class="step-item">
                <div class="step-title font-bold mb-3 flex items-center">
                    <span
                        class="step-num bg-blue-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs mr-2"
                        >1</span
                    >
                    <span class="step-text">选择协商类型</span>
                </div>
                <div class="step-content pl-7 mb-4">
                    <el-radio-group v-model="form.type">
                        <el-radio :label="1">退款金额协商</el-radio>
                        <el-radio :label="2">退货商品异常</el-radio>
                    </el-radio-group>
                </div>
            </div>

            <!-- Step 2 -->
            <div class="step-item" v-if="form.type === 1">
                <div class="step-title font-bold mb-3 flex items-center">
                    <span
                        class="step-num bg-blue-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs mr-2"
                        >2</span
                    >
                    <span class="step-text" style="width: 120px"
                        >确认协商方案</span
                    >
                    <span
                        class="text-xs text-gray-400 ml-2 font-normal"
                        style="max-width: 500px"
                        >若消费者接受协商，则按协商方案执行；若消费者拒绝协商，您需重新审核退款单，建议先与消费者协商一致。</span
                    >
                </div>
                <div class="step-content pl-7 mb-4">
                    <div class="form-item mb-3">
                        <div class="label mb-1 text-sm text-gray-600"
                            >* 建议退款金额</div
                        >
                        <el-input-number
                            v-model="form.disposeMoney"
                            :min="0"
                            :max="maxRefundAmount"
                            :precision="2"
                            :step="0.01"
                            controls-position="right"
                            style="width: 200px"
                        />
                        <span class="text-xs text-gray-400 ml-2"
                            >最大可退金额: {{ maxRefundAmount }}元</span
                        >
                    </div>
                </div>
            </div>

            <!-- Step 3 (Only for Type 2) -->
            <div class="step-item">
                <div class="step-title font-bold mb-3 flex items-center">
                    <span
                        class="step-num bg-blue-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs mr-2"
                        >{{ form.type === 1 ? '3' : '2' }}</span
                    >
                    <span class="step-text">配置拒绝方案</span>
                </div>
                <div class="step-content pl-7">
                    <div class="form-item mb-3">
                        <div class="label mb-1 text-sm text-gray-600"
                            >* 拒绝原因</div
                        >
                        <dict-data
                            :code="
                                refundType == 2
                                    ? 'shop_refund_money_reason'
                                    : 'shop_refund_reason'
                            "
                            v-model="form.reason"
                            placeholder="请选择拒绝原因"
                            class="w-full"
                        />
                    </div>
                    <div class="form-item mb-3">
                        <div class="label mb-1 text-sm text-gray-600"
                            >拒绝说明</div
                        >
                        <el-input
                            v-model="form.description"
                            type="textarea"
                            :rows="3"
                            placeholder="请输入拒绝说明"
                            maxlength="200"
                            show-word-limit
                        />
                    </div>
                    <div class="form-item">
                        <div class="label mb-1 text-sm text-gray-600"
                            >上传凭证</div
                        >
                        <ImageUpload v-model="imgUrlsStr" :limit="9" />
                        <div class="text-xs text-gray-400 mt-1"
                            >支持上传图片或视频，视频大小不超过100M，时长不超过1分钟</div
                        >
                    </div>
                </div>
            </div>
        </div>

        <template #footer>
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" :loading="loading" @click="handleSubmit"
                >提交协商</el-button
            >
        </template>
    </ele-modal>
</template>

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

    const visible = defineModel({ type: Boolean });
    const props = defineProps({
        refundOrderId: {
            type: [String, Number],
            required: true
        },
        maxRefundAmount: {
            type: Number,
            default: 0
        },
        refundType: {
            type: Number,
            default: null
        }
    });

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

    const loading = ref(false);
    const imgUrlsStr = ref('');

    const form = reactive({
        type: 1,
        disposeMoney: 0,
        reason: '',
        description: '',
        imgUrls: []
    });

    // Reset form when dialog opens
    watch(
        () => visible.value,
        (val) => {
            if (val) {
                form.type = 1;
                form.disposeMoney = 0;
                form.reason = '';
                form.description = '';
                form.imgUrls = [];
                imgUrlsStr.value = '';
            }
        }
    );

    const handleClosed = () => {
        // Reset handled in watch
    };

    const handleSubmit = () => {
        if (form.type === 1) {
            if (form.disposeMoney === undefined || form.disposeMoney === null) {
                EleMessage.warning('请输入建议退款金额');
                return;
            }
        }

        if (!form.reason) {
            EleMessage.warning('请选择拒绝原因');
            return;
        }

        form.imgUrls = imgUrlsStr.value ? imgUrlsStr.value.split(',') : [];

        const params = {
            refundOrderId: props.refundOrderId,
            type: form.type,
            disposeMoney: form.type === 1 ? form.disposeMoney : 0,
            reason: form.reason,
            description: form.description,
            imgUrls: form.imgUrls
        };

        loading.value = true;
        request
            .post('/shop/shopOrder/refund/auditDispose', 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;
            });
    };
</script>

<style scoped lang="scss">
    .step-item {
        .step-num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            background-color: #409eff;
            color: white;
            border-radius: 50%;
            font-size: 12px;
            margin-right: 8px;
        }
    }
</style>
