<template>
	<view class="bg">
		<view class="step1" v-if="type==1">
			<view class="text" v-html="formateRichText(content)"></view>
			<view style="width: 1rpx;height: 170rpx;"></view>
		</view>
		
		<view class="step2" v-else-if="moneyData">
			<view style="padding-top: 200rpx;">账单号： {{moneyData.bill_id}}</view>
			<view>停车场名称：{{moneyData.park_name}}</view>
			<view>车牌号：{{moneyData.vpl_number}}</view>
			<view>入站时间：{{moneyData.in_time}}</view>
			<view>出站时间：{{moneyData.out_time}}</view>
			<view>应付：￥{{moneyData.unpaid_charge}}</view>
		</view>
		<view class="step2" v-else>
			<view>未获取到账单信息</view>
		</view>
		
		<view class="bottom-cntainer">
			<view class="btn" @click="submit()">{{type==1?"同意":"确认支付"}}</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1, // 1 阅读条款 2 扫码
				vpl_number: '',
				content:'',
				park_code: '',
				arm_code: '',
				gate_type: '', //in out
				moneyData: null
			};
		},
		onLoad(options){
			this.vpl_number = options.carNo
			this.park_code = options.park_code
			this.arm_code = options.arm_code
			this.gate_type = options.gate_type || 'in'
			this.getType()
			this.getArticle()
		},
		methods: {
			getType () {
				// 进站 读协议
				if (this.gate_type == 'in') {
					this.type = 1
				} else {
					this.type = 2
					this.Post({
						park_code: this.park_code,
						vpl_number: this.vpl_number,
						arm_code: this.arm_code,
					},'/api/parking/getParkingBill').then(res => {
						this.moneyData = res.data
					})
				}

			},
			
			getArticle () {
				this.Post({
					id:10309
				},'/api/article/getArticleById').then(res => {
					this.content = res.data.content
				})
			},
			submit () {
				if (this.type == 1 || (this.moneyData && this.moneyData.is_free)) {
					this.Post({
						park_code: this.park_code,
						arm_code: this.arm_code,
						agree_status: 1,
						vpl_number: this.vpl_number,
					}, "/api/parking/raiseCar").then(res=>{
						if (res.code == 1) {
							uni.showToast({
								title: res.msg
							})
						}
					})
				} else {
					this.Post({
						bill_id: this.moneyData.bill_id,
						platform: 'miniprogram'
					},"/api/parking/createPayment").then(res=>{
						uni.requestPayment({
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							paySign: res.data.paySign,
							signType: res.data.signType,
							timeStamp: res.data.timeStamp,
							complete() {
								uni.hideLoading()
							}
						});
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.text{
		padding: 20rpx;
	}
	.bottom-cntainer{
		width: 100%;
		height: 166rpx;
		background: #ffffff;
		box-shadow: 0rpx -3rpx 9rpx 1rpx rgba(227, 229, 232, 0.5);
		display: flex;
		position: fixed;
		bottom: 0;
		padding: 20rpx 20rpx;
		align-items: center;
		justify-content: center;
	}
	.btn{
		width: 594rpx;
		height: 88rpx;
		margin: 0 auto;
		background: linear-gradient(270deg, #9EE4FE, #7FD491);
		border-radius: 43rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	.step2{
		text-align: center;
		font-weight: bold;
		font-size: 40rpx;
		height: 100vh;
		
		line-height: 2;
	}
</style>
