<template>
    <view class="container">
        <nav-bar bgColor="#F5F5F5" :isBack="true" title="编辑账单详情" isRightButton @right-click="saveData"></nav-bar>

        <view class="tabs">
            <view class="tab-item" :class="{ active: payData.styleType == 'style1' }"
                @click="payData.styleType = 'style1'">样式1
            </view>
            <view class="tab-item" :class="{ active: payData.styleType == 'style2' }"
                @click="payData.styleType = 'style2'">样式2
            </view>
            <view class="tab-item" :class="{ active: payData.styleType == 'style3' }"
                @click="payData.styleType = 'style3'">样式3
            </view>
        </view>

        <view class="main-content">
            <!-- 基础信息卡片 -->
            <view class="card basic-card">
                <view class="amount-wrap">
                    <text class="symbol">¥</text>
                    <auto-width-input class="alipay-font" type="digit" v-model="payData.money" fontSize="88rpx"
                        fontWeight="500" color="#1A1A1A" :showEdit="true"></auto-width-input>
                </view>

                <view class="info-row">
                    <view class="info-item">
                        <auto-width-input v-model="payData.user" fontSize="28rpx" color="#333"
                            :showEdit="true"></auto-width-input>
                    </view>
                    <view class="info-item" style="justify-content: flex-end;">
                        <text class="value-symbol">¥ </text>
                        <auto-width-input type="digit" v-model="payData.money" fontSize="28rpx" color="#333"
                            :showEdit="true"></auto-width-input>
                    </view>
                </view>

                <view class="info-row" style="margin-top: 16rpx;">
                    <view class="info-item">
                        <text class="label">付款方式</text>
                    </view>
                    <view class="info-item" style="justify-content: flex-end;">
                        <auto-width-input v-model="payData.payMethod" fontSize="28rpx" color="#333"
                            :showEdit="true"></auto-width-input>
                    </view>
                </view>
            </view>

            <!-- 样式1 -->
            <template v-if="payData.styleType == 'style1'">
                <view class="card list-card">
                    <view class="card-title" style="display: flex; justify-content: space-between;">
                        支付有礼
                        <image style="width: 24px;height: 24px;" src="/static/image/common/random-dice.png"
                            mode="widthFix" @click="randomCoupon('style1')"></image>
                    </view>
                    <!-- 券1 -->
                    <view class="list-item" v-if="payData.style1.couponlist && payData.style1.couponlist[0]">
                        <view class="left-icon-wrap" @click="chooseImage('style1_coupon_0')">
                            <image v-if="payData.style1.couponlist[0].imgUrl" class="item-img"
                                :src="payData.style1.couponlist[0].imgUrl" mode="aspectFill"></image>
                            <image v-else class="edit-icon-center" src="/static/image/common/edit.png"></image>
                        </view>
                        <view class="item-content">
                            <view class="row-flex" style="flex-wrap: wrap;">
                                <view class="row-flex" style="margin-right: 12rpx;"
                                    v-if="payData.style1.couponlist[0].price !== undefined">
                                    <auto-width-input v-model="payData.style1.couponlist[0].price" fontSize="28rpx"
                                        color="#E6372D" fontWeight="500"></auto-width-input>
                                    <text class="main-title" style="color: #E6372D; width: auto;">元</text>
                                    <image class="edit-icon" src="/static/image/common/edit.png"
                                        style="margin-left: 8rpx; width: 24rpx; height: 24rpx;"></image>
                                </view>
                                <view class="row-flex">
                                    <auto-width-input v-model="payData.style1.couponlist[0].title" fontSize="28rpx"
                                        color="#333" fontWeight="500" :showEdit="true"></auto-width-input>
                                </view>
                            </view>
                            <view class="row-flex mt">
                                <view class="tag-red" style="margin-right: 12rpx; display: flex; align-items: center;"
                                    v-if="payData.style1.couponlist[0].tag !== undefined">
                                    <auto-width-input v-model="payData.style1.couponlist[0].tag" fontSize="20rpx"
                                        color="#E6372D" :showEdit="true"></auto-width-input>
                                </view>
                                <view class="row-flex" v-if="payData.style1.couponlist[0].desc !== undefined">
                                    <auto-width-input v-model="payData.style1.couponlist[0].desc" fontSize="24rpx"
                                        color="#999" :showEdit="true"></auto-width-input>
                                </view>
                            </view>
                        </view>
                        <view class="right-btn btn-get"
                            style="display: flex; align-items: center; justify-content: center;"
                            @click="toggleBtnText(payData.style1.couponlist[0])">
                            <text style="font-size: 24rpx; color: #fff; font-weight: 500;">{{
                                payData.style1.couponlist[0].butText || '免费领' }}</text>
                        </view>
                    </view>
                </view>

                <!-- 飞猪广告 -->
                <view class="card fliggy-card">
                    <view class="banner-wrap" @click="toggleBanner">
                        <image class="banner-img"
                            :src="payData.style1.bannerUrl || '/static/image/balance/transfer/bottom-banner-1.png'"
                            mode="widthFix"></image>
                        <view class="guanggao-tag">
                            <image style="width: 70rpx;height: 32rpx;"
                                src="/static/image/balance/transfer/guanggao.png"></image>
                        </view>
                        <view class="yaoyiyao-container">
                            <view class="yaoyiyao-box">
                                <image class="img" src="/static/image/balance/transfer/yaoyiyao.png" mode="widthFix">
                                </image>
                                <text class="text">摇动或点击查看详情</text>
                            </view>
                        </view>
                    </view>
                    <view class="fliggy-footer"
                        v-if="payData.style1.bannerUrl == '/static/image/balance/transfer/bottom-banner-1.png'">
                        <view class="logo-box">
                            <image class="logo" src="/static/image/balance/transfer/feizhu.png" mode="aspectFit">
                            </image>
                        </view>
                        <view class="banner-info">
                            <view class="text-content">
                                <text class="b-title">飞猪旅行</text>
                                <text class="b-desc">飞猪出行 超多折扣</text>
                            </view>
                            <view class="b-btn">领优惠</view>
                        </view>
                    </view>
                    <view class="fliggy-footer"
                        v-if="payData.style1.bannerUrl == '/static/image/balance/transfer/bottom-banner-2.png'">
                        <view class="logo-box">
                            <image class="logo" src="/static/image/balance/transfer/taobaoshangou.png" mode="aspectFit">
                            </image>
                        </view>
                        <view class="banner-info" style="padding: 0;">
                            <view class="text-content">
                                <text class="b-title">淘宝闪购</text>
                                <text class="b-desc">每天领大额外面红包</text>
                            </view>
                            <view class="b-btn">去领取</view>
                        </view>
                    </view>
                </view>
            </template>

            <!-- 样式2 -->
            <template v-if="payData.styleType == 'style2'">
                <view class="card list-card">
                    <view class="card-title" style="display: flex; justify-content: space-between;">支付有礼
                        <image style="width: 24px;height: 24px;" src="/static/image/common/random-dice.png"
                            mode="widthFix" @click="randomCoupon('style2')"></image>
                    </view>

                    <view class="list-item" v-for="(item, index) in payData.style2.couponlist" :key="index">
                        <view class="left-icon-wrap" @click="chooseImage('style2_coupon_' + index)">
                            <image v-if="item.imgUrl" class="item-img" :src="item.imgUrl" mode="aspectFill"></image>
                            <image v-else class="edit-icon-center" src="/static/image/common/edit.png"></image>
                        </view>
                        <view class="item-content">
                            <view class="row-flex" style="flex-wrap: wrap;">
                                <view class="row-flex" style="margin-right: 12rpx;" v-if="item.price !== undefined">
                                    <auto-width-input v-model="item.price" fontSize="28rpx"
                                        :color="item.price.includes('g') ? '#333' : '#E6372D'"
                                        fontWeight="500"></auto-width-input>
                                    <text class="main-title"
                                        :style="{ color: item.price.includes('g') ? '#333' : '#E6372D', width: 'auto' }">{{
                                            item.price.includes('g') ? '' : '元' }}</text>
                                    <image class="edit-icon" src="/static/image/common/edit.png"
                                        style="margin-left: 8rpx; width: 24rpx; height: 24rpx;"></image>
                                </view>
                                <view class="row-flex">
                                    <auto-width-input v-model="item.title" fontSize="28rpx" color="#333"
                                        fontWeight="500" :showEdit="true"></auto-width-input>
                                </view>
                            </view>
                            <view class="row-flex mt">
                                <view class="tag-red" :class="{ 'tag-orange': item.tag == '芭芭农场' }"
                                    style="margin-right: 12rpx; display: flex; align-items: center;"
                                    v-if="item.tag !== undefined">
                                    <auto-width-input v-model="item.tag" fontSize="20rpx"
                                        :color="item.tag == '芭芭农场' ? '#EF673C' : '#E6372D'"
                                        :showEdit="true"></auto-width-input>
                                </view>
                                <view class="row-flex" v-if="item.desc !== undefined">
                                    <auto-width-input v-model="item.desc" fontSize="24rpx" color="#999"
                                        :showEdit="true"></auto-width-input>
                                </view>
                            </view>
                        </view>
                        <view class="right-btn btn-get" :class="{ 'btn-look': item.butText == '去看看' }"
                            style="display: flex; align-items: center; justify-content: center;"
                            @click="toggleBtnText(item)">
                            <text style="font-size: 24rpx; color: #fff; font-weight: 500;">{{ item.butText || '免费领'
                            }}</text>
                        </view>
                    </view>
                </view>
            </template>

            <!-- 样式3 -->
            <template v-if="payData.styleType == 'style3'">
                <view class="card list-card" style="padding-bottom: 24rpx;">
                    <view class="flex-between" style="margin-bottom: 24rpx;">
                        <text class="card-title" style="margin-bottom: 0;">碰一下立减</text>
                        <view class="row-flex">
                            <auto-width-input v-model="payData.style3.bannerTime" fontSize="24rpx"
                                color="#666"></auto-width-input>
                            <text class="time-text" style="width: auto;">后过期</text>
                            <image class="edit-icon" src="/static/image/common/edit.png"
                                style="margin-left: 8rpx; width: 24rpx; height: 24rpx;"></image>
                        </view>
                    </view>
                    <view class="banner-box">
                        <text class="banner-time">{{ payData.style3.bannerTime }}后过期</text>
                        <image src="/static/image/balance/pay-successful/pengyipengbanner.png"
                            style="width: 100%; border-radius: 12rpx; display: block;" mode="widthFix"></image>
                    </view>
                </view>
                <view class="card-title" style="display: flex; justify-content: flex-end;padding: 0 16px;">
                    <image style="width: 24px;height: 24px;" src="/static/image/common/random-dice.png" mode="widthFix"
                        @click="randomCoupon('style3')">
                    </image>
                </view>

                <view class="card list-card" style="margin-top: 24rpx;">
                    <view class="list-item" v-for="(item, index) in payData.style3.couponlist" :key="index">
                        <view class="left-icon-wrap" @click="chooseImage('style3_coupon_' + index)">
                            <image v-if="item.imgUrl" class="item-img" :src="item.imgUrl" mode="aspectFill"></image>
                            <image v-else class="edit-icon-center" src="/static/image/common/edit.png"></image>
                        </view>
                        <view class="item-content" style="flex: 1;">
                            <view class="row-flex">
                                <auto-width-input v-model="item.title" fontSize="28rpx" color="#333" fontWeight="500"
                                    :showEdit="true"></auto-width-input>
                            </view>
                            <view class="row-flex mt">
                                <view class="tag-red" style="margin-right: 12rpx; display: flex; align-items: center;"
                                    v-if="item.tag !== undefined">
                                    <auto-width-input v-model="item.tag" fontSize="20rpx" color="#E6372D"
                                        :showEdit="true"></auto-width-input>
                                </view>
                                <view class="row-flex" v-if="item.desc !== undefined">
                                    <auto-width-input v-model="item.desc" fontSize="24rpx" color="#999"
                                        :showEdit="true"></auto-width-input>
                                </view>
                            </view>
                        </view>
                        <view class="row-flex" style="align-items: baseline;" v-if="item.price !== undefined">
                            <auto-width-input v-model="item.price" fontSize="40rpx" color="#E6372D" fontWeight="500"
                                :showEdit="true"></auto-width-input>
                        </view>
                    </view>
                </view>
            </template>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { defaultData, randomData } from './data.json';
