<template>
    <view class="main">
        <!-- 顶部用户积分信息卡片 -->
        <view class="pointsHeader">
            <view class="headerContent">
                <view class="pointsInfo">
                    <view class="pointsLabel">我的ETC积分</view>
                    <view class="pointsValue">{{ userPoints || 0 }}</view>
                </view>
            </view>
        </view>

        <!-- 积分兑换计算器 -->
        <view class="exchangeBox">
            <view class="boxTitle">积分兑换</view>

            <view class="exchangeContent">
                <!-- ETC积分输入 -->
                <view class="inputBox">
                    <view class="inputLabel">ETC积分</view>
                    <input class="inputField" type="digit" v-model="etcPoints" placeholder="请输入兑换积分"
                        @input="handleCalculate" />
                </view>

                <!-- 兑换比例显示 -->
                <view class="exchangeRate">
                    <view class="rateText">兑换比例 {{ exchangeRate }}:1</view>
                </view>

                <!-- 彩云驿积分显示 -->
                <view class="resultBox">
                    <view class="resultLabel">彩云驿积分</view>
                    <view class="resultValue">{{ platformPoints }}</view>
                </view>
            </view>

            <!-- 兑换按钮 -->
            <view class="exchangeBtn" @click="handleExchange">
                立即兑换
            </view>
        </view>

        <!-- 兑换规则 -->
        <view class="rulesBox">
            <view class="boxTitle">
                <text>兑换规则</text>
            </view>

            <view class="rulesList">
                <view class="ruleItem" v-for="(rule, index) in rules" :key="index">
                    <view class="ruleDot"></view>
                    <text class="ruleText">{{ rule }}</text>
                </view>
            </view>
        </view>

        <!-- 积分商品列表 -->
        <view class="productsBox">
            <view class="boxTitle">
                <text>积分商品</text>
                <view class="moreBtn" @click="handleGoProductList">
                    <text class="moreText">查看更多</text>
                    <image class="moreIcon" src="https://eshangtech.com/caiyunyiImg/moreIcon.png" mode="aspectFit" />
                </view>
            </view>

            <view class="productsList">
                <view class="productItem" v-for="(product, index) in productList" :key="index"
                    @click="handleGoProductDetail(product)">
                    <image class="productImg" :src="product.image" mode="aspectFill" />
                    <view class="productInfo">
                        <view class="productName">{{ product.name }}</view>
                        <view class="productPoints">
                            <text class="pointsNum">{{ product.points }}</text>
                            <text class="pointsUnit">积分</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapGetters } from "vuex";

