<template>
    <view class="container">
        <!-- 进度条 -->
        <view class="progress-container">
            <view class="progress-item">
                <text class="progress-text">商家处理</text>
            </view>
            <view class="progress-line"></view>
            <view class="progress-item">
                <text class="progress-text">寄回商品</text>
            </view>
            <view class="progress-line"></view>
            <view class="progress-item active">
                <text class="progress-text">退款结束</text>
            </view>
        </view>

        <view class="progress-container" v-if="false">
            <view class="progress-item">
                <text class="progress-text">商家处理</text>
            </view>
            <view class="progress-line"></view>
            <view class="progress-item active">
                <text class="progress-text">退款结束</text>
            </view>
        </view>

        <!-- 状态提示 -->
        <view class="status-tip">
            <text class="status-title">退款成功</text>
            <text class="status-desc">若您的问题未解决，可在有效期内再次申请售后</text>
        </view>

        <view class="hr"></view>

        <!-- 商品信息 -->
        <view class="goods-info">
            <view class="goods-item">
                <view class="asGoodTag tag-img"
                    v-if="currentAfterSale.commodity_order_item[0].is_support_same_day === 1">当日达</view>
                <image class="goods-image" :src="currentAfterSale.commodity_order_item[0].commodity_pic"></image>
                <view class="goods-details">
                    <text class="goods-name">
                        <text class="asGoodTag asGoodTag1"
                            v-if="currentAfterSale.commodity_order_item[0].is_support_same_day === 1">当日达</text>
                        {{ currentAfterSale.commodity_order_item[0].goods_name }}
                        <text class="refund-amount">退款：¥{{ currentAfterSale.refund_amount.toFixed(2) }}</text>
                    </text>
                    <text class="goods-desc">{{ currentAfterSale.commodity_order_item[0].goods_spec }}</text>
                    <text class="goods-price">
                        {{ '¥' + currentAfterSale.commodity_order_item[0].sales_price.toFixed(2) + '/个' }}
                        <text class="goods-count">X{{ currentAfterSale.after_sales_goods.split('@')[0] }}</text>
                    </text>
                </view>
            </view>
        </view>

        <!-- 退款信息 -->
        <view class="refund-info">
            <view class="info-item">
                <text class="info-label">服务类型</text>
                <text class="info-value">{{ getServiceTypeText(currentAfterSale.after_sales_type) }}</text>
                <text class="info-arrow"></text>
            </view>
            <view class="info-item">
                <text class="info-label">退款原因</text>
                <text class="info-value">{{ currentAfterSale.after_sales_reason }}</text>
                <text class="info-arrow"></text>
            </view>
            <view class="info-item">
                <text class="info-label">退款金额</text>
                <text class="info-value amount">{{ '¥' + currentAfterSale.refund_amount.toFixed(2) }}</text>
            </view>
            <view class="info-item">
                <text class="info-label">申请时间</text>
                <text class="info-value">{{ formatDate(currentAfterSale.create_time) }}</text>
            </view>
            <view class="info-item">
                <text class="info-label">退款编号</text>
                <text class="info-value">{{ currentAfterSale.after_sales_no }}</text>
                <text class="copy-icon" @click="copyRefundNo"></text>
            </view>
            <view class="info-item" v-if="false">
                <text class="info-label">退款完结</text>
                <text class="info-value">{{ formatDate(currentAfterSale.create_time) }}</text>
            </view>
        </view>

        <!-- 操作按钮 -->
        <view class="action-buttons">
            <button class="modify-btn" @click="shippingDetails">寄件详情</button>
            <button class="moneyGo-btn" @click="moneyGo">钱款去向</button>
        </view>

        <view class="action-buttons" v-if="false">
            <button class="cancel-btn" @click="cancelRefund">撤销申请</button>
            <button class="urge-btn" @click="modifyRefund">修改申请</button>
        </view>

        <view>
            <u-popup ref="popup" :show="moneyGoPopup" :round="10" @close="closeMoneyGoPopup" :mask-close-able="false"
                mode="bottom">
                <view class="money-path-popup-content">
                    <!-- 弹窗头部 -->
                    <view class="popup-header">
                        <text class="header-title">退款总额 ¥{{ currentAfterSale.refund_amount ?
                            currentAfterSale.refund_amount.toFixed(2) : '0.00' }}</text>
                        <text class="close-btn" @click="closeMoneyGoPopup">取消</text>
                    </view>

                    <!-- 退款方式 -->
                    <view class="refund-method">
                        <view class="method-item">
                            <view class="wechat-icon">
                                <image
                                    src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
                                    class="icon-image"></image>
                            </view>
                            <text class="method-text">退回微信</text>
                            <text class="method-amount">{{ currentAfterSale.refund_amount ? '¥' +
                                currentAfterSale.refund_amount.toFixed(2) : '¥0.0' }}</text>
                        </view>
                    </view>
                    <!-- 退款状态 -->
                    <view class="refund-status">
                        <view class="method-text2">微信</view>
                        <view class="status-item active">
                            <view class="status-dot"></view>
                            <view class="status-line"></view>
                            <view class="status-info">
                                <text class="status-text">到账成功</text>
                                <text class="status-desc">钱已退回至微信账户</text>
                            </view>
                        </view>
                        <view class="status-item active">
                            <view class="status-dot"></view>
                            <view class="status-info">
                                <text class="status-text">卖家退款</text>
                                <text class="status-desc">卖家已退款</text>
                            </view>
                        </view>
                    </view>
                </view>
            </u-popup>
        </view>
    </view>
