<template>
    <view class="page-wrapper">
        <view class="re-header" :style="{ '--v-primary': calcThemeColor() }">
            <view class="re-h-main" :class="{ 'no-member-mian': !vdata.isMemebr }">
                <image src="/static/vipImg/member-bg.svg" mode="aspectFill" class="img-bg" />
                <view class="user-info">
                    <view class="user-photo">
                        <image class="vip-header" src="/static/vipImg/header-top.svg" v-if="vdata.mbrName"
                            mode="scaleToFill" />
                        <image class="no-vip" :src="vdata.avatarUrl ? vdata.avatarUrl : '/static/vipImg/no-vip.svg'"
                            mode="scaleToFill" />
                    </view>
                    <view class="user-wrapper" :class="{ 'user-wrapper-no-momber': !vdata.isMemebr }">
                        <view class="user-name" v-if="vdata.isMemebr">{{ vdata.mbrName || '会员名称' }}</view>
                        <view class="user-phone" v-if="vdata.isMemebr">{{ vdata.mbrTel }}</view>
                        <view v-if="!vdata.isMemebr">未注册</view>
                        <view class="reg-phone" v-if="!vdata.isMemebr" hover-class="hover-but" hover-stay-time="200"
                            @tap="refBindPhone.open()">
                            手机号注册
                            <image src="/static/vipImg/arrow-white.svg" mode="scaleToFill" />
                        </view>
                    </view>
                </view>
                <view class="bin-info" v-if="vdata.isMemebr">
                    <view class="bind-stat">{{ parseFloat((vdata.balance / 100).toFixed(2)) }}</view>
                    <view class="bind-info">我的余额（元）</view>
                </view>
            </view>
        </view>
        <!-- 充值消费记录 -->
        <view class="re-con" @tap="toRecord">
            <view class="left">
                <image src="/static/img/note-icon.svg" style="width: 40rpx; height: 40rpx;"></image>
                <text>查看充值/消费记录</text>
            </view>
            <view class="right">
                <image src="/static/vipImg/arrow-black.svg" style="width: 40rpx; height: 40rpx;"></image>
            </view>
        </view>
        <view class="sub-title">充值优惠（元）</view>
        <view class="re-rule-wrapper">

            <block v-for="     v     in     amountRules    " :key="v.ruleId">
                <view class="re-r-item" :class="{ 'pay-amount-selected': vdata.selectedId == v.ruleId }"
                    @tap="calcAmount(v.ruleId)">
                    <image src="/static/vipImg/selected-re-icon.svg" mode="aspectFill"
                        v-if="vdata.selectedId == v.ruleId" />
                    <view class="ite-top">
                        <text class="pay-icon">￥</text>{{ parseFloat((v.rechargeAmount / 100).toFixed(2)) }}
                    </view>
                    <view class="ite-bot">
                        <text class="icon-give flex-center">赠</text>
                        <text class="pay-amount">￥{{ parseFloat((v.giveAmount / 100).toFixed(2)) }}</text>
                    </view>
                </view>
            </block>

            <view class="re-r-item re-r-custom" :class="{ 'pay-amount-selected': vdata.selectedId == 'custom' }"
                v-if="vdata.memberCustomAmountState == 1" @tap="calcAmount('custom')">
                <image src="/static/vipImg/selected-re-icon.svg" mode="aspectFill" v-if="vdata.selectedId == 'custom'" />
                <view class="ite-top  ite-top-custom-title">
                    自定义
                </view>
                <view class="ite-bot ite-bot-input">
                    <input type="digit" placeholder="请输入自定充值义金额" v-model="vdata.rechargeAmount"
                        placeholder-style="color:#00000059" style="background: transparent;"
                        @input="() => vdata.entryAmount = vdata.rechargeAmount">
                </view>
            </view>

        </view>
        <view class="re-confirm-but" v-if="vdata.isMemebr">
            <view class="real-amount">实际到账：<text>￥{{ vdata.entryAmount }}</text></view>
            <view class="confirm" hover-class="hover-but" hover-stay-time="200" @tap="confirm">确认充值</view>
        </view>
        <view class="line"></view>
        <view class="sub-title">适用门店</view>
        <view class="store-wrapper">
            <block v-for="(v, i) in storeList " :key="i">
                <view class="store-item">{{ v.storeName }}</view>
            </block>
        </view>
    </view>
    <BindPhone ref="refBindPhone" @success="getMemberInfo" />
