<template>
	<view v-if='pageData' class="placeOrder_container flex column">
		<view class="placeOrder_header">
			<view class="placeOrder_header_name">{{pageData.stationName}}</view>
			<view class="placeOrder_period flex  ac">
				<text
					class="placeOrder_period_left oneflex">当前时段：{{pageData.stationPrice.startTime}}-{{pageData.stationPrice.endTime}}</text>
				<text class="placeOrder_period_right">￥ {{ pageData|price }}/度</text>
			</view>
			<view>
				<text>电费:<text class="blue">{{pageData.stationPrice.businessElectricityFee}}元/度</text>
				</text>
				<text style="margin-left: 47rpx;">
					服务费:
					<text class="blue">{{pageData.stationPrice.businessServiceFee}}元/度</text>
				</text>
			</view>
		</view>
		<view class="placeOrder_body oneflex">
			<view class="placeOrder_card flex">
				<view @click="$refs.accountDialog.open('bottom')" class='flex ac' style="width: 100%;">
					<image src="@/static/account.png"></image>
					<view class="account oneflex">
						<view class="account_label">{{accountList[accountIndex]['name']}}</view>
						<view class="account_tip">当前余额: <text>{{tool.getnum(accountList[accountIndex]['balance'],3)}}</text> 元</view>
					</view>
					<uni-icons type="forward" size="20"></uni-icons>
				</view>
			</view>
			<view style="padding-bottom: 0;" class="placeOrder_card">
				<view class="placeOrder_body_input flex">
					<view class="placeOrder_body_input_label"> 充电金额</view>
					<input @focus="selectPriceOptionValue = ''" v-model="payMoneyPreAvailable" class="oneflex"
						type="number" placeholder="请输入充电金额">
					<text>元</text>
					<text @click="tipFn" style="margin: 0 10rpx 0 20rpx;">
						+{{pageData.globalPayThreshold}}
					</text>
					<uni-icons @click="tipFn" type="help" size="20" color="#476FFAFF"></uni-icons>
				</view>
				<view class="placeOrder_body_poriceOoptions flex">
					<view @click="priceOptionClick(item)" v-for="(item,index) in priceOptions" :key="index"
						:class=" selectPriceOptionValue == item.value? 'placeOrder_body_poriceOoptions_item select_placeOrder_body_poriceOoptions_item  flex ac jc' :   'placeOrder_body_poriceOoptions_item flex ac jc' ">
						{{item.label}}
					</view>
				</view>
			</view>
			<view class="placeOrder_card flex">
				<view class='flex' style="width: 100%;" @click="isShow.licenseDialog=true">
					<text class="placeOrder_card_label ">车牌号：</text>
					<view class="oneflex">
						{{pageData.plateNumberList.length? pageData.plateNumberList[pageIndex.plateNumberIndex]: '请输入车牌号' }}
					</view>
					<uni-icons type="forward" size="20"></uni-icons>
				</view>
			</view>
			<view class="placeOrder_footer">
				<view @click="goPlay" class="placeOrder_footer_button flex ac jc">立即支付</view>
			</view>
		</view>
		<keyboard-plate ref="plateNumber" :plateNum.sync='plateNum' @change="getPlateNum" isShow></keyboard-plate>
		<uni-popup @change="accountChange" :safe-area='false' ref="accountDialog" type="bottom">
			 <plat-item  :selectIndex.sync='accountIndex' :pageData = 'accountList'></plat-item>
		</uni-popup>
		<uni-popup @change="licenseChange" :safe-area='false' ref="licenseDialog" type="bottom">
			<select-license @showPlateNumber='isShow.licenseDialog=false; $refs.plateNumber.open()'
				@confirm='licenseConfirm' v-model="pageIndex.plateNumberIndex" v-if="isShow.licenseDialog"
				:plateNumbers='pageData.plateNumberList'></select-license>
		</uni-popup>
	</view>
</template>

