<template>
    <view>
        <!-- 选择售后商品 -->
        <view>
            <u-popup ref="popup" :show="afterSalePopup" :round="10" @close="closeAfterSalePopup"
                :mask-close-able="false">
                <view class="cancel-reason-container">
                    <view class="title">选择退款原因</view>
                    <view class="asType">
                        <text>请选择售后类型</text>
                        <view class="asTabs">
                            <view :class="['asTab', selectedAfterSaleType === 0 ? 'active' : '']"
                                @click="selectAfterSaleType(0)">
                                退货/退款</view>
                            <view :class="['asTab', selectedAfterSaleType === 1 ? 'active' : '']"
                                @click="selectAfterSaleType(1)">换货
                            </view>
                        </view>
                    </view>
                    <view class="asGoodsInfo" v-for="(item, index) in afterSaleGoods" :key="index">
                        <view class="asGoodInfo" @click="selectAsGood(item)">
                            <view :class="['radio asGoodRadio', selectedAsGood == item.id ? 'active' : '']"></view>
                            <view class="asGoodTag tag-img" v-if="item.is_support_same_day === 1">当日达</view>
                            <image :src="item.commodity_pic" class="asGoodImg"></image>
                            <view class="asGoodDetail">
                                <view class="asGoodTitle">
                                    <text class="asGoodTag asGoodTag1" v-if="item.is_support_same_day === 1">当日达</text>
                                    {{ item.goods_name}}
                                </view>
                                <view class="asGoodDesc">{{ item.goods_spec }}</view>
                                <view class="asGoodPrice">¥{{ item.cost_price }}/个</view>
                            </view>
                            <view class="asGoodNum">x{{ item.count }}</view>
                        </view>
                    </view>
                    <button class="confirm-btn" @click="confirmAfterSaleCancel">下一步</button>
                </view>
            </u-popup>
        </view>

        <!------------------------ 退货退款逻辑 ------------------------>
        <!-- 选择退款原因 -->
        <view v-if="selectedAfterSaleType === 0">
            <u-popup ref="popup" :show="afterSalePopup2" :round="10" @close="closeAfterSalePopup2"
                :mask-close-able="false">
                <view class="cancel-reason-container">
                    <view class="title">选择退款原因</view>
                    <view class="asTabs2">
                        <view :class="['asTab2', selectedAfterSaleType2 === 0 ? 'active' : '']"
                            @click="selectAfterSaleType2(0)">
                            退货退款</view>
                        <view :class="['asTab2', selectedAfterSaleType2 === 1 ? 'active' : '']"
                            @click="selectAfterSaleType2(1)">退货
                        </view>
                    </view>
                    <view class="reason-list" v-if="selectedAfterSaleType2 === 0">
                        <view v-for="(reason, index) in applyRefundReasons" :key="index" class="reason-item"
                            @click="selectAsReason(index)">
                            <view :class="['radio', selectedAsReason === index ? 'active' : '']"></view>
                            <text>{{ reason }}</text>
                        </view>
                    </view>
                    <view class="reason-list" v-if="selectedAfterSaleType2 === 1">
                        <view v-for="(reason, index) in cancelReasons" :key="index" class="reason-item"
                            @click="selectAsReason(index)">
                            <view :class="['radio', selectedAsReason === index ? 'active' : '']"></view>
                            <text>{{ reason }}</text>
                        </view>
                    </view>
                    <button class="confirm-btn" @click="confirmAfterSaleCancel2">下一步</button>
                </view>
            </u-popup>
        </view>
        <!-- 确认退款信息 -->
        <view v-if="selectedAfterSaleType === 0">
            <u-popup ref="popup" :show="afterSalePopup3" :round="10" @close="closeAfterSalePopup3"
                :mask-close-able="false">
                <view class="refund-info-container">
                    <view class="refund-title">确认退款信息</view>
                    <view class="refund-item">
                        <view class="refund-label">服务类型<text class="required">*</text></view>

                        <view class="refund-value" @click="openAfterSalePopup2('serviceType')">
                            {{ selectedServiceType || '请选择服务类型' }}
                            <text class="arrow-right"></text>
                        </view>
                    </view>
                    <view class="refund-item">
                        <view class="refund-label">退款原因<text class="required">*</text></view>
                        <view class="refund-value" @click="openAfterSalePopup2('refundReason')">
                            {{ selectedRefundReason || '请选择退款原因' }}
                            <text class="arrow-right"></text>
                        </view>
                    </view>
                    <view class="refund-item" style="border-bottom: none;">
                        <view class="refund-label">退款金额<text class="required">*</text></view>
                        <view class="refund-value">
                            <text class="price">¥{{ refundAmount || '0.00' }}</text>
                            <text class="modify-btn" @click="modifyRefundAmount">修改</text>
                            <view class="refund-hint">可修改，最多¥{{ maxRefundAmount || '0.00' }}，含发货邮费¥{{ postage || '0.00'
                            }}</view>
                        </view>
                    </view>
                    <view class="hr"></view>
                    <view class="refund-item2">
                        <view class="refund-label">补充描述和凭证</view>
                        <textarea class="refund-description" placeholder="补充描述，有助于商家更好的处理售后问题"
                            v-model="refundDescription" maxlength="200"></textarea>
                        <u-upload :fileList="imgList" @afterRead="afterReadImg" @delete="deletePic" name="1" multiple
                            :maxCount="3">
                            <view class="imgCon">
                                <image
                                    src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_imageImg.png"
                                    mode="widthFix"></image>
                                上传凭证
                            </view>
                        </u-upload>
                    </view>
                    <view class="hr"></view>
                    <view class="refund-item">
                        <view class="refund-label">退款方式</view>
                        <view class="refund-value" style="margin-bottom: 30rpx;">
                            {{ refundMethod || '自行寄回' }}
                            <view class="refund-hint">您可自行安排将商品退回商家</view>
                        </view>
                    </view>
                    <view class="refund-item">
                        <view class="refund-label">商家地址</view>
                        <view class="refund-value" @click="viewAddressDetails">
                            {{ merchantAddress || '未设置' }}
                            <text class="arrow-right"></text>
                        </view>
                    </view>
                    <view class="contact-info">
                        <text>{{ merchantContact || '未设置' }}</text>
                    </view>
                    <button class="submit-btn" @click="submitRefundApplication">提交申请</button>
                </view>
            </u-popup>
        </view>

        <!------------------------ 换货逻辑 ------------------------>
        <!-- 选择退款原因 -->
        <view v-if="selectedAfterSaleType === 1">
            <u-popup ref="popup" :show="afterSalePopup2" :round="10" @close="closeAfterSalePopup2"
                :mask-close-able="false">
                <view class="cancel-reason-container">
                    <view class="title">选择换货原因</view>
                    <view class="reason-list">
                        <view v-for="(reason, index) in exchangeReasons" :key="index" class="reason-item"
                            @click="selectReason(index)">
                            <view :class="['radio', selectedReason === index ? 'active' : '']"></view>
                            <text>{{ reason }}</text>
                        </view>
                    </view>
                    <button class="confirm-btn" @click="confirmChange">下一步</button>
                </view>
            </u-popup>
        </view>
        <!-- 确认退款信息 -->
        <view v-if="selectedAfterSaleType === 1">
            <u-popup ref="popup" :show="afterSalePopup3" :round="10" @close="closeAfterSalePopup3"
                :mask-close-able="false">
                <view class="refund-info-container">
                    <view class="refund-title">申请退换</view>
                    <view class="refund-item">
                        <view class="refund-label">换货原因<text class="required">*</text></view>
                        <view class="refund-value" @click="openAfterSalePopup2('refundReason')">
                            {{ changeRefundReason || '请选择退换原因' }}
                            <text class="arrow-right"></text>
                        </view>
                    </view>
                    <view class="refund-item">
                        <view class="refund-label">换货商品<text class="required">*</text></view>
                        <view class="refund-value" @click="changeGood()">
                            {{ changeServiceType || '请选择需要换的商品' }}
                            <text class="arrow-right"></text>
                        </view>
                    </view>
                    <view class="text-wrapper_8">
                        <text class="text_41">高尚</text>
                        <text class="text_42">15901518415</text>
                    </view>
                    <view class="block_15">
                        <view class="address-view">
                            <text> {{ merchantAddress }} </text>
                            <view class="copy-icon" @click="copyRefundNo"></view>
                        </view>
                        <image src="http://localhost:8080/af_update_address.png" class="icon_2"></image>
                    </view>
                    <view class="hr"></view>
                    <view class="refund-item2">
                        <view class="refund-label">补充描述和凭证</view>
                        <textarea class="refund-description" placeholder="补充描述，有助于商家更好的处理售后问题"
                            v-model="refundDescription" maxlength="200"></textarea>
                        <u-upload :fileList="imgList" @afterRead="afterReadImg" @delete="deletePic" name="1" multiple
                            :maxCount="3">
                            <view class="imgCon">
                                <image
                                    src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_imageImg.png"
                                    mode="widthFix"></image>
                                上传凭证
                            </view>
                        </u-upload>
                    </view>
                    <button class="submit-btn" @click="submitRefundApplication">提交申请</button>
                </view>
            </u-popup>
        </view>

        <!-- 选择商品 -->
        <u-popup :show="showSize" round="20rpx" mode="bottom" @close="closeSize">
            <view class="popup-header">
                <h3 class="popup-header-h3">选择款式</h3>
                <view class="popup-header-view" @click="closeSize">取消</view>
            </view>
            <view class="itemSize_top">
                <image :src="changeImg" class="itemSize-img"></image>
                <view class="itemSize_info">
                    <view class="itemSize_name">{{ changeName }}</view>
                    <view class="itemSize_price">￥{{ changePrice }}/袋</view>
                </view>
            </view>
            <view class="itemSize" v-for="(item, index) in info.commodity_goods_info_list" :key="item.id"
                @click="changeGG(item, index)" :class="index == currentGGIndex ? 'itemSize_active' : ''">
                {{ item.goods_name }} {{ item.goods_spec }} / {{ item.goods_unit }}
            </view>
        </u-popup>
    </view>