</template>
<script setup>
import { onLoad, onPullDownRefresh, onUnload } from '@dcloudio/uni-app'
import { ref, reactive } from "vue"
import { $apiMembers, $getMemberInfo, $recharge } from "@/http/apiMember"
import BindPhone from "./components/BindPhone.vue"
import paywayCallFunc from '@/pages/payway/payway.js'
import appConfig from "@/config/appConfig"
import { calcThemeColor } from "@/util/member.js"
import storageManage from '@/util/storageManage.js'
// import { Base64 } from 'js-base64'

onLoad(() => {
    uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#212327'
    })

    // 查询是否注册会员
    $apiMembers({ method: 'mbr.info', channelUesrId: Base64.encode(appConfig.channelUserId) }).then(({ bizData }) => {
        if (bizData) {
            storageManage.iToken(bizData)
            getMemberInfo() //存储token 查询会员信息
            vdata.isMemebr = true
        } else {
            vdata.isMemebr = false
        }
    })
    getRules()
})

const vdata = reactive({
    rechargeAmount: '',
    entryAmount: ''
})
const amountRules = reactive([])
const storeList = reactive([])
const refBindPhone = ref(null)
const refInput = ref(null)
const openPopup = () => {
    refBindPhone.value.open()
}

// 获取会员信息
const getMemberInfo = () => {
    $getMemberInfo().then(({ bizData }) => {
        Object.assign(vdata, bizData)
        vdata.isMemebr = true
        getRules()
    }).catch(er => {
        uni.stopPullDownRefresh()
    })
}
// 查询会员充值规则
const getRules = () => {
    $apiMembers().then(({ bizData }) => {
        getStore()
        vdata.memberCustomAmountState = bizData.memberCustomAmountState
        Object.assign(amountRules, bizData.records)
        if (bizData.length > 0) calcAmount(bizData[0].ruleId)

    }).catch(er => {
        uni.stopPullDownRefresh()
    })
}
const calcAmount = (id) => {
    if (id == 'custom') {
        vdata.selectedId = id
        vdata.rechargeAmount = ''
        vdata.entryAmount = ''
        return
    }

    vdata.selectedId = id
    const data = amountRules.find(v => v.ruleId == id)
    vdata.entryAmount = ((data.giveAmount + data.rechargeAmount) / 100).toFixed(2)
    vdata.rechargeAmount = ''
}
// 手机号注册弹窗
const bindPhoneOpen = () => {
    refBindPhone.value.open()
}
const REG_AMOUNT = /^([0-9]{1}|^[1-9]{1}\d{1,15})(\.\d{1,2})?$/

// 确认充值
const confirm = () => {
    // 请求参数
    let reqParams = {}

    // 判断 是自定义 还 会员规则 充值
    if (vdata.selectedId == 'custom') {
        if (vdata.rechargeAmount <= 0) {
            return uni.showToast({ title: '充值金额应大于0', icon: 'none' })
        }

        reqParams.rechargeAmount = vdata.rechargeAmount
        if (!REG_AMOUNT.test(reqParams.rechargeAmount)) {
            return uni.showToast({ title: '充值金额错误 请输入正确金额', icon: 'none' })
        }
    } else {
        reqParams.rechargeRuleId = vdata.selectedId
        if (!reqParams.rechargeRuleId) {
            return uni.showToast({ title: '请选择充值金额', icon: 'none' })
        }
    }

    $recharge(reqParams).then(({ bizData }) => {
        if (bizData.orderState != 1) { //订单不是支付中，说明订单异常
            return toErrPageFunc(bizData.errMsg);
        }
        if (bizData.payUrl) {
            location.href = bizData.payUrl;
            return false;
        }
        if (['alipayH5', 'alipayLite'].includes(appConfig.currentPageType)) {
            bizData = JSON.parse(bizData.payData)
        } else {
            bizData.payInfo = bizData.payData
        }

        // 以下为调起 jsapi的函数：  分为： H5 和 各端小程序
        let thisPaywayCallFunc = paywayCallFunc()[appConfig.currentPageType];
        thisPaywayCallFunc(bizData, { amount: bizData.payAmount, fun: paySuccess })
    })
}