</template>

<script>

import {
    isPhone,
    picUrl,
    request,
    upload,
    NavgateTo
} from '../../../utils';
import { apiArr } from "../../../api/afterSale";

export default {
    data() {
        return {
            currentAfterSale: {},
            pickerDefaultDate: new Date(),
            moneyGoPopup: false
        };
    },
    created() {
        // 初始化日期选择器默认值为当前申请时间
        this.pickerDefaultDate = new Date(this.currentAfterSale.create_time);
    },
    onLoad(options) {
        const item = JSON.parse(options?.item);
        console.log("🚀 ~ onLoad ~ item:", item)
        this.currentAfterSale = item;
    },
    methods: {
        getServiceTypeText(type) {
            return type === 1 ? '仅退款' : (type === 2 ? '退货退款' : '换货');
        },

        // 格式化日期
        formatDate(dateString) {
            if (!dateString) return '';
            const date = new Date(dateString);
            return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
        },

        // 复制商家地址
        copyAdress() {
            uni.setClipboardData({
                data: this.currentAfterSale.after_sales_no,
                success: () => {
                    uni.showToast({
                        title: '复制成功',
                        icon: 'success'
                    });
                },
                fail: () => {
                    uni.showToast({
                        title: '复制失败',
                        icon: 'none'
                    });
                }
            });
        },

        addOrderId() {
            NavgateTo(`../returnLogistics/index?item=${JSON.stringify(this.currentAfterSale)}`);
        },

        // 复制退款编号
        copyRefundNo() {
            uni.setClipboardData({
                data: this.currentAfterSale.after_sales_no,
                success: () => {
                    uni.showToast({
                        title: '复制成功',
                        icon: 'success'
                    });
                },
                fail: () => {
                    uni.showToast({
                        title: '复制失败',
                        icon: 'none'
                    });
                }
            });
        },

        // 撤销申请
        cancelRefund() {
            uni.showModal({
                title: "确定要撤销本次售后申请吗？",
                showCancel: true,
                cancelText: "暂不撤销",
                confirmText: "确认撤销",
                confirmColor: "#ff4d4f",
                success: (res) => {
                     if (res.confirm) {
                        const params = {
                            id: this.currentAfterSale.id,
                        }
                        request(apiArr.revokeApply, "POST", params).then((res) => {
                            uni.showToast({
                                title: '订单撤销成功',
                                icon: 'success'
                            });
                        });
                    }
                },
            });
        },

        // 修改申请
        modifyRefund() {
            NavgateTo(`../apply/index?item=${JSON.stringify(this.currentAfterSale)}`);
        },

        // 显示钱款去向弹窗
        moneyGo() {
            this.moneyGoPopup = true;
        },

        // 关闭钱款去向弹窗
        closeMoneyGoPopup() {
            this.moneyGoPopup = false;
        },
    }
};
</script>

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