<template>
    <view class="container">
        <!-- 顶部切换栏 -->
        <view class="tab-bar">
            <view :class="{ active: activeTab === 'delivery' }" class="tab-item" @click="switchTab('delivery')">配送
            </view>
            <view :class="{ active: activeTab === 'pickup' }" class="tab-item" @click="switchTab('pickup')">自提</view>

        </view>
        <!-- 分隔线 -->
        <view class="divider"></view>
        <!-- 配送/自提信息 -->
        <view class="info-section">
            <view v-if="activeTab === 'delivery'" class="address-section">
                <view class="section-title">收货地址</view>
                <view class="address-info" @click="editAddress">
                    <view class="address-main">
                        <view class="address-name-phone">
                            <text class="name">李佳</text>
                            <text class="phone">15901518415</text>
                        </view>
                        <view class="address-detail">北京北京市朝阳区珠江绿洲文化广场</view>
                    </view>
                    <view class="address-arrow"><u-icon name="arrow-right" size="25"></u-icon></view>
                </view>
            </view>
            <view v-else class="address-section">
                <view class="section-title">自提点</view>
                <view class="address-info" @click="editAddress">
                    <view class="address-main">
                        <view class="address-name-phone">
                            <text class="name">李佳</text>
                            <text class="phone">15901518415</text>
                        </view>
                        <view class="address-detail">北京北京市朝阳区珠江绿洲文化广场</view>
                    </view>
                    <view class="address-arrow"><u-icon name="arrow-right" size="25"></u-icon></view>
                </view>
            </view>
        </view>
        <!-- 分隔线 -->
        <view class="divider"></view>
        <!-- 商品信息 -->
        <view class="goods-item">
            <view class="goods-image">
                <image src="/static/logo.png" mode="aspectFill"></image>
            </view>
            <view class="goods-info">
                <view class="goods-name">泰国金枕榴莲泰国金枕榴莲</view>
                <view class="goods-desc"> 心形榴莲 软糯香甜</view>
                <view class="price-container">
                    <view class="group-price">
                        <view class="group-price1">团购价</view>
                        <view class="group-price2">￥125.9</view>
                    </view>
                    <view class="quantity-control">
                        <view class="decrease-btn" @tap.stop="decreaseQuantity(index)">-</view>
                        <view class="quantity">{{ quantity }}</view>
                        <view class="increase-btn" @tap.stop="increaseQuantity(index)">+</view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 运费 -->
        <view class="fee-section">
            <view class="fee-name">运费</view>
            <view class="fee-value">￥10</view>
        </view>
        <!-- 总金额 -->
        <view class="total-section">
            <view class="total-name">总金额</view>
            <view class="total-value">￥200</view>
        </view>
        <!-- 支付方式 -->
        <view class="payment-section">
            <view class="payment-item" @click="selectPayment('wechat')">
                <view class="payment-icon">
                    <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
                        mode="aspectFit"></image>
                </view>
                <view class="payment-content">
                    <view class="payment-name">微信支付</view>
                    <view class="payment-desc"><text
                            style="color: #f03d0e;margin-right: 15rpx;">可用优惠券</text>单笔支付限额:¥10000.00</view>
                </view>
                <view class="payment-select" v-if="selectedPayment === 'wechat'">
                    <image
                        src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png"
                        mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
                </view>
                <view class="payment-select" v-else>
                    <image
                        src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png"
                        mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
                </view>
            </view>
        </view>
        <!-- 立即支付按钮 -->
        <view class="pay-button" @click="submitPayment">立即支付 ¥4500.00</view>

        <!-- 弹窗 - 支付成功 -->
        <view class="shadow" @click="changeShadow" v-if="boxshadow1">
            <view class="shadowBox2">
                <view class="shadowBox_img">
                    <view class="boxshadow_tit">
                        <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/af_√.png"
                            class="boxshadow_tit_img">
                        </image>
                        已支付成功
                    </view>
                    <view class="boxshadow_img">
                        <view style="margin-bottom: 15rpx;">0230 7559 1358</view>
                        <image
                            src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png">
                        </image>
                    </view>
                    <view class="boxbottom">
                        <view class="line1"></view>
                        赶快邀请好友来下单吧
                        <view class="line2"></view>
                    </view>
                    <view @click.stop="changeShadow">
                        <view class="shadowBox1">
                            <view class="shadowBox1Item" @click="shareFriend">
                                <image
                                    src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_WX.png"
                                    mode="aspectFill"></image>
                                微信好友
                            </view>
                            <view class="shadowBox1Item" @click="shareFriend">
                                <image
                                    src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_WX.png"
                                    mode="aspectFill"></image>
                                小程序链接
                            </view>
                            <view class="shadowBox1Item" @click="openSave">
                                <image
                                    src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_saveImg.png"
                                    mode="aspectFill"></image>
                                二维码海报
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 海报 -->
        <view class="shadow" @click="changeShadow2" v-if="boxshadow2">
            <view class="shadowBox2">
                <view class="shadowBox_img">
                    <view class="boxshadow_tit">今日商品推荐</view>
                    <view class="boxshadow_img">
                        <image
                            src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png">
                        </image>
                    </view>
                    <view class="shadowBoxInfo">
                        <view class="shadowboxInfo_left">二维码</view>
                        <view class="shadowboxInfo_right">
                            <view class="shadowboxInfo_right_1">正鲜生</view>
                            <view class="shadowboxInfo_right_2">
                                长按识别小程序 <br />
                                数量有限马上抢购
                            </view>
                        </view>
                    </view>
                </view>
                <view class="shadowBox_btn" @click.stop="saveImg">保存海报</view>
            </view>
        </view>
    </view>
</template>
<script>
import { picUrl, menuButtonInfo, request, NavgateTo } from "../../../utils";
export default {
    data() {
        return {
            activeTab: 'delivery', // 默认选中配送
            quantity: 1, // 商品数量
            selectedPayment: 'wechat',
            boxshadow1: false,
            boxshadow2: false,
        };
    },
    methods: {
        switchTab(tab) {
            this.activeTab = tab;
        },
        editAddress() {
            if (this.activeTab === 'delivery') {
                NavgateTo('../addAddress/index');
            } else {
                NavgateTo('../ztLocation/index');
            }
        },
        decreaseQuantity() {
            if (this.quantity > 1) {
                this.quantity--;
            }
        },
        increaseQuantity() {
            this.quantity++;
        },
        selectPayment(payment) {
            console.log("🚀 ~ selectPayment ~ payment:", payment)
            this.selectedPayment = payment;
        },
        submitPayment() {
            console.log('提交支付，金额：￥4500.00');
            this.boxshadow1 = true;
        },
        openSave() {
            this.boxshadow1 = false;
            this.boxshadow2 = true;
        },
        changeShadow() {
            this.boxshadow1 = false;
        },
        changeShadow2() {
            this.boxshadow2 = false;
        },
        // 保存海报
        saveImg() {
            this.boxshadow2 = false;
            // 微信小程序保存图片
            uni.downloadFile({
                url: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share_img.png",
                success: (res) => {
                    if (res.statusCode === 200) {
                        uni.saveImageToPhotosAlbum({
                            filePath: res.tempFilePath,
                            success: (res) => {
                                uni.showToast({
                                    title: "保存成功",
                                    icon: "success",
                                    duration: 2000,
                                });
                            },
                            fail: (err) => {
                                console.log("保存失败", err);
                            },
                        });
                    }
                },
                fail: (err) => {
                    console.log("下载失败", err);
                },
            });
        },
    }
};
</script>
<style>
@import url('./index.css');
</style>