<template>
	<view v-if="playData" class="play_container flex column">
		<view class="play_header">
			<view class="play_header_price">
				￥{{tool.getnum((Number(playData.payMoneyPreAvailable)  +  Number(playData.payMoneyPreFreeze) ),2)}} </view>
			<!-- <view class="play_header_tiem flex jc">
				支付时间剩余：
				<uni-countdown @timeup='timeup' :show-day="false" :font-size="12" :minute="10" :second="0" />
			</view> -->
		</view>
		<view class="play_cards oneflex">
			<view v-for="(item,index) in pageData" :key="index" class="play_card">
				<view class="play_card_top flex ac">
					<image src="../../../../static/account.png"></image>
					<view class="oneflex">
						<view class="play_card_top_name">
						{{item.name}} <text v-if="item.shareCompanyQuota==1">( 共享 )</text>
						</view>
						<view class="play_card_top_balance">当前余额:{{ tool.getnum(item.balance,2)}}元</view>
					</view>
					<checkbox-group @change="checkChange">
						<checkbox style="transform:scale(0.7)"
							:checked="selectCompanyIds.includes(`${item.companyId}&${item.accountCardCode}`)"
							:value=" `${item.companyId}&${item.accountCardCode}` " />
					</checkbox-group>
				</view>
			</view>
		</view>
		<view class="play_footer">
			<view @click="goResult" class="play_footer_botton flex ac jc">确定支付</view>
		</view>
	</view>
</template>

<script>
	import station from '@/api/station.js'
	import play from '@/api/play.js'
	export default {
		data() {
			return {
				checkPage: {
					companyId: {
						tacitly: '',
						WrongText: '请选择电卡'
					},
					accountId: {
						tacitly: '',
						WrongText: '请选择电卡'
					},
				},
				selectCompanyIds: [],
				pageData: [],
				playData: null
			}
		},
		onLoad(e) {
			if (e.data) {
				this.playData = JSON.parse(decodeURIComponent(e.data));
				console.log(this.playData)
				this.checkChange({detail:{value:[]}})
			}
			// this.getAccountList()
		},
		methods: {
			checkChange(e) {
				this.selectCompanyIds = e.detail.value;
				if (this.selectCompanyIds.length) {
					let stringJion = this.selectCompanyIds.join('');
					this.playData['companyId'] = stringJion.split('&')[0];
					this.playData['accountId'] = stringJion.split('&')[1]
				} else {
					this.playData['companyId'] = '';
					this.playData['accountId'] = ''
				}
			},
			timeup() {
				uni.showToast({
					title: '支付已失效',
					icon: 'none'
				})
			},
			getAccountList() {
				station.getAccountList().then(res => {
					this.pageData = res.data
				})
			},
			goResult() { 
				let check = this.tool.checkFn(this.playData, [], this.checkPage); 
				if (check.result) {
					play.createOrder(this.playData).then(res => {
						if(res.code==20000&&res.data.id){
							uni.navigateTo({
								url:`/ChargingStation/pages/placeOrder/result/index?price=${this.tool.getnum(( Number(this.playData.payMoneyPreAvailable) + Number(this.playData.payMoneyPreFreeze) ),2)}&id=${res.data.id}`
							})
						}
					})
				} else {
					uni.showToast({
						title: check.WrongText,
						icon: 'none'
					})
				}

				// station.createOrder().then(res => {

				// })
				// uni.navigateTo({
				// 	url:'/ChargingStation/pages/placeOrder/result/index'
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'index.scss';
</style>