</template>

<script>
import { upload, picUrl } from '../../../../../utils';

export default {
    name: 'AfterSalePopup',
    props: {
        afterSaleGoods: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            afterSalePopup: false,
            afterSalePopup2: false,
            afterSalePopup3: false,
            selectedAsGood: '',
            selectedAfterSaleType: 0, // 0:退货/退款, 1:换货
            selectedAfterSaleType2: 0, // 0:退货/退款, 1:退货
            selectedAsReason: 0,
            selectedReason: 0,//换货原因
            selectedServiceType: '',
            selectedRefundReason: '',
            changeRefundReason: '', // 换货原因回显
            changeServiceType: '', // 换货商品回显
            showSize: false,//选择款式弹窗
            changeImg: "",
            changeName: "",
            changePrice: "",

            refundAmount: 0,
            maxRefundAmount: 0,
            postage: 0,
            refundDescription: '',
            refundMethod: '自行寄回',
            merchantAddress: '衡水市路北街道中心北大街世纪名城41号楼',
            merchantContact: '高尚 18032753127',
            imgList: [],
            applyRefundReasons: [
                '商品质量问题',
                '商品与描述不符',
                '商品破损',
                '商品错发/漏发',
                '其他原因'
            ],
            cancelReasons: [
                '不想要了',
                '拍错了',
                '商品质量问题',
                '其他原因'
            ],
            exchangeReasons: [
                '不想要了，无理由换货',
                '商品信息拍错',
                '没用/少用优惠',
                '缺货',
                '其他'
            ],
        };
    },
    methods: {
        // 打开售后弹窗
        openAfterSalePopup() {
            this.$nextTick(() => {
                if (this.afterSaleGoods && this.afterSaleGoods.length > 0) {
                    this.selectedAsGood = this.afterSaleGoods[0].id;
                    this.afterSalePopup = true;
                }
            })
        },

        // 选择售后商品
        selectAsGood(item) {
            this.selectedAsGood = item.id;
        },

        // 关闭弹窗
        closeAfterSalePopup() {
            this.afterSalePopup = false;
        },

        // 关闭弹窗
        closeAfterSalePopup() {
            this.afterSalePopup = false;
        },

        closeAfterSalePopup2() {
            if (this.selectedReason !== null && this.selectedReason !== undefined) {
                this.changeRefundReason = this.exchangeReasons[this.selectedReason];
            }
            this.afterSalePopup2 = false;
        },

        closeAfterSalePopup3() {
            this.afterSalePopup3 = false;
        },

        // 选择售后类型
        selectAfterSaleType(index) {
            this.selectedAfterSaleType = index;
        },

        selectAfterSaleType2(index) {
            this.selectedAfterSaleType2 = index;
        },

        // 确认售后商品选择
        confirmAfterSaleCancel() {
            const afterSaleTypes = ['退货/退款', '换货'];
            const selectedType = afterSaleTypes[this.selectedAfterSaleType];
            console.log('售后商品 - 选中的售后类型:', selectedType);
            console.log('选中的售后商品:', this.selectedAsGood);

            this.afterSalePopup = false;
            this.afterSalePopup2 = true;
        },

        // 选择退款原因
        selectAsReason(index) {
            this.selectedAsReason = index;
        },

        // 换货原因
        selectReason(index) {
            this.selectedReason = index;
        },

        // 选择换货原因
        confirmChange() {
            let selectedReasonText = '';
            selectedReasonText = this.exchangeReasons[this.selectedReason];
            console.log('换货原因:', selectedReasonText);

            // 将选中的换货原因赋值给changeRefundReason变量以回显
            this.changeRefundReason = selectedReasonText;

            this.afterSalePopup2 = false;
            this.afterSalePopup3 = true;
        },

        // 关闭换货原因弹窗时保存选择
        closeAfterSalePopup2() {
            if (this.selectedReason !== null && this.selectedReason !== undefined) {
                this.changeRefundReason = this.exchangeReasons[this.selectedReason];
            }
            this.afterSalePopup2 = false;
        },

        // 确认退款原因选择
        confirmAfterSaleCancel2() {
            const afterSaleTypes = ['退货退款', '退货'];
            const selectedType = afterSaleTypes[this.selectedAfterSaleType2];
            console.log('选中的售后类型:', selectedType);

            let selectedReasonText = '';
            if (selectedType == '退货退款') {
                selectedReasonText = this.applyRefundReasons[this.selectedAsReason];
            } else {
                selectedReasonText = this.cancelReasons[this.selectedAsReason];
            }
            console.log('退款原因:', selectedReasonText);

            // 设置选中的服务类型和退款原因
            this.selectedServiceType = selectedType;
            this.selectedRefundReason = selectedReasonText;
            // 模拟退款金额数据
            this.refundAmount = 4704.00;
            this.maxRefundAmount = 53.80;
            this.postage = 0.00;

            this.selectAsReason(0);
            this.afterSalePopup2 = false;
            this.afterSalePopup3 = true;
        },

        // 打开选择服务类型或退款原因弹窗
        openAfterSalePopup2(type) {
            this.afterSalePopup3 = false;
            this.afterSalePopup2 = true;
        },

        // 选择换货商品
        changeGood() {
            this.afterSalePopup3 = false;
            this.showSize = true;
        },

        closeSize() {
            this.showSize = false;
        },

        // 切换规格
        changeGG(item, index) {
            console.log("🚀 ~ changeGG ~ item:", item);
            this.currentGG = item;
            this.currentGGIndex = index;
            if (this.currentGG.cart_count) {
                this.currentNum = this.currentGG.cart_count.count;
            } else {
                this.currentGG.cart_count = { count: 0 };
            }
            this.changeImg = item.commodity_pic[0]
            this.changeName = item.goods_alias
            this.changePrice = item.sales_price

            this.afterSalePopup3 = true;
            this.showSize = false;
        },

        // 上传图片
        afterReadImg(e) {
            e.file.forEach(item => {
                upload(item.url, res => {
                    this.imgList.push({ url: picUrl + res.data.path });
                    console.log('imgList:', this.imgList);
                });
            });
        },

        // 删除图片
        deletePic(e) {
            this.imgList.splice(e.index, 1);
        },

        // 修改退款金额
        modifyRefundAmount() {
            console.log('修改退款金额');
        },

        // 查看地址详情
        viewAddressDetails() {
            console.log('查看地址详情');
        },

        // 提交退款申请
        submitRefundApplication() {
            if (!this.selectedServiceType || !this.selectedRefundReason) {
                uni.showToast({
                    title: '请选择服务类型和退款原因',
                    icon: 'none'
                });
                return;
            }

            // 输出弹窗中的所有内容
            const refundInfo = {
                serviceType: this.selectedServiceType,
                refundReason: this.selectedRefundReason,
                refundAmount: this.refundAmount,
                maxRefundAmount: this.maxRefundAmount,
                postage: this.postage,
                refundDescription: this.refundDescription,
                refundMethod: this.refundMethod,
                merchantAddress: this.merchantAddress,
                merchantContact: this.merchantContact,
                imgList: this.imgList
            };
            console.log('提交退款申请:', refundInfo);

            this.afterSalePopup3 = false;
            // 触发父组件事件，传递退款信息
            this.$emit('refundSubmitted', refundInfo);
        }
    }
};
</script>

<style>
@import url('./index.css');
</style>