<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'">
							<block v-if="item.key === 'name' || item.type === 'mobile'">
								<input class="idcardAdd-input" v-model="item.value" :placeholder="item.value_text" v-if="item.value_text">
								<mouldInput v-else 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>
							</block>
							<block v-else>
								<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>
							</block>
						</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>
</template>

<script>
	import { synthDet, synthPost } 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	  : [],  // 地址
				
				// 目前所在地
				address		  : {},
				
				disabled	  : 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(){
				synthDet(this.$Route.query.synthesisId).then(res => {
					let froms = res.synthesis.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'
					})
				})
			},
			
			// 目前所在地-选择城市
			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]
					})
				}
				synthPost(this.$Route.query.synthesisId, {
					data: dataArr,
					type: 'self',
					channel: 'h5',
					user_id: ''
				}).then(res => {
					this.disabled = true
					uni.showToast({
						title: '提交成功',
						icon: "none"
					})
					
					// 若价格大于0,要去支付
					let number = Number(res.price)
					if(number > 0) {
						this.$Router.replace({name: 'Pay', params: {orderId: res.order_id, orderType: res.order_type}})
						return
					}
					
					// 否则直接跳转详情
					setTimeout(()=>{
						this.$Router.replace({name: 'FeeConfirm', params: {synthesisId: res.synthesis_order_id}})
					},3000)
				}).catch( err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
		}
	}
</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;
			}
		}
	}
</style>