<template>
	<view class="deposit">
		<view class="button-group">
			<u-row :gutter="16">
				<u-col span="4" v-for="(item,key) in buttonList" :key="key" text-align="center">
					<view class="btnItem">
						<u-button
						@click="selectMoney(key)"
						hover-class="none"
						throttle-time="0"
						:custom-style="item.customStyle"
						>{{item.name}}</u-button>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="cell-group">
			<u-cell-group>
				<u-cell-item :arrow="false">
					<view slot="title">
						<u-icon size="50" name="rmb-circle-fill" :label="account"></u-icon>
					</view>
				</u-cell-item>
				<u-cell-item :arrow="false">
					<view slot="title">
						<u-icon size="50" name="weixin-fill" label="微信支付" color="#04BE02"></u-icon>
					</view>
					<u-switch slot="right-icon" v-model="checked"></u-switch>
				</u-cell-item>
			</u-cell-group>
		</view>
		<view class="sub-title">
			<text>缴纳诚信保证金，可提高竞争力</text>
		</view>
		<view class="btn">
			<u-button @click="confirm" hover-class="none" :custom-style="btnClass">确认</u-button>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import {loading,hidden,toast} from '../../tips/myTips.js'
	import {payDeposit} from '../../api/api.js'
	export default {
		onLoad(){
			uni.$u.mpShare.title = '页面分享';
		},
		data(){
			return {
				btnClass:{
					background:"#7c59fc",
					color:"#ffffff"
				},
				buttonList:[
					{
						name:'500元',
						value:500,
						customStyle:''
					},
					{
						name:'1000元',
						value:1000,
						customStyle:''
					},
					{
						name:'2000元',
						value:2000,
						customStyle:''
					},
					{
						name:'3000元',
						value:3000,
						customStyle:''
					},
					{
						name:'5000元',
						value:5000,
						customStyle:''
					},
					{
						name:'10000元',
						value:10000,
						customStyle:''
					}
				],
				money:'',
				checked:''
			}
		},
		methods:{
			selectMoney(key){
				this.money = this.buttonList[key].value
				this.reSetClass()
				this.buttonList[key].customStyle = {
					background:"#7c59fc4d"
				}
			},
			confirm(){
				if(this.money == ''){
					this.$refs.uTips.show({
						title: '请选择缴纳金额',
						type: 'warning'
					})
				}else if(this.checked == ''){
					this.$refs.uTips.show({
						title: '请选择支付方式',
						type: 'warning'
					})
				}else{
					console.log("支付"+this.money+"元")
					loading()
					payDeposit(this.money).then((res) => {
						if(res.data.code == 0){
							hidden()
							let params = {
								timeStamp:res.data.result.timeStamp,
								nonceStr:res.data.result.nonceStr,
								package:res.data.result.package,
								signType:res.data.result.signType,
								paySign:res.data.result.paySign
							}
							loading()
							wx.requestPayment(params).then((res) => {
								hidden()
								console.log(res)
							}).catch((res) => {
								hidden()
								console.log(res)
							})
						}
					})
				}
			},
			reSetClass(){
				for(let i in this.buttonList){
					this.buttonList[i].customStyle = ''
				}
			}
		},
		computed:{
			account:function(){
				let money = this.$store.state.userInfo.FBalanceAmount
				let text = "账户余额("+money+"元)"
				return text
			}
		}
	}
</script>

<style>
	.btnItem{
		margin: 5% 5%;
	}
	.sub-title{
		margin: 2% 5%;
		color: #d1d1d1;
	}
	.btn{
		margin: 10% auto;
		width: 90%;
	}
</style>
