<template>
    <view class="apply-container">
        <!-- 确认退款信息弹窗 -->
        <view class="refund-info-container">
            <view class="refund-item">
                <view class="refund-label">物流单号<text class="required">*</text></view>
                <input class="refund-value" v-model="selectedServiceType" placeholder="请填写物流单号" type="text">
            </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">联系电话</view>
                <view class="refund-value">
                    111111111
                </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>
        <button class="submit-btn" @click="submitRefundApplication">提交</button>

        <!-- 选择退款原因弹窗 -->
        <u-popup ref="popup2" :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="(company, index) in logisticsCompanies" :key="index" class="reason-item"
                        @click="selectLogisticsCompany(index)">
                        <view :class="['radio', selectedRefundReason === company ? 'active' : '']"></view>
                        <text>{{ company }}</text>
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

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

export default {
    data() {
        return {
            afterSalePopup2: false,
            selectedServiceType: '',
            selectedRefundReason: '',
            refundDescription: '',
            imgList: [],
            logisticsCompanies: [
                '顺丰速运',
                '京东物流',
                '中通快递',
                '圆通速递',
                '申通快递',
                '韵达快递',
                '百世快递',
                '邮政EMS'
            ]
        };
    },
    onLoad(options) {
        // 可以在这里添加物流相关的初始化逻辑
    },
    methods: {
        // 关闭弹窗
        closeAfterSalePopup2() {
            this.afterSalePopup2 = false;
        },

        // 打开选择物流公司弹窗
        openAfterSalePopup2(type) {
            this.afterSalePopup2 = true;
        },

        // 上传图片
        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);
        },

        // 选择物流公司
        selectLogisticsCompany(index) {
            this.selectedRefundReason = this.logisticsCompanies[index];
            this.afterSalePopup2 = false;
        },

        // 提交物流信息
        submitRefundApplication() {
            if (!this.selectedServiceType || !this.selectedRefundReason) {
                uni.showToast({
                    title: '请完善物流信息',
                    icon: 'none'
                });
                return;
            }

            // 输出提交的物流信息
            const logisticsInfo = {
                serviceType: this.selectedServiceType,
                refundReason: this.selectedRefundReason,
                refundDescription: this.refundDescription,
                imgList: this.imgList
            };
            console.log('提交物流信息:', logisticsInfo);

            // 这里可以添加提交后的处理逻辑
            uni.showToast({
                title: '物流信息提交成功',
                icon: 'success'
            });
        }
    }
};
</script>

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