<template>
	<view class="content">
		<block v-if="serviceArr.length > 0">
			<view class="block" v-for="(item, index) in serviceArr" :key="index">
				<view class="block-title">
					{{item.title}}
					<view class="block-remove" @click="onRemove(index)" v-if="serviceArr.length > 1">
						<u-icon class="block-remove-icon" size="15" color="#446EFE" name="minus-circle"></u-icon>移出
					</view>
				</view>
				<!-- 机构 -->
				<view class="block-item">
					<label class="block-item-label"><text>*</text>机构</label>
					<!-- <picker :range="item.institution" range-key="title" :value="item.institutionIndex" @change="institutionChange($event, item, index)">
						<view class="institution-picker">
							<view class="institution-picker-text nowrap">{{item.institution[item.institutionIndex].title}}</view>
							<u-icon size="12" color="#999" name="arrow-down-fill"></u-icon>
						</view>
					</picker> -->
					<view class="institution-picker" @click="onShowInstitution(item.institution, item, index)">
						<view class="institution-picker-text nowrap">{{item.institution[item.institutionIndex].title}}</view>
						<u-icon size="12" color="#999" name="arrow-down-fill"></u-icon>
					</view>
				</view>
				<!-- 业务类型 -->
				<view class="block-item">
					<label class="block-item-label"><text>*</text>业务类型</label>
					<picker :range="item.fromType" range-key="title" :value="item.fromIndex" @change="businessChange($event, item, index)">
						<view class="institution-picker">
							<view class="institution-picker-text nowrap">{{item.fromType[item.fromIndex].title}}</view>
							<u-icon size="12" color="#999" name="arrow-down-fill"></u-icon>
						</view>
					</picker>
				</view>
				<!-- 表单信 -->
				<view
					class="block-item"
					v-for="(formItem, formIndex) in item.froms"
					:key="formIndex"
					v-if="item.subVal[formItem.pre_key] == formItem.pre_value"
				>
					<block v-if="formItem.type == 'price' || formItem.type == 'number' || formItem.type == 'day'">
						<label class="block-item-label"><text v-if="formItem.is_required == 1">*</text>{{formItem.title}}</label>
						<view class="inputs-flex">
							<input
								class="input"
								v-model="item.subVal[formItem.key]"
								:type="formItem.type == 'price' ? 'digit': 'number'"
								:placeholder="'请输入' + formItem.title"
							>
							<text class="unit" v-if="formItem.type == 'price'">元</text>
							<text class="unit" v-if="formItem.type == 'number' || formItem.type == 'day'">天</text>
						</view>
					</block>
					<block v-if="formItem.type == 'radio'">
						<view class="radio-flex">
							<view class="radio-title"><text v-if="formItem.is_required == 1">*</text>{{formItem.title}}</view>
							<radio-group @change="item.subVal[formItem.key] = $event.detail.value">
								<label class="radio-label" v-for="(radioItem, radioIndex) in formItem.options" :key="radioIndex">
									<radio class="radio-input" color="#446EFE" :checked="radioIndex === item.subVal[formItem.key]" :value="radioIndex"/>{{radioItem}}
								</label>
							</radio-group>
						</view>
					</block>
					<block v-if="formItem.type == 'checkbox'">
						<label class="block-item-label"><text v-if="formItem.is_required == 1">*</text>{{formItem.title}}(可多选)</label>
						<checkbox-group @change="item.subVal[formItem.key] = $event.detail.value">
							<label class="checkbox-item" v-for="(checkboxItem, checkboxIndex) in formItem.options">
								<checkbox class="checkbox-input" :value="checkboxIndex" color="#446EFE"></checkbox>{{checkboxItem}}
							</label>
						</checkbox-group>
					</block>
					<block v-if="formItem.type == 'select'">
						<label class="block-item-label"><text v-if="formItem.is_required == 1">*</text>{{formItem.title}}</label>
						<picker :range="formItem.options" :value="item.subVal[formItem.key]" @change="item.subVal[formItem.key] = $event.detail.value">
							<view class="institution-picker">
								<view class="institution-picker-text nowrap" :class="{'institution-picker-gray': item.subVal[formItem.key] == 0}">{{formItem.options[item.subVal[formItem.key]]}}</view>
								<u-icon size="12" color="#999" name="arrow-down-fill"></u-icon>
							</view>
						</picker>
					</block>
					<block v-if="formItem.type == 'textarea'">
						<label class="block-item-label"><text v-if="formItem.is_required == 1">*</text>{{formItem.title}}</label>
						<textarea
							class="textarea"
							:placeholder="'请输入' + formItem.title"
							v-model="item.subVal[formItem.key]"
						></textarea>
					</block>
					<block v-if="formItem.type == 'text'">
						<label class="block-item-label"><text v-if="formItem.is_required == 1">*</text>{{formItem.title}}</label>
						<view class="inputs-flex">
							<input
								class="text-input"
								v-model="item.subVal[formItem.key]"
								:placeholder="'请输入' + formItem.title"
							>
						</view>
					</block>
				</view>
			</view>
		</block>
		<view class="footer">
			<view class="footer-text">温馨提示：为了匹配最准确方案，请如实填写信息</view>
			<view class="footer-flex">
				<button @click="onAdd">添加新信息</button>
				<button @click="onSubmit">提交</button>
			</view>
		</view>
		<!-- 机构弹出层 -->
		<oct-mechanism-picker
			ref="institutionPicker"
			title="选择办理机构"
			:columns="columns"
			@choose="institutionChange"
		/>
	</view>
