<template>
	<view class="content">
		<view class="top">
			<view class="top-cont">
				<view class="top-cont-name">法律咨询服务包</view>
				<view class="top-cont-text">请仔细填写以下信息</view>
			</view>
			<image class="top-img" src="https://cdn.douhuofalv.com/images/2023/04/20/2ea5fc20ffc90e7feec7ba2650b81c99.png" mode="widthFix"></image>
		</view>
		<view class="idcardBorder">
			<!-- 表单部分 -->
			<view class="idcardAdd-block">
				<block v-for="(item, keyIndex) in paramsArr" :key="keyIndex">
					<block v-if="item.pre_key == null || isShow(item)">
						<view class="idcardAdd-block-name">
							<view class="idcardAdd-block-see">
								<text v-if="item.is_required == 1">*</text>{{item.title}}
							</view>
						</view>
						
						<!-- 单输入框 -->
						<view class="idcardAdd-block-write" v-if="item.type === 'price' || item.type === 'number' || item.type === 'text' || item.type === 'password' || item.type === 'mobile' || item.type === 'day'">
							<mouldInput class="idcardAdd-input" :blur-value="item.value" :input-type="item.type" :input-title="item.title" :input-key="item.key" @onValue="($event) => {item.value = $event}"></mouldInput>
						</view>
						
						
						<!-- 下拉框 -->
						<view class="idcardAdd-block-write" v-if="item.type === 'select'">
							<picker class="idcardAdd-picker" :range="item.options" :value="item.value" @change="item.value = $event.detail.value">
								<view class="nowrap">
									<!-- {{item.options[item.value]}} -->
									{{item.options[item.value]}}
								</view>
								<image class="idcardAdd-picke-image" src="@/static/imgs/basic_down.png" mode="aspectFill"></image>
							</picker>
						</view>
						
						<!-- 多选 -->
						<view class="idcardAdd-aline" v-if="item.type === 'checkbox'">
							<checkbox-group @change="item.value = $event.detail.value">
								<label class="checkbox-item" v-for="(checkboxItem, checkboxIndex) in item.options">
									<checkbox class="checkbox-input" :value="checkboxIndex" color="#446EFE"></checkbox>{{checkboxItem}}
								</label>
							</checkbox-group>
						</view>
						
						
						<!-- 单选 -->
						<view class="idcardAdd-aline" v-if="item.type === 'radio'">
							<radio-group @change="item.value = $event.detail.value">
								<label class="idcardAdd-aline-write" v-for="(radioItem, radioIndex) in item.options" :key="radioIndex">
									<radio :value="radioIndex" color="#446EFE" style="transform:scale(.65)" :checked="item.value === radioIndex" /><text>{{radioItem}}</text>
								</label>
							</radio-group>
						</view>
						
						<!-- 描述 -->
						<view class="idcardAdd-depict-textarea" v-if="item.type === 'textarea'">
							<textarea maxlength="500" class="textarea" :placeholder="'请输入' + item.title" v-model="item.value"></textarea>
							<text>500字以内</text>
						</view>
						
						<!-- 被告所在地 -->
						<block v-if="item.type === 'pro_city' && item.key === 'defendant_address'">
							<view class="idcardAdd-block-write">
								<uni-data-picker
									:localdata="cityPicker"
									:border="false"
									split="-"
									placeholder="选择城市"
									@change="defendantPicker"
								></uni-data-picker>
							</view>
						</block>
						
						<!-- 目前所在地 -->
						<block v-if="item.type === 'pro_city' && item.key === 'address'">
							<view class="idcardAdd-block-write">
								<uni-data-picker
									:localdata="cityPicker"
									:border="false"
									split="-"
									placeholder="选择城市"
									@change="addressPicker"
								></uni-data-picker>
							</view>
						</block>
					</block>
				</block>
			</view>
		</view>
		<view class="idcardBtn">
			<button class="idcardBtn-go" type="default" @click="onSubmit" :disabled="disabled">{{disabled ? '数据正在提交中' : '确认提交'}}</button>
		</view>
		
		<!-- 打款凭证弹出 -->
		<view class="voucherBack" :class="{active : voucherState}"></view>
		<view class="voucherPop" :class="{active : voucherState}">
			<view class="tipsWhite">
				<image class="voucherPop-img" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/04/17/f4a3c45fe9aa7db143a362fc5b13b31d.png" mode="widthFix"></image>
				<view class="voucherPop-title">
					<view class="voucherPop-name">支付提示</view>
					<view class="voucherPop-text">抱歉，此订单不支持线上支付，请上传打款凭证</view>
					<view class="voucherPop-btn">
						<view class="voucherPop-go" @click="cancelPay">
							暂不支付
						</view>
						<view class="voucherPop-go voucherPop-up" @click="clickOpen">
							上传凭证
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { entrustInfo, entrustPost } from '@/apis/interfaces/synthesis'
	import { createCity } from '@/apis/interfaces/user'
	import mouldInput from '@/components/mould-input.vue'
	export default {
		components: {
			mouldInput
		},
		data() {
			return {
				paramsArr	  : [],  // 信息
				cityPicker	  : [],  // 地址
				
				// 被告所在地
				defendant	  : {},
				
				// 目前所在地
				address		  : {},
				
				disabled	  : false,
				orderId		  : '',     // 订单 ID
				orderType     : '',     // 订单类型
				orderPrice    : '',     // 订单金额
				voucherState  : false,  // 上传凭证弹出
			}
		},
		created() {
			uni.showLoading({
				title: '加载中...',
				mask : true
			})
			
			// 获取综法咨询-详情
			this.getBusiness();
			
			// 省市区
			createCity().then(res => {
				this.cityPicker = res;
			}).catch( err => {
				uni.showToast({
					title: err.message,
					icon: "none"
				})
			})
		},
		
		computed: {
			isShow(){
				return (item) => {
					if(item.pre_key != null){
						let index = this.paramsArr.findIndex(val => val.key == item.pre_key)
						return item.pre_value == this.paramsArr[index].value
					}
					return false
				}
			}
		},
		
		methods: {
			// 综法咨询-详情
			getBusiness(){
				entrustInfo(this.$Route.query.entrustId).then(res => {
					let froms = res.params
					froms.map(val => {
						if(val.type === 'checkbox'){
							val.value = []
						}else if(val.type === 'select'){
							val.value = 0
						}else{
							val.value = ""
						}
					})
					this.paramsArr = froms
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			
			// 被告所在地-选择城市
			defendantPicker(e){
				let { value } = e.detail
				let dataArr = {
					province_id: value[0].value,
					city_id: value[1].value
				}
				this.defendant = dataArr
			},
			
			// 目前所在地-选择城市
			addressPicker(e){
				let { value } = e.detail
				let dataArr = {
					province_id: value[0].value,
					city_id: value[1].value
				}
				this.address = dataArr
			},
			
			// 提交订单数据
			onSubmit(){
				uni.showLoading({
					title: '提交中...',
					mask : true
				})
				
				let subData = {};
				let dataArr = []
				
				for(let val of this.paramsArr){
					if(val.type === 'pro_city'){
						subData[val.key] = this.address
					}else{
						subData[val.key] = val.value
					}
				}
				
				for(let key in subData){
					dataArr.push({
						key,
						value: subData[key]
					})
				}
				entrustPost(this.$Route.query.entrustId, {
					data: dataArr,
					type: 'self',
					channel: 'h5',
					user_id: ''
				}).then(res => {
					this.disabled = true
					if(res.can.pay_status == 4) {
						uni.showLoading({
							title: '已支付...',
							mask : true
						})
						// 跳到委托单
						setTimeout(()=>{
							this.$Router.replace({name: 'EntrustOrder', params: {yearStatus: 1}})
						},1000)
						return
					}
					this.expressSheet(res.entrust_order_id, res.order_type, res.can, res.price )
				}).catch( err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			
			// 选择支付方式
			expressSheet(id, type, can, price) {
				this.orderId   = id
				this.orderType = type
				this.orderPrice = price
				uni.showActionSheet({
				    itemList: ['线上支付', '线下支付'],
				    success: sheetRes => {
						if(sheetRes.tapIndex == 0) {
							if(can.online) {
								this.$Router.replace({name: 'FeePay', params: {orderId: id, orderType: type, price: price, payForm: 'entrust'}})
								return
							}
							this.voucherState = true
						} else if (sheetRes.tapIndex == 1) {
							this.$Router.replace({name: 'VoucherOpen', params: {orderId: id, orderType: type, price: price}})
						}
				    },
				    fail: sheetFail => {
						uni.showToast({
							title: '取消支付',
							icon : 'none'
						})
						setTimeout(()=>{
							this.$Router.replace({name: 'ExpandOrder'})
						},3000)
					}
				})
			},
			
			// 取消支付
			cancelPay() {
				this.voucherState = false
				uni.showToast({
					title: '取消支付',
					icon : 'none'
				})
				setTimeout(()=>{
					this.$Router.replace({name: 'ExpandOrder'})
				},3000)
			},
			
			// 上传凭证
			clickOpen() {
				this.voucherState = false
				this.$Router.replace({name: 'VoucherOpen', params: {orderId: this.orderId, orderType: this.orderType, price: this.orderPrice}})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #111e4b;
		width: 100vw;
		height: 100%;
		overflow-y: scroll;
		position: fixed;
	}
	
	.top {
		position: relative;
		height: 180rpx;
		.top-img {
			position: absolute;
			right: 0;
			top: 0;
			width: 30%;
		}
		.top-cont {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			padding: 40rpx 30rpx;
			box-sizing: border-box;
			.top-cont-name {
				font-weight: 600;
				font-size: 44rpx;
				background-image: linear-gradient(to right,#f1c694, #fffbf6 42%);
				-webkit-background-clip:text; 
				-webkit-text-fill-color:transparent;
				margin-bottom: 10rpx;
			}
			.top-cont-text {
				font-size: 34rpx;
				color: #ffffff;
			}
		}
	}
	
	.idcardBorder {
		padding: 30rpx;
		box-sizing: border-box;
	}
	
	.idcardAdd-block {
		padding: $padding + 20 $padding;
		box-sizing: border-box;
		background-color: #ffffff;
		border-radius: $radius;
		position: relative;
	}
	
	.idcardAdd-depict-textarea {
		background-color: #f7faff;
		line-height: 90rpx;
		border-radius: $radius-sm;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: relative;
		width: 100%;
		margin-bottom: 40rpx;
		.textarea {
			width: 100%;
			padding: $padding 0;
			box-sizing: border-box;
		}
		text {
			width: 100%;
			text-align: right;
			font-size: 28rpx;
			color: #999999;
			display: block;
		}
	}
	
	.idcardAdd-block-write {
		background-color: #f7faff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: $radius-sm;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: relative;
		display: flex;
		width: 100%;
		margin-bottom: 40rpx;
		&:last-child {
			margin-bottom: 0;
		}
		.idcardAdd-input {
			width: 100%;
			height: 100%;
			display: flex;
			border: none;
			background-color: transparent;
			font-size: 30rpx;
		}
	}
	
	.idcardAdd-picker {
		position: relative;
		width: 100%;
	}
	
	.idcardAdd-picke-image {
		width: 24rpx;
		height: 24rpx;
		position: absolute;
		top: $margin;
		right: $margin;
	}
	
	.idcardAdd-block-name {
		margin-bottom: $margin;
		display: flex;
		.idcardAdd-block-see {
			color: $text-color;
			margin-right: $margin;
			font-size: 30rpx;
			text {
				color: $mian-color;
				padding-right: 10rpx;
			}
		}
	}
	
	// checkbox
	.checkbox-item{
		display: inline-block;
		margin-right: 20rpx;
		color: #999999;
		line-height: 70rpx;
		&:last-child {
			margin-right: 0;
		}
		.checkbox-input{
			transform:scale(0.6);
		}
	}
	
	.idcardAdd-aline {
		position: relative;
		display: flex;
		width: 100%;
		margin-bottom: 40rpx;
		.idcardAdd-aline-write {
			margin-right: 30rpx;
			color: #999999;
		}
	}
	
	// 按钮
	.idcardBtn {
		background-color: #111e4b;
		width: 100%;
		padding: 20rpx 60rpx 140rpx;
		box-sizing: border-box;
		display: flex;
		.idcardBtn-go {
			width: 100%;
			background-image: linear-gradient(to bottom, #fff2d2, #f9cd9e);
			color: #582700;
			font-weight: 600;
			font-size: 36rpx;
			border-radius: $radius * 3;
			height: 94rpx;
			line-height: 94rpx;
			box-shadow: 0 6rpx 10rpx rgba(0, 0, 0, .5);
			text-align: center;
			&[disabled] {
				background-color: #f9f9f9;
				border-color: #e2e2e2;
				color: #959595;
			}
			&::after {
				display: none;
			}
		}
	}
	
	// 打款凭证弹出
	.voucherBack {
		position: fixed;
		width: 100vw;
		height: 100vh;
		left: 0;
		top: 0;
		z-index: 99;
		background-color: rgba(0, 0, 0, .6);
		display: none;
		&.active {
			display: block;
		}
	}
	.voucherPop {
		-webkit-box-orient: vertical;
		-webkit-box-pack: center;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 100;
		padding: 0 10%;
		box-sizing: border-box;
		display: none;
		&.active {
			display: -webkit-box;
		}
		.tipsWhite {
			background-color: #ffffff;
			border-radius: 20rpx;
			position: relative;
			.voucherPop-img {
				position: absolute !important;
				top: -80rpx;
				right: calc(50% - 100rpx);
				width: 200rpx;
			}
			.voucherPop-title {
				box-sizing: border-box;
				padding: 50rpx 70rpx;
				margin-top: 100rpx;
				text-align: center;
				.voucherPop-name {
					font-weight: 600;
					font-size: 38rpx;
				}
				.voucherPop-text {
					padding: 30rpx 0 35rpx;
					line-height: 44rpx;
				}
				.voucherPop-btn {
					display: flex;
					.voucherPop-go {
						flex: 2;
						text-align: center;
						border: 2rpx solid #da2b56;
						color: #da2b56;
						margin: 0 15rpx;
						line-height: 74rpx;
						border-radius: 10rpx;
						background-color: #ffffff;
						&.voucherPop-up {
							background-color: #da2b56;
							color: #ffffff;
						}
					}
				}
			}
		}
	}
</style>