<template>
	<view class="content">
		<!-- 银行基础信息 -->
		<view class="block header-flex">
			<image class="header-logo" :src="baseInfo.cover" mode="aspectFit"></image>
			<view class="header-text">
				<view class="title">{{baseInfo.title}}</view>
				<view class="type">{{baseInfo.type}}</view>
			</view>
		</view>
		<!-- 表单 -->
		<view class="block form">
			<block
				v-for="(item, index) in params"
				:key="index"
				v-if="item.pre_key != null ? isShowBlock(params, item): true"
			>
				<view class="from-item" :class="item.flex == 50 ? 'from-item-50': 'from-item-100'">
					<block v-if="item.type == 'text' || item.type == 'region'">
						<label>
							<text v-if="item.is_required === 1">*</text>{{item.title}}
							<uni-icons v-if="item.reason.description" class="from-icon" type="info" size="18" color="red" @click="modifyToast(item.reason.description)"></uni-icons>
						</label>
						<input class="from-input" v-model="item.value" :type="item.type" :placeholder="item.placeholder || '请输入'">
					</block>
					<!-- mobile -->
					<block v-if="item.type == 'price' || item.type == 'number' || item.type == 'mobile' ||  item.type == 'day'">
						<label>
							<text v-if="item.is_required === 1">*</text>{{item.title}}
							<uni-icons v-if="item.reason.description" class="from-icon" type="info" size="18" color="red" @click="modifyToast(item.reason.description)"></uni-icons>
						</label>
						<input class="from-input" v-model="item.value" type="number" :placeholder="item.placeholder || '请输入'">
					</block>
					<!-- password -->
					<block v-if="item.type == 'password'">
						<label>
							<text v-if="item.is_required === 1">*</text>{{item.title}}
							<uni-icons v-if="item.reason.description" class="from-icon" type="info" size="18" color="red" @click="modifyToast(item.reason.description)"></uni-icons>
						</label>
						<input class="from-input" v-model="item.value" type="safe-password" password :placeholder="item.placeholder || '请输入'">
					</block>
					<!-- date -->
					<block v-if="item.type == 'date'">
						<label>
							<text v-if="item.is_required === 1">*</text>{{item.title}}
							<uni-icons v-if="item.reason.description" class="from-icon" type="info" size="18" color="red" @click="modifyToast(item.reason.description)"></uni-icons>
						</label>
						<picker class="from-picker" mode="date" :value="item.value" @change="item.value = $event.detail.value">
							<view class="from-picker-text">
								<view class="text nowrap" :class="{'text-gray': item.value == ''}">{{item.value || '选择日期'}}</view>
								<u-icon class="icon" name="calendar" color="#999" size="20"></u-icon>
							</view>
						</picker>
					</block>
					<!-- radio -->
					<block v-if="item.type == 'radio'">
						<view class="from-radio">
							<label>
								<text v-if="item.is_required === 1">*</text>{{item.title}}
								<uni-icons v-if="item.reason.description" class="from-icon" type="info" size="18" color="red" @click="modifyToast(item.reason.description)"></uni-icons>
							</label>
							<radio-group @change="item.value = $event.detail.value">
								<label class="from-radio-labe" v-for="(radioItem, radioIndex) in item.options" :key="radioIndex">
									<radio :value="radioIndex" :checked="item.value === radioIndex" color="#446EFE" /><text>{{radioItem}}</text>
								</label>
							</radio-group>
						</view>
					</block>
					<!-- checkbox -->
					<block v-if="item.type == 'checkbox'">
						<label>
							<text v-if="item.is_required === 1">*</text>{{item.title}}
							<uni-icons v-if="item.reason.description" class="from-icon" type="info" size="18" color="red" @click="modifyToast(item.reason.description)"></uni-icons>
						</label>
						<checkbox-group @change="item.value = $event.detail.value">
							<label class="checkbox-item" v-for="(checkboxItem, checkboxIndex) in item.options">
								<checkbox class="checkbox-input" :checked="isChecked(checkboxIndex, item.value)" :value="checkboxIndex" color="#446EFE"></checkbox>{{checkboxItem}}
							</label>
						</checkbox-group>
					</block>
					<!-- select -->
					<block v-if="item.type == 'select'">
						<label>
							<text v-if="item.is_required === 1">*</text>{{item.title}}
							<uni-icons v-if="item.reason.description" class="from-icon" type="info" size="18" color="red" @click="modifyToast(item.reason.description)"></uni-icons>
						</label>
						<picker class="from-picker" :range="item.options" :value="item.value" @change="item.value = $event.detail.value">
							<view class="from-picker-text">
								<view class="nowrap" :class="{'text-gray': item.value == 0}">{{item.options[item.value]}}</view>
								<u-icon class="icon" name="arrow-down-fill" color="#999" size="10"></u-icon>
							</view>
						</picker>
					</block>
					<!-- textarea -->
					<block v-if="item.type == 'textarea'">
						<label>
							<text v-if="item.is_required === 1">*</text>{{item.title}}
							<uni-icons v-if="item.reason.description" class="from-icon" type="info" size="18" color="red" @click="modifyToast(item.reason.description)"></uni-icons>
						</label>
						<view class="from-textarea">
							<textarea v-model="item.value" :maxlength="item.number" :placeholder="item.placeholder"></textarea>
							<view class="from-number">{{item.value.length}}/{{item.number}}</view>
						</view>
					</block>
				</view>
			</block>
		</view>
		<!-- 提交数据 -->
		<view class="form-btns">
			<button size="default" @click="onSubmit('local')">暂时保存</button>
			<button size="default" @click="onSubmit('serve')">提交审核</button>
		</view>
	</view>