import { util } from '@/utils/common.js';
import autoWidthInput from '@/components/common/auto-width-input.vue';

const payData = ref(JSON.parse(JSON.stringify(defaultData)));

const PAY_STORAGE_KEY = 'alipay_pay_successful_data';

const randomCoupon = (styleName) => {
    // #ifdef APP-PLUS
    const oldList = payData.value[styleName].couponlist || [];
    oldList.forEach(item => {
        if (item.imgUrl && !item.imgUrl.startsWith('/static') && !item.imgUrl.startsWith('http')) {
            uni.removeSavedFile({ filePath: item.imgUrl });
        }
    });
    // #endif

    const count = payData.value[styleName].couponlist.length;
    const shuffled = [...randomData].sort(() => 0.5 - Math.random());
    const selected = shuffled.slice(0, count);
    payData.value[styleName].couponlist = JSON.parse(JSON.stringify(selected));
};
const loadStorageData = () => {
    const savedData = uni.getStorageSync(PAY_STORAGE_KEY);
    if (savedData) {
        payData.value = Object.assign({}, payData.value, savedData);
    }
};

onLoad(() => {
    loadStorageData();
});

const saveData = () => {
    uni.setStorageSync(PAY_STORAGE_KEY, payData.value);
    uni.navigateBack();
};