export default {
    data() {
        return {
            userPoints: 0, // 用户当前ETC积分
            etcPoints: '', // 用户输入的ETC积分
            platformPoints: 0, // 计算后的彩云驿积分
            exchangeRate: 1, // 兑换比例 1:1

            // 兑换规则
            rules: [
                '1个ETC积分可兑换1个彩云驿积分',
                '兑换后不可撤销,请谨慎操作',
            ],

            // 积分商品列表(示例数据)
            productList: [
                {
                    id: 1,
                    name: '10元优惠券',
                    points: 100,
                    image: 'https://eshangtech.com/caiyunyiImg/product1.png'
                },
                {
                    id: 2,
                    name: '20元优惠券',
                    points: 200,
                    image: 'https://eshangtech.com/caiyunyiImg/product2.png'
                },
                {
                    id: 3,
                    name: '50元优惠券',
                    points: 500,
                    image: 'https://eshangtech.com/caiyunyiImg/product3.png'
                },
                {
                    id: 4,
                    name: '100元优惠券',
                    points: 1000,
                    image: 'https://eshangtech.com/caiyunyiImg/product4.png'
                }
            ]
        }
    },

    computed: {
        ...mapGetters({
            user: "user",
        }),
    },

    onLoad() {
        this.getUserPoints();
    },

    onShow() {
    },
    methods: {
        // 获取用户积分
        async getUserPoints() {
            uni.showLoading({
                title: "获取积分中..."
            })
            const req = {
                mobile: this.user.MEMBERSHIP_MOBILEPHONE,
                outUserId: this.user.MEMBERSHIP_ID,
                type: "encryption"
            }
            const data = await this.$api.$post('/MemberApi/ThirdInterface/GetYTSLMemberPoint', req)
            console.log('datadatadatadata321', data);
            uni.hideLoading()
            if (data.Result_Code === 100) {
                let res = data.Result_Data
                console.log('resresresres', res);
                this.userPoints = res.balance
            } else {
                uni.showToast({
                    title: data.Result_Desc,
                    icon: 'none'
                });
            }
        },

        // 计算兑换积分
        handleCalculate(e) {
            const value = e.detail.value;
            if (value && !isNaN(value)) {
                // 按照兑换比例计算彩云驿积分
                this.platformPoints = Math.floor(Number(value) / this.exchangeRate);
            } else {
                this.platformPoints = 0;
            }
        },

        // 执行兑换
        handleExchange() {
            // if (!this.etcPoints || this.etcPoints <= 0) { uni.showToast({ title: '请输入兑换积分', icon: 'none' }); return; } if
            //     (Number(this.etcPoints) > this.userPoints) {
            //     uni.showToast({
            //         title: 'ETC积分不足',
            //         icon: 'none'
            //     });
            //     return;
            // }
            if (this.etcPoints > this.userPoints) {
                uni.showToast({
                    title: 'ETC积分不足',
                    icon: 'none'
                });
                return;
            }
            uni.showModal({
                title: '确认兑换',
                content: `确定使用${this.etcPoints}个ETC积分兑换${this.platformPoints}个彩云驿积分吗?`,
                success: (res) => {
                    if (res.confirm) {
                        this.doExchange();
                    }
                }
            });
        },

        // 调用兑换接口
        async doExchange() {
            uni.showLoading({ title: '兑换中...' });

            // 创建一个时间的订单
            // let time = this.$moment.now().format("YYYYMMDDHHmmss")
            let time = this.$moment.now().format("YYYY")
            console.log('platformPointsplatformPoints', this.platformPoints);


            const req = {
                orderno: `535001-${time}-${new Date().getTime()}`,
                outUserId: this.user.MEMBERSHIP_ID,
                changePoint: this.platformPoints,
                memo: "积分兑换",
                type: "encryption"
            }
            console.log('reqreq', JSON.parse(JSON.stringify(req)));

            const data = await this.$api.$post('/MemberApi/ThirdInterface/ChangeYTSLMemberPoint', req)
            console.log('datadatadatadata321', data);
            if (data.Result_Code === 100) {
                uni.showToast({
                    title: '兑换成功',
                    icon: 'none'
                });
                this.etcPoints = ''
                this.getUserPoints();
            } else {
                uni.showToast({
                    title: data.Result_Desc,
                    icon: 'none'
                });
            }
        },

        // 跳转到商品详情
        handleGoProductDetail(product) {
            uni.showToast({
                title: `查看${product.name}详情`,
                icon: 'none'
            });
            // TODO: 跳转到商品详情页
            // uni.navigateTo({
            // url: `/pages/productDetail/index?id=${product.id}`
            // });
        },

        // 查看更多商品
        handleGoProductList() {
            uni.showToast({
                title: '查看更多商品',
                icon: 'none'
            });
            // TODO: 跳转到商品列表页
            // uni.navigateTo({
            // url: '/pages/productList/index'
            // });
        }
    }
}
</script>

<style lang="less" scoped>
.main {
    width: 100vw;
    min-height: 100vh;
    background: #F7F8FA;
    padding-bottom: 40rpx;
    box-sizing: border-box;
}

/* 顶部积分卡片 */
.pointsHeader {
    width: 100%;
    background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
    padding: 60rpx 32rpx 80rpx;
    box-sizing: border-box;

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

        .pointsInfo {
            .pointsLabel {
                font-size: 28rpx;
                color: rgba(255, 255, 255, 0.8);
                margin-bottom: 16rpx;
            }

            .pointsValue {
                font-size: 72rpx;
                font-weight: bold;
                color: #FFFFFF;
                line-height: 1;
            }
        }

        .headerIcon {
            width: 120rpx;
            height: 120rpx;
            opacity: 0.3;
        }
    }
}