// 支付成功回调函数
function paySuccess () {
    uni.$emit('updateMemberInfos')
    uni.navigateBack()
}

// 获取适用的门店
const getStore = () => {
    $apiMembers({
        method: 'mch.mbr.recharge.rule.store'
    }).then(({
        bizData
    }) => {
        Object.assign(storeList, bizData)
        uni.stopPullDownRefresh()
    }).catch(er => {
        uni.stopPullDownRefresh()
    })
}
const toRecord = () => {
    uni.navigateTo({
        url: '/pageMember/memberRecord/memberRecord'
    })
}
onPullDownRefresh(() => {
    getMemberInfo()
})
</script>

<style lang="scss" scoped>
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-wrapper {
    min-height: 100vh;
    background-color: #fff;

    .sub-title {
        margin: 50rpx;
        margin-bottom: 0;
        color: #4d4d4dff;
        font-size: 30rpx;
        font-weight: 500;
    }
}

.re-header {
    padding: .1rpx;
    padding-bottom: 0;
    padding-top: 50rpx;
    box-sizing: border-box;
    background-color: #212327;

    .re-h-main {
        padding: .1rpx;
        position: relative;
        z-index: 10;
        margin: 0 50rpx;
        border-radius: 32rpx 32rpx 0 0;
        overflow: hidden;
        background: linear-gradient(90deg, #fff7ccff 0%, #ffbe4dff 100%);

        .img-bg {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .user-info {
            display: flex;
            align-items: center;
            margin: 30rpx;
            padding-bottom: 30rpx;
            border-bottom: 1rpx solid #0000000f;

            .user-name {
                color: #694e2cff;
                font-size: 30rpx;
                font-weight: 500;
            }

            .user-phone {
                margin-top: 6rpx;
                color: #997a3dff;
                font-size: 25rpx;
            }

            .user-photo {
                position: relative;
                margin-right: 30rpx;
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                background-color: #ccc;

                image {
                    border-radius: 50%;
                }

                .vip-header {
                    position: absolute;
                    top: -50rpx;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 80rpx;
                    height: 80rpx;
                }

                .no-vip {
                    width: 80rpx;
                    height: 80rpx;
                }
            }


        }

        .bin-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .bind-stat {
                text-align: center;
                color: #212327ff;
                font-size: 60rpx;
                font-weight: 500;

            }

            .bind-info {
                margin-top: 10rpx;
                margin-bottom: 30rpx;
                color: #997a3dff;
                font-size: 23rpx
            }

            .to-recharge {
                font-size: 26rpx;
                border: 2rpx solid #999;
                padding: 8rpx 20rpx;
                color: #313133;
                border-radius: 10rpx;
            }
        }
    }
}

.bind-phone {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    margin: 0 30rpx;
    margin-top: 100rpx;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #ccc;

    image {
        margin-right: 10rpx;
        width: 40rpx;
        height: 40rpx;
    }

    .bind-left {
        display: flex;
        align-items: center;
        color: #666;
    }

    .bind-right {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 160rpx;
        height: 60rpx;
        border: 5rpx solid var(--v-primary);
        color: var(--v-primary);
        font-weight: 600;
        border-radius: 10rpx;
    }
}

.re-rule-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding: 10rpx;

    .re-r-item {
        margin: 15rpx;
        padding: 20rpx;
        min-width: 216rpx;
        height: 163rpx;
        box-sizing: border-box;
        background: linear-gradient(270deg, rgb(255, 94, 77, 0.1) 0%, rgb(255, 153, 102, 0.1) 100%);
        border-radius: 26rpx;

        .ite-top {
            margin-bottom: 10rpx;
            color: #ff624fff;
            font-size: 40rpx;
            font-weight: 500;

            .pay-icon {
                color: #ff624fff;
                font-size: 25rpx;
                font-weight: 500;
            }
        }

        .ite-bot {
            display: flex;
            align-items: center;
            min-width: 176rpx;
            height: 60rpx;
            color: #fff;
            border-radius: 12rpx;
            font-size: 24rpx;
            background: linear-gradient(270deg, rgb(255, 103, 86) 0%, rgb(249, 147, 100) 100%);

            .icon-give {
                flex-shrink: 0;
                margin-right: 10rpx;
                width: 60rpx;
                height: 60rpx;
                border-radius: 12rpx;
                background: #ffffff26;
            }

            .pay-amount {
                margin-right: 15rpx;
            }
        }
    }

    .re-r-custom {
        width: 453rpx;

        .ite-top-custom-title {
            margin-bottom: 20rpx;
            font-size: 25rpx;
            font-weight: 500;
        }

        .ite-bot-input {
            padding-top: 15rpx;
            width: 100%;
            border-top: 1rpx solid rgba(0, 0, 0, 0.06);
            background: transparent;
            color: #FF624F;
            font-size: 24rpx;
            font-weight: 400;

            input {
                width: 100%;
            }
        }
    }
}