</template>

<script>
	import { institution, business, institutionType, submitStore } from '@/apis/interfaces/business.js';
	import { octpicker } from '@/components/oct-picker.vue'
	export default {
		components: { octpicker },
		data() {
			return {
				columns	   : [],
				businessArr: [],
				serviceUser: '',
				serviceArr : [],
				old		   : {},
				cIndex	   : 0
			};
		},
		created() {
			let { businessId, serviceUser, businessTitle } = this.$Route.query
			this.getInstitution(businessId, businessTitle)
			this.getBusiness()
			this.serviceUser = serviceUser
		},
		methods: {
			// 显示选择机构
			onShowInstitution(e, item, index){
				this.columns = e
				this.old	 = item
				this.cIndex	 = index
				this.$refs.institutionPicker.open()
			},
			// 移出选项
			onRemove(index){
				this.serviceArr.splice(index, 1)
			},
			// 获取主业务
			getBusiness(){
				business().then(res => {
					this.businessArr = res
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 获取主业务机构
			getInstitution(businessId, businessTitle){
				uni.showLoading({
					title: '加载中...'
				})
				institution(businessId).then(institutionArr => {
					let forms = this.getForms(institutionArr[0].institution_id)
					forms.then(val => {
						this.servicePush( val, institutionArr, businessTitle, businessId )
					})
					uni.hideLoading()
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 获取业务类型
			async getForms(businessId){
				
				return await institutionType(businessId)
			},
			// 组织业务表单数据
			servicePush( vals, institutionArr, businessTitle, businessId ){
				let fromType = [],
					fromsVal = {},
					froms	 = vals[0].params
					
				fromType = vals.map((val) => {
					return { 
						type_id: val.type_id,
						title : val.title
					}
				})
				froms.map(val => {
					if(val.type === 'checkbox'){
						fromsVal[val.key] = []
					}else if(val.type === 'select'){
						fromsVal[val.key] = 0
					}else {
						fromsVal[val.key] = ''
					}
				})
				// 新增卡片
				this.serviceArr.push({
					title			: businessTitle,
					institution		: institutionArr,
					allInstitution	: vals,
					institutionIndex: 0,
					fromType		: fromType,
					fromIndex		: 0,
					froms			: froms,
					subVal			: {
						business_id		: Number(businessId),
						institution_id	: institutionArr[0].institution_id,
						type_id			: fromType[0].type_id,
						...fromsVal
					}
				})
			},
			// 机构变更更新业务
			institutionChange(e){
				let index		= this.cIndex
				let old			= this.old
				let value 		= old.institution.findIndex(val => val.institution_id === e.val.institution_id);
				let businessId  = old.subVal.business_id

				// 获取机构的子业务类型
				let forms = this.getForms(old.institution[value].institution_id)
				forms.then(institutionVal => {
					let newObj 		= old
					let fromType	= []
					let params		= institutionVal[0].params
					let paramsVal	= []
					
					// 业务类型
					fromType = institutionVal.map(val => {
						return {
							type_id: val.type_id,
							title  : val.title
						}
					})
					// 提交字段
					params.map(val => {
						if(val.type === 'checkbox'){
							paramsVal[val.key] = []
						}else if(val.type === 'select'){
							paramsVal[val.key] = 0
						}else {
							paramsVal[val.key] = ''
						}
					})
					// 更新数据
					newObj.allInstitution	= institutionVal;
					newObj.institutionIndex = value;
					newObj.fromType			= fromType;
					newObj.fromIndex		= 0;
					newObj.froms			= params;
					newObj.subVal			= {
						business_id		: old.subVal.business_id,
						institution_id	: old.institution[value].institution_id,
						type_id			: fromType[0].type_id,
						...paramsVal
					}
					this.$set(this.serviceArr, index, newObj)
				})
			},
			// 业务变更
			businessChange(e, old, index){
				let { value } 		= e.detail;
				let businessId  	= old.subVal.business_id;
				let allInstitution	= old.allInstitution
				let newObj 			= old
				let params			= allInstitution[value].params
				let paramsVal		= {}
				params.map(val => {
					if(val.type === 'checkbox'){
						paramsVal[val.key] = []
					}else if(val.type === 'select'){
						paramsVal[val.key] = 0
					}else {
						paramsVal[val.key] = ''
					}
				})
				newObj.fromIndex		= value;
				newObj.froms			= params;
				newObj.subVal			= {
					business_id		: old.subVal.business_id,
					institution_id	: old.subVal.institution_id,
					type_id			: allInstitution[value].type_id,
					...paramsVal
				}
				this.$set(this.serviceArr, index, newObj)
			},
			// 添加主业务
			onAdd(){
				let businessTitle = this.businessArr.map(val => {
					return val.title
				})
				uni.showActionSheet({
					itemList: businessTitle,
					success	: res=> {
						let { tapIndex } = res;
						this.getInstitution(this.businessArr[tapIndex].business_id, businessTitle[tapIndex])
					}
				})
			},
			// 提交订单数据
			onSubmit(){
				let dataVal = this.serviceArr.map(val => {
					return val.subVal
				})
				if(this.serviceUser == ''){
					uni.showToast({
						title: '服务用户不能为空',
						icon : 'none'
					})
					return
				}
				uni.showLoading({
					title: '提交中...',
					mask : true
				})
				submitStore({
					type	: this.$Route.query.createType,
					user_id	: this.serviceUser,
					data	: dataVal,
					channel	: 'app'
				}).then(res => {
					uni.showModal({
						title		: '提示',
						content		: '订单已创建，请尽快提醒用户完善用户资料',
						showCancel	: false,
						success 	: () => {
							this.$Router.back()
						}
					})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding-top: 20rpx;
		padding-bottom: 260rpx;
	}
	// 表单模块
	.block{
		background: white;
		border-radius: $radius;
		margin: 0 30rpx 20rpx;
		padding: 30rpx;
		.block-title{
			font-weight: bold;
			line-height: 60rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.block-remove{
				background: rgba(68, 110, 254, .1);
				color: #446EFE;
				font-size: 28rpx;
				font-weight: normal;
				height: 50rpx;
				line-height: 50rpx;
				border-radius: 25rpx;
				padding: 0 25rpx 0 20rpx;
				&-icon{
					display: inline-block;
					margin-right: 10rpx;
					margin-bottom: 5rpx;
					vertical-align: middle;
				}
			}
		}
		.block-item{
			padding: 15rpx 0;
			&-label{
				padding-bottom: 10rpx;
				display: block;
				font-size: 30rpx;
				color: #111111;
				text{
					color: #FF0000;
					font-size: 28rpx;
					margin-right: 10rpx;
				}
			}
			// picker
			.institution-picker{
				background: #F6F6F6;
				height: 84rpx;
				line-height: 84rpx;
				border-radius: 10rpx;
				padding: 0 30rpx 0 30rpx;
				font-size: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				&-text{
					width: calc( 100% - 60rpx );
				}
				&-gray{
					color: gray;
				}
			}
			// input
			.inputs-flex{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.input{
					background: #F6F6F6;
					height: 84rpx;
					line-height: 84rpx;
					border-radius: 10rpx;
					padding: 0 30rpx 0 30rpx;
					font-size: 30rpx;
					box-sizing: border-box;
					width: calc( 100% - 64rpx );
				}
				.unit{
					width: 64rpx;
					text-align: right;
				}
				.text-input{
					background: #F6F6F6;
					height: 84rpx;
					line-height: 84rpx;
					border-radius: 10rpx;
					padding: 0 30rpx 0 30rpx;
					font-size: 30rpx;
					box-sizing: border-box;
					width: 100%;
				}
			}
			// radio
			.radio-flex{
				display: flex;
				justify-content: space-between;
				padding: 10rpx 0;
				.radio-title{
					font-size: 30rpx;
					color: #111111;
					text{
						color: #FF0000;
						font-size: 28rpx;
						margin-right: 10rpx;
					}
				}
				.radio-label{
					margin-left: 20rpx;
					color: #999999;
					.radio-input{
						transform:scale(0.7);
					}
				}
			}
			// checkbox
			.checkbox-item{
				display: block;
				color: #999999;
				line-height: 70rpx;
				.checkbox-input{
					transform:scale(0.7);
					vertical-align: middle;
					margin-top: -5rpx;
				}
			}
			// textarea
			.textarea{
				background: #F6F6F6;
				width: 100%;
				height: 200rpx;
				border-radius: 10rpx;
				padding: 20rpx 30rpx;
				font-size: 30rpx;
				line-height: 40rpx;
				box-sizing: border-box;
			}
		}
	}
	// footer
	.footer{
		box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, .05);
		background-color: white;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99;
		padding: 30rpx 30rpx 70rpx;
		.footer-text{
			text-align: center;
			font-weight: bold;
			font-size: 28rpx;
			color: #FEA044;
			line-height: 40rpx;
			padding-bottom: 30rpx;
		}
		.footer-flex{
			display: flex;
			margin: 0 -10rpx;
			button{
				width: calc(50% - 20rpx);
				margin: 0 10rpx;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: $radius-lg;
				font-size: 32rpx;
				border:solid 1rpx $main-color;
				background-color: white;
				color: $main-color;
				&::after{
					border: none;
				}
				&:last-child{
					background-color: $main-color;
					color: white;
				}
			}
		}
	}
</style>