/* 积分兑换计算器 */
.exchangeBox {
    width: calc(100% - 64rpx);
    margin: -40rpx 32rpx 24rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    padding: 24rpx;
    box-sizing: border-box;

    .boxTitle {
        font-size: 28rpx;
        font-weight: 600;
        color: #222222;
        margin-bottom: 24rpx;
    }

    .exchangeContent {
        .inputBox {
            margin-bottom: 12rpx;

            .inputLabel {
                font-size: 28rpx;
                color: #666666;
                margin-bottom: 16rpx;
            }

            .inputField {
                width: 100%;
                height: 68rpx;
                background: #F7F8FA;
                border-radius: 12rpx;
                padding: 0 24rpx;
                font-size: 28rpx;
                color: #222222;
                box-sizing: border-box;
            }
        }

        .exchangeRate {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            margin-bottom: 12rpx;

            .exchangeIcon {
                width: 48rpx;
                height: 48rpx;
                margin-right: 12rpx;
            }

            .rateText {
                font-size: 24rpx;
                color: #667EEA;
                font-weight: 500;
            }
        }

        .resultBox {
            .resultLabel {
                font-size: 28rpx;
                color: #666666;
                margin-bottom: 16rpx;
            }

            .resultValue {
                width: 100%;
                height: 68rpx;
                background: #F7F8FA;
                border-radius: 12rpx;
                padding: 0 24rpx;
                font-size: 28rpx;
                font-weight: bold;
                color: #667EEA;
                display: flex;
                align-items: center;
                box-sizing: border-box;
            }
        }
    }

    .exchangeBtn {
        width: 100%;
        height: 68rpx;
        background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
        border-radius: 12rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        font-weight: 400;
        color: #FFFFFF;
        margin-top: 40rpx;

        &:active {
            opacity: 0.8;
        }
    }
}

/* 兑换规则 */
.rulesBox {
    width: calc(100% - 64rpx);
    margin: 0 32rpx 24rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    padding: 24rpx;
    box-sizing: border-box;

    .boxTitle {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        font-weight: 600;
        color: #222222;
        margin-bottom: 24rpx;

        .titleIcon {
            width: 40rpx;
            height: 40rpx;
            margin-right: 12rpx;
        }
    }

    .rulesList {
        .ruleItem {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20rpx;

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

            .ruleDot {
                width: 12rpx;
                height: 12rpx;
                background: #667EEA;
                border-radius: 50%;
                margin-top: 12rpx;
                margin-right: 16rpx;
                flex-shrink: 0;
            }

            .ruleText {
                flex: 1;
                font-size: 24rpx;
                color: #666666;
                line-height: 1.6;
            }
        }
    }
}

/* 积分商品列表 */
.productsBox {
    width: calc(100% - 64rpx);
    margin: 0 32rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    padding: 24rpx;
    box-sizing: border-box;


    .boxTitle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        font-weight: 600;
        color: #222222;
        margin-bottom: 24rpx;

        .moreBtn {
            display: flex;
            align-items: center;

            .moreText {
                font-size: 24rpx;
                color: #999999;
                font-weight: 400;
                margin-right: 8rpx;
            }

            .moreIcon {
                width: 24rpx;
                height: 24rpx;
            }
        }
    }

    .productsList {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .productItem {
            width: calc((100% - 24rpx) / 2);
            background: #F7F8FA;
            border-radius: 12rpx;
            overflow: hidden;
            margin-bottom: 24rpx;

            &:active {
                opacity: 0.8;
            }

            .productImg {
                width: 100%;
                height: 240rpx;
                background: #E5E5E5;
            }

            .productInfo {
                padding: 20rpx;

                .productName {
                    font-size: 28rpx;
                    color: #222222;
                    margin-bottom: 12rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .productPoints {
                    .pointsNum {
                        font-size: 32rpx;
                        font-weight: bold;
                        color: #667EEA;
                    }

                    .pointsUnit {
                        font-size: 24rpx;
                        color: #999999;
                        margin-left: 8rpx;
                    }
                }
            }
        }
    }
}
</style>