<template>
	<view class="content">
		<view class="idcard">
			<view class="idcardInfo-name">
				{{userData.nickname}}
			</view>
			<view class="idcardInfo-label">
				{{userData.username}}
			</view>
		</view>
		
		<view class="idcardBorder">
			<view class="idcardTitle">
				添加基本信息
			</view>
			<!-- 信用卡信息 -->
			<block v-if="serviceArr.length > 0">
				<view class="idcardAdd" v-for="(item, index) in serviceArr" :key="index">
					<view class="idcardBottom" :class="{active : item.openState}">
						<!-- 机构 -->
						<view class="idcardAdd-block">
							<view class="idcardAdd-block-name">
								<view class="idcardAdd-block-see">
									<text>*</text>{{item.subVal.business_id == 1 ? '信用卡' : '贷款'}}
								</view>
								<view class="locationActive" v-if="!item.openState">
									<text>{{item.institution[item.institutionIndex].title}}</text>
									<text>{{item.fromType[item.fromIndex].title}}</text>
								</view>
							</view>
							<view class="idcardAdd-block-write">
								
								<!-- 新筛选 带搜索 -->
								<view class="idcardAdd-picker" style="width: 100%;" @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>
								
								<!-- 老筛选备份 -->
								<!-- <picker :value="item.institutionIndex" @change="institutionChange($event, item, index)" :range="item.institution" range-key="title">
									<view class="uni-input">{{item.institution[item.institutionIndex].title}}</view>
								</picker> -->
								
								<image src="@/static/imgs/basic_down.png" mode="aspectFill"></image>
							</view>
							<view class="idcardAdd-block-remove" @click="onRemove(index)" v-if="serviceArr.length > 1">
								<image src="@/static/imgs/removeIcon.png" mode="widthFix"></image>移出
							</view>
						</view>
						
						<!-- 业务类型 -->
						<view class="idcardAdd-block">
							<view class="idcardAdd-block-name">
								<view class="idcardAdd-block-see">
									<text>*</text>业务类型
								</view>
							</view>
							<view class="idcardAdd-block-write">
								<picker class="idcardAdd-picker" :range="item.fromType" range-key="title" :value="item.fromIndex" @change="businessChange($event, item, index)">
									<view class="institution-picker-text nowrap">{{item.fromType[item.fromIndex].title}}</view>							
								</picker>
								<!-- <mouldPicker class="idcardAdd-picker" ref="child" :bank-list="item.fromType" :bank-value="item.fromIndex" @bankPicker="businessChange($event, item, index)"></mouldPicker> -->
								<image src="@/static/imgs/basic_down.png" mode="aspectFill"></image>
							</view>
						</view>
						
						<!-- 表单部分 -->
						<block v-for="(keyItem, keyIndex) in item.froms" :key="keyIndex" v-if="item.subVal[keyIndex.pre_key] == keyIndex.pre_value">
							<view class="idcardAdd-block" v-if="keyItem.pre_key == null || keyItem.pre_value == item.subVal[keyItem.pre_key]">
								<view class="idcardAdd-block-name">
									<view class="idcardAdd-block-see">
										<text>*</text>{{keyItem.title}}
									</view>
								</view>
								
								<!-- 单输入框 -->
								<view class="idcardAdd-block-write" v-if="keyItem.type === 'price' || keyItem.type === 'number' || keyItem.type === 'day' || keyItem.type === 'text'">
									<mouldInput :blur-value="item.subVal[keyItem.key]" class="idcardAdd-input" :input-type="keyItem.type" @onValue="($event) => {item.subVal[keyItem.key] = $event}"></mouldInput>
								</view>
								
								<!-- 单选 -->
								<view class="idcardAdd-aline" v-if="keyItem.type === 'radio'">
									<radio-group @change="item.subVal[keyItem.key] = $event.detail.value">
										<label class="idcardAdd-aline-write" v-for="(radioItem, radioIndex) in keyItem.options" :key="radioIndex">
											<radio class="radio-input" color="#446EFE" style="transform:scale(.65)" :checked="radioIndex === item.subVal[keyItem.key]" :value="radioIndex"/>{{radioItem}}
										</label>
									</radio-group>
									<!-- <mouldRadio :radio-list="keyItem.options" @onRadio="($event) => {item.subVal[keyItem.key] = $event}"></mouldRadio> -->
								</view>
								
								<!-- 多选 -->
								<block v-if="keyItem.type === 'checkbox'">
									<!-- <checkbox-group @change="item.subVal[keyItem.key] = $event.detail.value">
										<view class="idcardAdd-multi-write" v-for="(letterItem, letterIndex) in keyItem.options" :key="letterIndex">
											<checkbox :value="letterIndex.toString()" color="#4e7bfe" style="transform:scale(.6); margin-top: -3rpx;"/>
											<text>{{letterItem}}</text>
										</view>
									</checkbox-group> -->
									<mouldCheckbox :checkbox-list="keyItem.options" :checkbox-vlaue="item.subVal[keyItem.key] || []" @onCheckbox="($event) => {item.subVal[keyItem.key] = $event}"></mouldCheckbox>
								</block>
								
								<!-- 下拉框 -->
								<view class="idcardAdd-block-write" v-if="keyItem.type === 'select'">
									<picker class="idcardAdd-picker" :value="item.subVal[keyItem.key] ? item.subVal[keyItem.key] : '0'" :range="keyItem.options" @change="item.subVal[keyItem.key] = $event.detail.value">
										<view class="uni-input" v-if="item.subVal[keyItem.key]">{{keyItem.options[item.subVal[keyItem.key]]}}</view>
										<view class="uni-input" v-else>{{keyItem.options[0]}}</view>
									</picker>
									<image src="@/static/imgs/basic_down.png" mode="aspectFill"></image>
								</view>
								
								<!-- 描述 -->
								<view class="idcardAdd-block-write idcardAdd-depict" v-if="keyItem.type === 'textarea'">
									<mouldText class="idcardAdd-depict-textarea" :blur-value="item.subVal[keyItem.key]" @onTextarea="($event) => {item.subVal[keyItem.key] = $event}"></mouldText>
								</view>
								
							</view>
						</block>
					</view>
					
					<view class="open">
						<view class="open-text" @click="recordTap(index)">
							<image src="@/static/imgs/openArrow.png" mode="widthFix" :class="{active : item.openState}"></image>{{item.openState ? '收起' : '展开'}}
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="noContent">
					<image class="noContent-img" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/010d64c0ddbfd5e02030502a39109e8f.png" mode="widthFix"></image>
					<view class="noContent-name">
						什么都没有，好无聊......
					</view>
					<view class="noContent-btn" @click="addTypePop = true">
						添加新信息
					</view>
				</view>
			</block>
		</view>
		<view class="reminder">
			<image class="reminder-img" src="@/static/imgs/reminderIcon.png"></image>
			<view class="reminder-text">温馨提示：为了匹配最准确方案，请如实填写信息</view>
		</view>
		<view class="idcardBtn">
			<view class="idcardBtn-go active" @click="addTypePop = true">
				添加新信息
			</view>
			<view class="idcardBtn-go" @click="onSubmit">
				确认提交
			</view>
		</view>
		
		<!-- 选择添加类型 -->
		<view class="addType-back" v-if="addTypePop"></view>
		<view class="addType-cont" v-if="addTypePop">
			<view class="addType-title">
				请选择业务类型
			</view>
			<block v-for="(item, index) in businessArr" :key="index">
				<view class="create-type-item" :class="{'active': item.business_id == businessId}" @click="onAdd(item.business_id, item.title)">
					<image class="create-type-icon" :src="item.cover_url" mode="aspectFill"></image>
					<view class="create-type-text">
						<view class="title nowrap">{{item.title || '-'}}</view>
						<view class="submit nowrap">{{item.subtitle || '-'}}</view>
					</view>
				</view>
			</block>
			<image class="addType-close" src="/static/imgs/payClose.png" mode="aspectFill" @click="addTypePop = false"></image>
		</view>
		
		<!-- 机构筛选弹出层 -->
		<oct-mechanism-picker
			ref="institutionPicker"
			title="选择办理机构"
			:columns="columns"
			@choose="institutionChange"
		/>
	</view>