</template>

<script>
	import { baseBase, updBaseBase, historyBank } from '@/apis/interfaces/order.js'
	export default {
		data() {
			return {
				submitId: '',
				baseInfo: {
					cover: '',
					title: '',
					type : ''
				},
				params  : []
			};
		},
		computed: {
			isChecked(){
				return (val, vals) => {
					let valsArr = vals || []
					return valsArr.findIndex(v => v == val) >= 0
				}
			},
			isShowBlock(){
				return (params, item) => {
					if(item.pre_key != null){
						let paramsValue = params.find(v => v.key == item.pre_key)
						return paramsValue.value == item.pre_value
					}
					return true
				}
			}
		},
		created() {
			// 获取银行机构信息
			this.getBaseBase()
		},
		methods: {
			// 银行机构信息
			getBaseBase(){
				uni.showLoading({
					title: '加载中...',
					mask : true
				})
				baseBase(this.$Route.query.itemId).then(res => {
					let { item, params, business_order_user_bank_id } = res;
					uni.getStorage({
						key		: 'institutions' + this.$Route.query.itemId,
						success	: StorageRes => {
							let { data } 	  = StorageRes
							let storageParams = []
							storageParams = params.map(val => {
								if(val.type == 'checkbox' && data[val.key].length > 0){
									val.value = data[val.key]
									return val
								}
								val.value = data[val.key]
								return val
							})
							this.params = storageParams
						},
						fail	: StorageErr => {
							this.params = params
						},
						complete: () => {
							this.baseInfo = {
								cover: item.institution.cover,
								title: item.institution.title,
								type : item.business_type.title
							}
							this.submitId = business_order_user_bank_id
							uni.hideLoading()
						}
					})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 提交银行资料
			onSubmit(type){
				uni.showLoading({
					title: '加载中...',
					mask : true
				})
				let subData = {};
				let dataArr = [];
				for(let val of this.params){
					if(val.type == 'checkbox'){
						subData[val.key] = val.value || []
					} else subData[val.key] = val.value
				}
				if(type === 'local'){
					uni.setStorage({
						key		: 'institutions' + this.$Route.query.itemId,
						data	: subData,
						success	: res => {
							uni.showToast({
								title: '机构信息已暂存',
								icon : 'none'
							})
						}
					})
					return
				}
				uni.hideLoading()
				// 提交数据提示
				uni.showModal({
					title		: '提示',
					content		: '请确认资料无误，提交后在审核期间不可更改',
					cancelText	: '稍后',
					confirmText : '确认无误',
					success		: ModalRes => {
						if(ModalRes.confirm){
							uni.showLoading({
								title: '提交中...',
								mask : true
							})
							// 组织提交数据
							for(let key in subData){
								dataArr.push({
									key,
									value: subData[key]
								})
							}
							updBaseBase(this.submitId, {
								data: dataArr
							}).then(res => {
								uni.hideLoading()
								uni.showModal({
									title		: '提示',
									content		: '机构资料已保存',
									showCancel	: false,
									success		: ModalRes => {
										uni.removeStorageSync('institutions' + this.$Route.query.itemId)
										this.$Router.back()
									}
								})
							}).catch(err => {
								uni.showToast({
									title: err.message,
									icon : 'none'
								})
							})
						}
					}
				})
			},
			// 修改提示信息
			modifyToast(text){
				uni.showModal({
					title		: '驳回原因',
					content		: text || '-',
					showCancel	: false,
				})
			}
		},
		onBackPress() {
			this.onSubmit('local')
		},
		onNavigationBarButtonTap() {
			let { userBankId, isMy} = this.$Route.query
			if(!isMy) {
				uni.showToast({
					title: '非个人订单无法使用账户信息',
					icon : 'none'
				})
				return
			}
			if(!userBankId.user_bank_id) {
				uni.showToast({
					title: '暂无历史记录，无法使用账户历史信息，请手动填写',
					icon : 'none'
				})
				return
			}
			uni.showModal({
				title		: '提示',
				content		: '确认使用历史基础信息快捷提交审核吗？提交后在审核期间不可更改',
				confirmText	: '提交审核',
				cancelText	: '取消',
				success		: res => {
					if(res.confirm){
						uni.showLoading({
							title: '提交中...',
							mask : true
						})
						historyBank(this.submitId, userBankId.user_bank_id).then(res => {
							uni.hideLoading()
							uni.showModal({
								title		: '提示',
								content		: '资料已保存',
								showCancel	: false,
								success		: ModalRes => {
									this.$Router.back()
								}
							})
						}).catch(err => {
							uni.showToast({
								title: err.message,
								icon : 'none'
							})
						})
					}
				} 
			})
		}
	}
</script>

<style lang="scss">
	.content{
		padding-top: 1rpx;
		box-sizing: border-box;
	}
	.block{
		background: white;
		margin: 30rpx 30rpx;
		border-radius: 20rpx;
	}
	// 表单按钮
	.form-btns{
		padding: 0 15rpx 50rpx;
		display: flex;
		button[size="default"]{
			width: calc(50% - 30rpx);
			margin: 0 15rpx;
			color: white;
			height: 100rpx;
			line-height: 100rpx;
			background-color: $main-color;
			padding: 0;
			border-radius: 20rpx;
			font-size: 34rpx;
			&:first-child{
				line-height: 98rpx;
				box-sizing: border-box;
				background-color: white;
				color: $main-color;
				border:solid 1rpx $main-color;
			}
			&::after{
				display: none;
			}
		}
	}
	// 表单
	.form{
		padding: 10rpx 15rpx 40rpx;
		display: flex;
		flex-wrap: wrap;
		flex-direction: flex-start;
		align-content: flex-start;
		.from-item{
			margin: 30rpx 15rpx 0;
			label{
				color: #111111;
				font-size: 30rpx;
				padding-bottom: 20rpx;
				display: block;
				& > text{
					color: #FF0101;
					margin-right: 5rpx;
					display: inline-block;
				}
				.from-icon{
					vertical-align: top;
					margin-left: 10rpx;
				}
			}
			&.from-item-50{
				width: calc(50% - 30rpx);
			}
			&.from-item-100{
				width: calc(100% - 30rpx);
			}
			// input
			.from-input{
				background: #F6F6F6;
				width: 100%;
				height: 90rpx;
				border-radius: 10rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				font-size: 30rpx;
			}
			// textarea
			.from-textarea{
				padding: 20rpx 30rpx;
				background: #F6F6F6;
				width: 100%;
				box-sizing: border-box;
				border-radius: 10rpx;
				textarea{
					font-size: 30rpx;
					line-height: 50rpx;
					height: 150rpx;
					width: 100%;
				}
				.from-number{
					padding-top: 20rpx;
					text-align: right;
					font-size: 30rpx;
					color: gray;
				}
			}
			// radio
			.from-radio{
				width: 100%;
				box-sizing: border-box;
				font-size: 30rpx;
				height: 60rpx;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.from-radio-labe{
					display: inline-block;
					margin-left: 20rpx;
					radio{
						transform:scale(0.7)
					}
					text{
						color: #999999;
					}
				}
			}
			// picker
			.from-picker{
				.from-picker-text{
					position: relative;
					background: #F6F6F6;
					width: 100%;
					height: 90rpx;
					line-height: 90rpx;
					border-radius: 10rpx;
					font-size: 30rpx;
					padding: 0 30rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;
					& > .text{
						width: calc(100% - 80rpx);
					}
					& > .text-gray{
						color: gray;
					}
				}
			}
			// checkbox
			.checkbox-item{
				display: block;
				color: #999999;
				line-height: 70rpx;
				.checkbox-input{
					transform:scale(0.7);
					vertical-align: middle;
					margin-top: -5rpx;
				}
			}
		}
	}
	// header
	.header-flex{
		padding: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		.header-logo{
			width: 88rpx;
			height: 88rpx;
		}
		.header-text{
			width: calc(100% - 128rpx);
			.title{
				font-weight: bold;
				line-height: 40rpx;
				font-size: 32rpx;
				margin-bottom: 10rpx;
			}
			.type{
				font-size: 26rpx;
				height: 40rpx;
				line-height: 40rpx;
				color: $main-color;
				background: #ECF0FF;
				display: inline-block;
				padding: 0 15rpx;
				border-radius: 20rpx;
			}
		}
	}
</style>