.re-confirm-but {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    margin: 30rpx;
    height: 110rpx;
    background: #212327ff;
    border-radius: 20rpx;


    .real-amount {
        margin-left: 30rpx;
        color: #ffffffff;
        font-size: 25rpx;

        text {
            color: #FFC766;
        }
    }

    .confirm {
        width: 260rpx;
        height: 100%;
        background: linear-gradient(270deg, #ff6756ff 0%, #f99364ff 100%);
        border-radius: 20rpx;
        text-align: center;
        line-height: 110rpx;
    }
}

.line {
    margin: 50rpx 30rpx;
    height: 1rpx;
    background: #f2f2f2ff;
}

.store-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding: 10rpx;

    .store-item {
        margin: 20rpx;
        padding: 10rpx 30rpx;
        background: #f7f7f7ff;
        border-radius: 12rpx;
        color: #212327ff;
        font-size: 24rpx;
    }
}

.reg-phone {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250rpx;
    height: 90rpx;
    border-radius: 12rpx;
    background: linear-gradient(270deg, #ff6756ff 0%, #f99364ff 100%);
    color: #fff;

    image {
        width: 40rpx;
        height: 40rpx;
    }
}

// 选中后的样式
.pay-amount-selected {
    position: relative;
    padding: 15rpx !important;
    border: 5rpx solid #FF5F4D;
    border-radius: 26rpx 5rpx 26rpx 26rpx;

    image {
        position: absolute;
        top: -5rpx;
        right: -5rpx;
        z-index: 10;
        width: 40rpx;
        height: 40rpx;
    }
}

// 充值消费记录
.re-con {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    width: 690rpx;
    height: 110rpx;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
    background: rgb(255, 255, 255);

    .left {
        display: flex;
        align-items: center;
        justify-content: center;

        image {
            margin-right: 10rpx;
        }

        text {
            color: rgb(51, 51, 51);
            font-size: 30rpx;
        }
    }
}

// 非会员 样式
.user-wrapper-no-momber {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.no-member-mian {
    height: 150rpx;
}

.hover-but {
    opacity: 0.5 !important;
}
</style>