</template>

<script>
	import { workIndex, workOne, workLevel, workStore } from '@/apis/interfaces/index'
	import { userBasic } from '@/apis/interfaces/user'
	
	import mouldCheckbox from '@/components/mould-checkbox.vue'
	import mouldInput from '@/components/mould-input.vue'
	import mouldRadio from '@/components/mould-radio.vue'
	import mouldText from '@/components/mould-text.vue'
	import mouldPicker from '@/components/mould-picker.vue'
	export default {
		components: {
			mouldCheckbox,
			mouldInput,
			mouldRadio,
			mouldText,
			mouldPicker
		},
		data() {
			return {
				businessArr: [],
				businessId : '',
				serviceArr : [],
				addTypePop : false,
				userData   : '',
				reminder   : '',  // 温馨提示
				
				// 新增部分-机构筛选
				columns	   : [],
				old		   : {},
				cIndex	   : 0
			}
		},
		created() {
			let { businessId, businessTitle } = this.$Route.query
			this.getInstitution(businessId, businessTitle)
			this.getBusiness()
		},
		
		onShow() {
			// 获取用户姓名手机号性别
			userBasic().then(res => {
				this.userData = res
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		
		methods: {
			
			// 显示选择机构 -- 带搜索
			onShowInstitution(e, item, index){
				this.columns = e
				this.old	 = item
				this.cIndex	 = index
				this.$refs.institutionPicker.open()
			},
			
			// 获取主业务
			getBusiness(){
				workIndex().then(res => {
					this.businessArr = res
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			
			// 获取主业务机构
			getInstitution(businessId, businessTitle){
				uni.showLoading({
					title: '加载中...'
				})
				workOne(businessId).then(institutionArr => {
					let forms = this.getForms(institutionArr[0].institution_id)
					forms.then(val => {
						this.servicePush( val, institutionArr, businessTitle, businessId )
					})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 获取业务类型
			async getForms(businessId){
				return await workLevel(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 => {
					fromsVal[val.key] = ''
				})
				
				// 新增卡片
				this.serviceArr.push({
					title			: businessTitle,
					institution		: institutionArr,
					allInstitution	: vals,
					institutionIndex: 0,
					fromType		: fromType,
					openState		: false,
					fromIndex		: 0,
					froms			: froms,
					subVal			: {
						business_id		: Number(businessId),
						institution_id	: institutionArr[0].institution_id,
						type_id			: fromType[0].type_id,
						...fromsVal
					}
				})
				this.serviceArr.forEach((item, index) => {
					return index == (this.serviceArr.length - 1) ? item.openState = true : item.openState = false
				})
			},
			
			// 机构变更更新业务
			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 => {
						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 => {
					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(id, title){
				this.addTypePop = false
				this.getInstitution(id, title)
			},
			
			// 列表展开
			recordTap(index) {
				var listData = this.serviceArr
				var helpFlag = this.serviceArr[index].openState
				listData.forEach((item) => {
					item.openState = false
				})
				listData[index].openState = !helpFlag
				this.serviceArr = listData
			},
			
			// 移出选项
			onRemove(index){
				this.serviceArr.splice(index, 1)
			},
			
			// 提交订单数据
			onSubmit(){
				let dataVal = this.serviceArr.map(val => {
					return val.subVal
				})
				workStore({
					type   : 'self',
					data   : dataVal,
					channel: 'h5'
				}).then(res => {
					this.$Router.push({name: 'sheetPay', params: {id: res.business_order_id}})
				}).catch( err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			
			// 多选
			checkboxChange() {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.idcardBorder {
		border-bottom: 200rpx solid transparent;
		background-color: #ffffff;
		border-radius: $radius * 2 $radius * 2 0 0;
		position: relative;
		padding: $padding;
		box-sizing: border-box;
		top: -100rpx;
	}
	.idcard {
		margin-bottom: $margin * 2;
		background-color: $mian-color;
		color: #ffffff;
		display: flex;
		padding: $padding * 2 $padding $padding * 3;
		.idcardInfo-name {
			flex: 1;
		}
	}
	.idcardTitle {
		color: $mian-color;
		font-size: $title-size + 4;
		font-weight: 600;
		margin-bottom: $margin;
	}
	.idcardAdd {
		background-color: #ffffff;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, .1);
		border-radius: $radius;
		padding: $padding;
		box-sizing: border-box;
		margin-bottom: $margin;
		overflow: hidden;
		position: relative;
		&:last-child {
			margin-bottom: 0;
		}
		.idcardAdd-title {
			display: flex;
			.idcardAdd-name {
				flex: 1;
				color: #446EFE;
				font-weight: 600;
			}
			.idcardAdd-tel {
				display: flex;
				font-size: $title-size-sm;
				background-color: #ffeded;
				color: #FF0000;
				border-radius: $radius;
				padding: 0 15rpx 0 10rpx;
				line-height: 44rpx;
				.idcardAdd-btn {
					width: 32rpx;
					height: 32rpx;
					margin: 7rpx 6rpx 0 0;
				}
			}
		}
		.idcardBottom {
			height: 45rpx;
			transition: .5s;
			border-bottom: 100rpx solid transparent;
			&.active {
				height: auto;
			}
		}
		.idcardAdd-block {
			margin-bottom: $margin + 10;
			position: relative;
			.idcardAdd-block-name {
				margin-bottom: $margin;
				display: flex;
				.idcardAdd-block-see {
					color: $text-color;
					font-weight: 600;
					margin-right: $margin;
					text {
						color: $mian-color;
						padding-right: 10rpx;
					}
				}
			}
			.idcardAdd-block-write {
				background-color: #F6F6F6;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: $radius-sm;
				padding: 0 $padding;
				box-sizing: border-box;
				position: relative;
				display: flex;
				width: 100%;
				picker {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					padding: 0 $padding;
					box-sizing: border-box;
				}
				.idcardAdd-input {
					width: 100%;
					height: 100%;
					display: flex;
				}
				.placeholderClass {
				   color: #999999;
				}
				image {
					width: 24rpx;
					height: 24rpx;
					position: absolute;
					top: $margin;
					right: $margin;
				}
			}
			&:last-child {
				margin-bottom: 0;
			}
			
			.idcardAdd-block-remove {
				background-color: #FBE7EE;
				display: inline-block;
				color: $mian-color;
				position: absolute;
				font-size: $title-size-sm;
				padding: 0 $padding - 10;
				line-height: 44rpx;
				border-radius: 50rpx;
				top: 0;
				right: 0;
				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 10rpx;
					vertical-align: -2rpx;
				}
			}
		}
		.open {
			text-align: center;
			position: absolute;
			width: 100%;
			background-color: #ffffff;
			z-index: 2;
			left: 0;
			bottom: 0;
			padding: $padding 0;
			.open-text {
				background-color: #FBE7EE;
				display: inline-block;
				color: $mian-color;
				padding: 0 $padding - 10;
				line-height: 58rpx;
				font-size: $title-size-m;
				border-radius: $radius-sm;
				image {
					width: 22rpx;
					height: 22rpx;
					margin-right: 10rpx;
					transition: .2s;
					&.active {
						transform:rotate(180deg)
					}
				}
			}
		}
		.idcardAdd-aline {
			display: flex;
			position: absolute;
			right: 0;
			top: 0;
			.idcardAdd-picker {
				width: 100%;
				height: 100%;
			}
			image {
				width: 24rpx;
				height: 24rpx;
				position: absolute;
				top: $margin;
				right: $margin;
			}
		}
		.idcardAdd-aline-name {
			flex: 1;
			text {
				color: $mian-color;
				padding-right: 10rpx;
			}
		}
		.idcardAdd-depict {
			line-height: 28rpx !important;
			height: auto !important;
			position: relative;
			.idcardAdd-depict-number {
				position: absolute;
				text-align: right;
				bottom: $padding;
				right: $padding;
				color: #999999;
				font-size: $title-size-sm;
			}
			.idcardAdd-depict-textarea {
				padding: $padding 0;
				box-sizing: border-box;
			}
		}
	}
	
	.noContent {
		text-align: center;
		padding-top: $padding * 5;
		.noContent-img {
			width: 43%;
			margin: 0 auto;
		}
		.noContent-name {
			line-height: 60rpx;
			color: #999999;
			font-size: $title-size-lg;
		}
		.noContent-btn {
			display: inline-block;
			background-color: #ff7331;
			color: #ffffff;
			border-radius: $radius * 5;
			text-align: center;
			font-size: $title-size-lg;
			padding: 0 $padding + 10;
			line-height: 78rpx;
			margin-top: $margin + 10;
		}
	}
	
	.reminder {
		position: fixed;
		left: 0;
		bottom: 150rpx;
		background-color: #ffffff;
		z-index: 10;
		width: 100%;
		box-sizing: border-box;
		padding: 25rpx $padding;
		box-sizing: border-box;
		display: flex;
		color: #FEA044;
		font-size: $title-size-lg;
		border-bottom: 2rpx solid #f5f5f5;
		.reminder-img {
			width: 32rpx;
			height: 32rpx;
			margin-top: 8rpx;
		}
		.reminder-text {
			width: calc(100% - 52rpx);
			font-size: $title-size-m;
			margin-left: 20rpx;
			line-height: 42rpx;
		}
	}
	
	.idcardBtn {
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #ffffff;
		z-index: 9;
		width: 100%;
		height: 150rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		.idcardBtn-go {
			width: calc(50% - 20rpx);
			margin: $margin 10rpx;
			background-color: $mian-color;
			color: #ffffff;
			border-radius: $radius-lg;
			height: 90rpx;
			line-height: 90rpx;
			font-size: $title-size;
			text-align: center;
			border: 2rpx solid #ffffff;
			&.active {
				background-color: #ffffff;
				border-color: $mian-color;
				color: $mian-color;
			}
		}
	}
	
	// 业务类型
	.addType-back {
		background-color: rgba(0, 0, 0, .6);
		position: fixed;
		width: 100vw;
		height: 100vh;
		left: 0;
		top: 0;
		z-index: 99;
	}
	.addType-cont {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 100;
		width: 100%;
		background-color: #ffffff;
		padding: $padding $padding + 10;
		box-sizing: border-box;
		transition: .2s;
		.addType-close {
			position: absolute;
			right: 30rpx;
			top: 40rpx;
			width: 38rpx;
			height: 38rpx;
		}
		.addType-title {
			line-height: 60rpx;
			margin-bottom: $margin + 10;
			font-size: $title-size + 2;
		}
		.addType-type {
			padding: $padding;
			box-sizing: border-box;
		}
		.create-type-item {
			border-radius: $radius-m;
			padding: $padding;
			box-sizing: border-box;
			margin-bottom: 30rpx;
			border:solid 1rpx #f8f8f8;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			box-shadow: 0 0 5rpx rgba(0, 0, 0, .05);
			position: relative;
			.create-type-icon{
				width: 88rpx;
				height: 88rpx;
				margin-right: $margin;
				background-color: white;
				border-radius: $radius;
			}
			.create-type-text{
				line-height: 50rpx;
				.title{
					font-size: 30rpx;
				}
				.submit{
					color: gray;
					font-size: 26rpx;
				}
			}
		}
		.addType-btn {
			display: flex;
			padding: $padding + 10 $padding - 10 10rpx;
			box-sizing: border-box;
			.addType-labor {
				flex: 2;
				margin: 0 $margin - 10;
				text-align: center;
				background-color: #FEA044;
				color: #ffffff;
				border-radius: $radius-m;
				line-height: 74rpx;
				font-size: $title-size-lg;
				border: 2rpx solid #FEA044;
				&:first-child {
					background-color: #ffffff;
					color: #FEA044;
				}
			}
		}
	}
	
	// 收起定位样式
	.locationActive {
		display: inline-block;
		text {
			display: inline-block;
			background-color: #FFF7EB;
			color: #FBAF3B !important;
			font-weight: normal;
			font-size: $title-size-sm;
			margin-left: $margin - 10;
			border-radius: $radius*3;
			padding: 0 $padding - 10 !important;
			height: 48rpx;
			line-height: 48rpx;
		}
	}
</style>