const chooseImage = (type) => {
    uni.chooseImage({
        count: 1,
        success: (res) => {
            const tempPath = res.tempFilePaths[0];

            let oldPath = '';
            if (type === 'style1_coupon_0') {
                oldPath = payData.value.style1.couponlist[0].imgUrl;
            } else if (type.startsWith('style2_coupon_')) {
                const idx = parseInt(type.split('_')[2]);
                oldPath = payData.value.style2.couponlist[idx].imgUrl;
            } else if (type.startsWith('style3_coupon_')) {
                const idx = parseInt(type.split('_')[2]);
                oldPath = payData.value.style3.couponlist[idx].imgUrl;
            }

            const updateImgUrl = (path) => {
                if (type === 'style1_coupon_0') {
                    payData.value.style1.couponlist[0].imgUrl = path;
                } else if (type.startsWith('style2_coupon_')) {
                    const idx = parseInt(type.split('_')[2]);
                    payData.value.style2.couponlist[idx].imgUrl = path;
                } else if (type.startsWith('style3_coupon_')) {
                    const idx = parseInt(type.split('_')[2]);
                    payData.value.style3.couponlist[idx].imgUrl = path;
                }
            };

            // #ifdef APP-PLUS
            if (oldPath && !oldPath.startsWith('/static') && !oldPath.startsWith('http')) {
                // 尝试删除旧的本地文件，避免存储空间堆积
                uni.removeSavedFile({ filePath: oldPath });
            }
            uni.saveFile({
                tempFilePath: tempPath,
                success: (saveRes) => {
                    updateImgUrl(saveRes.savedFilePath);
                }
            });
            // #endif

            // #ifndef APP-PLUS
            updateImgUrl(tempPath);
            // #endif
        }
    });
};

