<!-- 充值 -->
<template>
    <nav-bar :navbar-data="navbarData"></nav-bar>
    <view class="recharge" :style="{marginTop: height +'px', height: 'calc(100vh - '+ height +'px)'}">
        <view class="recharge-head">充值金额</view>
        <view class="recharge-amount">
            <view class="grid-list border-bottom-after">
                <view v-for="(item,index) in gridData" :class="item.id === activeKey ? 'grid-list-active grid-list-item' : 'grid-list-item'" :key="index" @tap="handleSelectItem" :data-page="item">¥{{item.value}}</view>
            </view>
            <van-cell-group>
                <view class="row">
                    <label>其他金额</label>
                    <view class="row-right">
                        <input type="number" :value="rechargeAmount" placeholder="请输入其他金额" @input="handleRechargeAmountChange" />
                    </view>
                </view>
            </van-cell-group>
        </view>
        <view class="recharge-btn">
            <van-button type="info" block :disabled="rechargeAmount ? false : true">充值</van-button>
        </view>
    </view>
</template>

<script>
import $http from "@/utils/https";
import Util from "@/utils/utils";
import httpConfig from '@/utils/httpConfig';
import NavBar from '@/components/navBar/index'
import VanButton from '@/components/button/index'
import VanCellGroup from '@/components/cell-group/index'
import VanCell from '@/components/cell/index'
const app = getApp();
export default {
    components: {
		'nav-bar': NavBar,
		"van-button": VanButton,
		"van-cell-group": VanCellGroup,
		'van-cell': VanCell,
	},
    data() {
        return {
            navbarData: {
            isGoHome: true,
            isGoBack: true,
            title: "充值",
            rechargeAmount: Number
            },
            height: app.globalData.height,
            gridData: [
            {
                id: "1",
                value: "200"
            },{
                id: "2",
                value: "300"
            },{
                id: "3",
                value: "500"
            },{
                id: "4",
                value: "1000"
            },{
                id: "5",
                value: "2000"
            },{
                id: "6",
                value: "3000"
            },{
                id: "7",
                value: "5000"
            },{
                id: "8",
                value: "10000"
            }
            ],
            activeKey: ""
        }
    },
    methods: {
        // 选择金额
        handleSelectItem: function (event) {
            let itemData = event.currentTarget.dataset.page;
            this.setData({rechargeAmount: itemData.value, activeKey: itemData.id})
        },

        // 输入金额change
        handleRechargeAmountChange: Util.debounce(function (event) {
            this.setData({rechargeAmount: event.detail, activeKey: ""})
        }),
    }
}
</script>