<script>
	import station from '@/api/station.js'
	import selectLicense from './components/selectLicense/selectLicense.vue'
	import platItem from './components/accountItem/index.vue'
	import play from '@/api/play.js'
	import {
		indexPage
	} from './AntiCorruptionLayer.js'
	export default {
		components: {
			selectLicense,
			platItem
		},
		data() {
			return {
				accountIndex:0,
				plateNum: '',
				accountList:[],
				isShow: {
					licenseDialog: false,
				},
				pageIndex: {
					plateNumberIndex: 0
				},
				checkPage: {
					qrcode: {
						tacitly: '',
						WrongText: '参数qrcode错误'
					},
					connectorId: {
						tacitly: '',
						WrongText: '参数connectorId错误'
					},
					licensePlate: {
						tacitly: '',
						WrongText: '车牌号输入错误'
					},
					payMoneyPreFreeze: {
						tacitly: '',
						WrongText: '参数payMoneyPreFreeze错误'
					},
					payMoneyPreAvailable: {
						tacitly: '',
						WrongText: '充电金额不能为空'
					},
				},
				payMoneyPreAvailable: '',
				selectPriceOptionValue: '',
				priceOptions: [{
					label: '10元',
					value: 10
				}, {
					label: '30元',
					value: 30
				}, {
					label: '60元',
					value: 60
				}, {
					label: '80元',
					value: 80
				}, {
					label: '100元',
					value: 100
				}, {
					label: '120元',
					value: 120
				}, ],
				pageData: null
			}
		},
		created() {
			this.getAccountList()
		},
		onLoad(e) {
			console.log(e,'=====')
			this.getStationData(e); 
		},
		filters: {
			price(e) {
				let price = Number(e.stationPrice.businessElectricityFee) + Number(e.stationPrice.businessServiceFee)
				return price.toFixed(2);
			}
		},
		watch: {
			'isShow.licenseDialog'(e) {
				e ? this.$refs.licenseDialog.open('bottom') : this.$refs.licenseDialog.close()
			},
			selectPriceOptionValue(e) {
				this.payMoneyPreAvailable = e;
			}
		},
		methods: {
			getAccountList(){
				station.getAccountList().then(res => {
					this.accountList = res.data
				})
			},
			accountChange(){
				
			},
			getPlateNum(e) {
				if (e.value) {
					this.pageData['plateNumberList'].push(e.value)
					this.pageIndex.plateNumberIndex = this.pageData['plateNumberList'].length - 1
				}
			},
			tipFn() {
				uni.showModal({
					title: '支付阈值说明',
					showCancel: false,
					content: '为避免金额预估不准导致电未充满，以及防止超充导致订单金额差异。该部分金额，将于订单结算后会根据实际系统结算，自动退回。',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			licenseConfirm(e) {
				this.pageIndex.plateNumberIndex = e;
				this.isShow.licenseDialog = false;
			},
			licenseChange(e) {
				if (!e.show) this.isShow.licenseDialog = false;
			},
			showSb() {
				this.showLicenseDialog = true;
			},
			priceOptionClick(e) {
				this.selectPriceOptionValue = e.value;
			},
			getStationData(e) { 
				if (e.type = 'qrCode') { 
					station[e.pointTo?e.pointTo:'scanCode'](Object.assign(e,{
						qrCode:decodeURIComponent(e.qrCode)
					})).then(res => {
						if (res.code == 20000) {
							this.pageData = new this.tool.Anticorrosive(res.data, indexPage);
						}else{
							uni.showModal({
								title: '提示',
								content: res.msg,
								showCancel:false,
								success: function (res) { 
									uni.navigateBack()
								}
							}); 
						}
					})
				}
			},
			goPlay() {
				let data = JSON.parse(JSON.stringify(this.pageData));
				delete data.stationPrice;
				data = Object.assign(data, {
					payMoneyPreAvailable: this.payMoneyPreAvailable,
					licensePlate: data.plateNumberList[this.pageIndex.plateNumberIndex]
				});
				let check = this.tool.checkFn(data, [], this.checkPage);
				if (check.result) {
					let {companyId,accountCardCode,payMoneyPreAvailable,payMoneyPreFreeze} = this.accountList[this.accountIndex]; 
					play.createOrder( Object.assign(data,{
						companyId,
						accountId:accountCardCode
					}) ).then(res=>{
						setTimeout(()=>{ 
							uni.navigateTo({
								url:`/ChargingStation/pages/placeOrder/result/index?price=${this.tool.getnum(( Number(data.payMoneyPreAvailable) + Number(data.payMoneyPreFreeze) ),2)}&id=${res.data.id}`
							})
						},1000)
					})
					// uni.navigateTo({
					// 	url: `/ChargingStation/pages/placeOrder/play/index?data=${encodeURIComponent(JSON.stringify(data))}`
					// })
				} else {
					uni.showToast({
						title: check.WrongText,
						icon: 'none'
					})
				}

			}
		}
	}
</script>

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