const toggleBtnText = (item) => {
    const textList = ['免费领', '去看看', '去领取'];
    const currentIndex = textList.indexOf(item.butText);
    if (currentIndex > -1) {
        item.butText = textList[(currentIndex + 1) % textList.length];
    } else {
        item.butText = '免费领';
    }
};

const toggleBanner = () => {
    const current = payData.value.style1.bannerUrl || '/static/image/balance/transfer/bottom-banner-1.png';
    if (current.includes('bottom-banner-1.png')) {
        payData.value.style1.bannerUrl = '/static/image/balance/transfer/bottom-banner-2.png';
    } else {
        payData.value.style1.bannerUrl = '/static/image/balance/transfer/bottom-banner-1.png';
    }
};
</script>

<style lang="less" scoped>
@import "@/common/main.css";

.container {
    min-height: 100vh;
    background-color: #F5F5F5;
    padding-bottom: 60rpx;
}

.confirm-btn {
    background-color: #3884FD;
    color: #fff;
    font-size: 26rpx;
    padding: 10rpx 32rpx;
    border-radius: 30rpx;
}

.tabs {
    display: flex;
    justify-content: center;
    gap: 20rpx;
    margin: 24rpx 0;
}

.tab-item {
    padding: 12rpx 40rpx;
    background-color: #fff;
    color: #333;
    font-size: 28rpx;
    border-radius: 8rpx;
    border: 1px solid #fff;
}

