<template>
    <div class="content">
        <div class="header">
            <u-navbar
                :background="{ backgroundColor: '#ffcb57' }"
                :border-bottom="false"
                title="账户充值"
                title-color="#472d21"
            ></u-navbar>
        </div>
        <div class="card">
            <u-card>
                <view slot="head" class="ahHead">
                    <u-input
                        v-model="total"
                        type="number"
                        :clearable="false"
                        :custom-style="{ marginRight: 0 }"
                        placeholder="请输入充值金额"
                    />
                    <span class="unit">元</span>
                </view>
                <view slot="body">
                    <u-radio-group v-model="amount" active-color="#ffcb57" width="50%">
                        <u-radio
                            v-for="(item, index) in amounts"
                            :key="index"
                            :name="item.name"
                            :disabled="item.disabled"
                            shape="circle"
                            >{{ item.name }}</u-radio
                        >
                    </u-radio-group>
                </view>
            </u-card>
            <u-card title="选择支付方式">
                <view class="payBd" slot="body">
                    <view class="left">
                        <u-icon name="weixin-fill" size="50" color="#1AAD19" />
                        <span class="payname">微信支付</span>
                    </view>
                    <u-icon name="checkmark-circle-fill" size="50" color="#ffcb57" />
                </view>
            </u-card>
            <view class="mc-btn">
                <u-button
                    :custom-style="{ margin: '6rpx 30rpx', backgroundColor: '#ffcb57', color: '472d21' }"
                    hover-class="defaultBtnhover"
                    :loading="loading"
                    @click="placeOrder"
                    >充值</u-button
                >
            </view>
        </div>
        <u-toast ref="uToast" />
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import request from '../../common/service';
export default {
    data() {
        return {
            amounts: [
                {
                    name: '100',
                    checked: false,
                    disabled: false,
                },
                {
                    name: '200',
                    checked: false,
                    disabled: false,
                },
                {
                    name: '500',
                    checked: false,
                    disabled: false,
                },
                {
                    name: '1000',
                    checked: false,
                    disabled: false,
                },
            ],
            amount: 100,
            total: 100,
            loading: false,
        };
    },
    watch: {
        amount() {
            this.total = this.amount;
        },
    },
    onLoad() {},
    methods: {
        ...mapActions({
            updateUserDetail: 'user/updateUserDetail',
        }),
        changeAmount(e) {
            this.amount = e;
        },
        placeOrder() {
            const _t = this;
            this.loading = true;
            request
                .post('/api/payment', {
                    amount: this.total,
                })
                .then((res) => {
                    const { code, message, result } = res;
                    this.loading = false;
                    if (code === 0) {
                        const { timeStamp, nonceStr, paySign, signType } = result;
                        uni.requestPayment({
                            provider: 'wxpay',
                            timeStamp: timeStamp,
                            nonceStr: nonceStr,
                            package: result.package,
                            signType: signType,
                            paySign: paySign,
                            success: function (res) {
                                _t.getAccountInfo();
                            },
                            fail: function (err) {
                                _t.$refs.uToast.show({
                                    title: '充值失败！',
                                });
                            },
                        });
                    } else {
                        this.$refs.uToast.show({
                            title: message,
                        });
                    }
                });
        },
        getAccountInfo() {
            const _t = this;
            request.get('/api/Business/View').then((res) => {
                const { code, message, result } = res;
                if (code === 0) {
                    const detail = JSON.parse(result.result);
                    _t.updateUserDetail(detail).then(() => {
                        uni.showLoading({
                            title: '充值中',
                        });
                        setTimeout(() => {
                            uni.hideLoading();
                            _t.$refs.uToast.show({
                                title: '充值成功！',
                            });
                            uni.navigateBack();
                        }, 2500);
                    });
                } else {
                    _t.$refs.uToast.show({
                        title: message,
                    });
                }
            });
        },
    },
    onShareAppMessage(res) {
        if (res.from === 'button') {
            // 来自页面内分享按钮
            console.log(res.target);
        }
        return {
            title: '京台分享更多精彩',
            path: '/pages/index/index',
            imageUrl: '/static/images/share/WechatIMG96.png'
        };
    },
};
</script>

<style lang="scss" scoped>
.content {
    .header {
        background-color: #ffcb57;
    }
    .card {
        .ahHead {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .payBd {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .payname {
                    margin-left: 8px;
                }
            }
        }
        .u-body-item {
            font-size: 32rpx;
            color: #333;
            padding: 0rpx 10rpx;
            .right {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                width: 400rpx;
                flex: 0 0 400rpx;
                height: 120rpx;
                border-radius: 8rpx;
                margin-left: 12rpx;
                .extra-content {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
    .defaultBtnhover {
        color: '#472d21';
    }
}
</style>