.tab-item.active {
    color: #3884FD;
    border-color: #3884FD;
}

.main-content {
    padding: 0 0;
}

.card {
    background: #fff;
    border-radius: 16rpx;
    margin: 24rpx;
    padding: 32rpx;
}

.basic-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.amount-wrap {
    display: flex;
    align-items: baseline;
    justify-content: center;
    color: #1A1A1A;
    margin-top: 10rpx;
    margin-bottom: 50rpx;

    .symbol {
        font-size: 60rpx;
        margin-right: 8rpx;
    }
}

.info-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-item {
    display: flex;
    align-items: center;

    .label {
        font-size: 28rpx;
        color: #333;
        width: 200rpx;
    }

    .value-symbol {
        font-size: 28rpx;
        color: #333;
    }
}

.edit-icon {
    width: 24rpx;
    height: 24rpx;
    margin-left: 10rpx;
}

.edit-icon-center {
    width: 28rpx;
    height: 28rpx;
}

.item-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.left-icon-wrap {
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
    background-color: #F5F5F5;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20rpx;
}

.list-card {
    .card-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #1A1A1A;
        margin-bottom: 32rpx;
    }

    .list-item {
        display: flex;
        align-items: center;
        margin-bottom: 40rpx;

        &:last-child {
            margin-bottom: 0;
        }
    }
}

.item-content {
    flex: 1;
}

.row-flex {
    display: flex;
    align-items: center;
}

.mt {
    margin-top: 8rpx;
}

.main-title {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
}

.sub-title {
    font-size: 24rpx;
    color: #999;
}

.tag-red {
    font-size: 20rpx;
    color: #E6372D;
    background: #FFF1F0;
    padding: 4rpx 10rpx;
    border-radius: 6rpx;
}

.tag-orange {
    color: #EF673C;
    background: #FFF2F1;
}

.right-btn {
    padding: 10rpx 28rpx;
    border-radius: 26rpx;
    font-size: 24rpx;
    font-weight: 500;
}

.btn-get {
    background-color: #E6372D;
    color: #fff;
}

.btn-look {
    background-color: #E6372D;
    color: #fff;
}

.fliggy-card {
    padding: 0;
    overflow: hidden;

    .banner-wrap {
        position: relative;

        .banner-img {
            width: 100%;
            display: block;
        }

        .guanggao-tag {
            position: absolute;
            top: 16rpx;
            right: 16rpx;
        }

        .yaoyiyao-container {
            position: absolute;
            bottom: 20rpx;
            width: 100%;
            display: flex;
            justify-content: center;

            .yaoyiyao-box {
                background: rgba(0, 0, 0, 0.4);
                padding: 10rpx 24rpx;
                border-radius: 30rpx;
                display: flex;
                align-items: center;

                .img {
                    width: 24rpx;
                    margin-right: 10rpx;
                }

                .text {
                    color: #fff;
                    font-size: 24rpx;
                }
            }
        }
    }

    .fliggy-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24rpx;

        .logo-box {
            width: 76rpx;
            height: 76rpx;
            margin-right: 20rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #fff;
            border-radius: 50%;

            .logo {
                width: 100%;
                height: 100%;
            }
        }

        .banner-info {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .text-content {
                display: flex;
                flex-direction: column;

                .b-title {
                    font-size: 28rpx;
                    color: #333;
                    font-weight: bold;
                }

                .b-desc {
                    font-size: 24rpx;
                    color: #999;
                    margin-top: 6rpx;
                }
            }

            .b-btn {
                background-color: #E6372D;
                color: #fff;
                padding: 10rpx 28rpx;
                border-radius: 26rpx;
                font-size: 24rpx;
            }
        }
    }
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.time-text {
    font-size: 24rpx;
    color: #666;
}

.banner-box {
    position: relative;
    width: 100%;

    .banner-time {
        position: absolute;
        z-index: 10;
        left: 170rpx;
        top: 68rpx;
        font-size: 20rpx;
        color: #C70B0C;
    }
}
</style>