<template>
	<view class="content">
		<block v-if="!loding">
			<view class="from">
				<view class="from-item from-item-50">
					<label><text>*</text>姓名</label>
					<input class="from-input" disabled v-model="baseInfo.name" type="text" placeholder="真实姓名">
				</view>
				<view class="from-item from-item-50">
					<label><text>*</text>性别</label>
					<input class="from-input" disabled v-model="baseInfo.sex" type="text" placeholder="性别">
				</view>
				<view class="from-item from-item-50">
					<label><text>*</text>年龄</label>
					<input class="from-input" disabled v-model="baseInfo.age" type="text" placeholder="年龄">
				</view>
				<view class="from-item from-item-50">
					<label><text>*</text>属相</label>
					<input class="from-input" disabled v-model="baseInfo.zodiak" type="text" placeholder="属相">
				</view>
				<view class="from-item from-item-100">
					<label>
						<text>*</text>婚姻
						<uni-icons v-if="baseInfo.check_params.marriage" class="from-icon" type="info" size="18" color="red" @click="modifyToast(baseInfo.check_params.marriage.description)"></uni-icons>
					</label>
					<picker
						:disabled="isCheck && !baseInfo.check_params.hasOwnProperty('marriage')"
						class="from-picker"
						:range="baseInfo.marriages"
						:value="baseInfo.marriage"
						@change="baseInfo.marriage = $event.detail.value"
					>
						<view class="from-picker-text">
							<view class="nowrap">{{baseInfo.marriages[baseInfo.marriage]}}</view>
							<u-icon class="icon" name="arrow-down-fill" color="#999" size="10"></u-icon>
						</view>
					</picker>
				</view>
				<view class="from-item from-item-100" v-if="baseInfo.marriage == 1">
					<label>
						<text>*</text>配偶姓名
						<uni-icons v-if="baseInfo.check_params.mate" class="from-icon" type="info" size="18" color="red" @click="modifyToast(baseInfo.check_params.mate.description)"></uni-icons>
					</label>
					<input
						class="from-input"
						v-model="baseInfo.mate"
						type="text"
						placeholder="输入配偶姓名"
					>
				</view>
				<view class="from-item from-item-50">
					<label>
						<text>*</text>学历
						<uni-icons v-if="baseInfo.check_params.education" class="from-icon" type="info" size="18" color="red" @click="modifyToast(baseInfo.check_params.education.description)"></uni-icons>
					</label>
					<picker class="from-picker" :range="baseInfo.educations" :value="baseInfo.education"  @change="baseInfo.education = $event.detail.value">
						<view class="from-picker-text">
							<view class="nowrap">{{baseInfo.educations[baseInfo.education]}}</view>
							<u-icon class="icon" name="arrow-down-fill" color="#999" size="10"></u-icon>
						</view>
					</picker>
				</view>
				<view class="from-item from-item-50">
					<label>
						<text>*</text>毕业院校
						<uni-icons v-if="baseInfo.check_params.school" class="from-icon" type="info" size="18" color="red" @click="modifyToast(baseInfo.check_params.school.description)"></uni-icons>
					</label>
					<input class="from-input" type="text" v-model="baseInfo.school" placeholder="输入毕业院校">
				</view>
				<view class="from-item from-item-100">
					<label><text>*</text>身份证号</label>
					<input class="from-input" disabled type="text" v-model="baseInfo.id_card" placeholder="身份证号">
				</view>
				<view class="from-item from-item-100">
					<label><text>*</text>身份证地址</label>
					<input class="from-input" type="text" disabled v-model="baseInfo.address" placeholder="身份证地址">
				</view>
				<view class="from-item from-item-100">
					<label>
						<text>*</text>联系电话
						<uni-icons v-if="baseInfo.check_params.mobile" class="from-icon" type="info" size="18" color="red" @click="modifyToast(baseInfo.check_params.mobile.description)"></uni-icons>
					</label>
					<input class="from-input" type="number" v-model="baseInfo.mobile" placeholder="输入的联系电话">
				</view>
				<view class="from-item from-item-100">
					<label>
						<text>*</text>联系地址
						<uni-icons v-if="baseInfo.check_params.contact_address" class="from-icon" type="info" size="18" color="red" @click="modifyToast(baseInfo.check_params.contact_address.description)"></uni-icons>
					</label>
					<view class="from-city-picker">
						<uni-data-picker
							:localdata="cityPicker"
							:border="false"
							split="-"
							placeholder="选择城市"
							v-model="baseInfo.district_id"
							@change="onCityPicker"
						></uni-data-picker>
					</view>
				</view>
				<view class="from-item from-item-100">
					<textarea class="from-textarea" auto-height type="text" v-model="baseInfo.tmp_address" placeholder="输入详细地址"></textarea>
				</view>
				<view class="from-item from-item-100">
					<label>
						<text>*</text>现居住地址
						<uni-icons v-if="baseInfo.check_params.now_domicile" class="from-icon" type="info" size="18" color="red" @click="modifyToast(baseInfo.check_params.now_domicile.description)"></uni-icons>
					</label>
					<input class="from-input" type="number" v-model="baseInfo.now_domicile" placeholder="输入现居住地址">
				</view>
				<view class="from-item from-item-100">
					<label>
						<text>*</text>现单位地址
						<uni-icons v-if="baseInfo.check_params.now_company_address" class="from-icon" type="info" size="18" color="red" @click="modifyToast(baseInfo.check_params.now_company_address.description)"></uni-icons>
					</label>
					<input class="from-input" type="number" v-model="baseInfo.now_company_address" placeholder="输入现单位地址">
				</view>
				<view class="from-item from-item-100">
					<label>
						<text>*</text>现单位名称
						<uni-icons v-if="baseInfo.check_params.now_company_name" class="from-icon" type="info" size="18" color="red" @click="modifyToast(baseInfo.check_params.now_company_name.description)"></uni-icons>
					</label>
					<input class="from-input" type="number" v-model="baseInfo.now_company_name" placeholder="输入现单位名称">
				</view>
			</view>
			<view class="btn">
				<button size="default" @click="onSubmit">提交基础资料</button>
			</view>
		</block>
	</view>
</template>

<script>
	import { perfectBase, updPerfectBase, historyBase } from '@/apis/interfaces/order.js'
	import { region } from '@/apis/interfaces/address.js'
	export default {
		data() {
			return {
				loding			: true,
				baseInfo	 	: {},
				cityPicker		: [],
				isCheck			: false
			};
		},
		created() {
			uni.showLoading({
				title: '加载中...',
				mask : true
			})
			region().then(res => {
				this.cityPicker = res;
				this.getPerfectBase()
			}).then(err => {
				uni.showToast({
					title: '获取城市信息失败：' + err.message,
					icon : 'none'
				})
			})
		},
		methods: {
			// 获取用户基础信息
			getPerfectBase(){
				perfectBase(this.$Route.query.orderId).then(res => {
					let { base, province } = res;
					this.baseInfo = base;
					this.isCheck  = base.check_params.toString() != ''
					this.loding   = false;
					uni.hideLoading()
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 选择城市
			onCityPicker(e){
				let { value } = e.detail
				this.baseInfo.district_id = value[0].value
				this.baseInfo.city_id = value[1].value
				this.baseInfo.province_id = value[2].value
			},
			// 提交基础资料
			onSubmit(){
				let data = {
					mobile				: this.baseInfo.mobile,
					marriage			: this.baseInfo.marriage,
					mate				: this.baseInfo.mate,
					education			: this.baseInfo.education,
					school				: this.baseInfo.school,
					tmp_address			: this.baseInfo.tmp_address,
					province_id			: this.baseInfo.district_id,
					city_id				: this.baseInfo.city_id,
					district_id			: this.baseInfo.province_id,
					now_domicile		: this.baseInfo.now_domicile,
					now_company_address	: this.baseInfo.now_company_address,
					now_company_name	: this.baseInfo.now_company_name
				}
				uni.showModal({
					title		: '提示',
					content		: '请确认资料无误，提交后在审核期间不可更改',
					cancelText	: '稍后',
					confirmText : '确认无误',
					success		: ModalRes => {
						if(ModalRes.confirm){
							uni.showLoading({
								title: '提交中...',
								mask : true
							})
							updPerfectBase(this.baseInfo.business_order_user_id, data).then(res => {
								uni.hideLoading()
								uni.showModal({
									title		: '提示',
									content		: '资料已保存',
									showCancel	: false,
									success		: ModalRes => {
										this.$Router.back()
									}
								})
							}).catch(err => {
								uni.showToast({
									title: err.message,
									icon : 'none'
								})
							})
						}
					}
				})
			},
			// 修改提示信息
			modifyToast(text){
				uni.showModal({
					title		: '驳回原因',
					content		: text || '-',
					showCancel	: false,
				})
			}
		},
		onNavigationBarButtonTap() {
			let { userBankId, isMy} = this.$Route.query
			if(!isMy) {
				uni.showToast({
					title: '非个人订单无法使用账户信息',
					icon : 'none'
				})
				return
			}
			if(!userBankId.user_base_id) {
				uni.showToast({
					title: '暂无历史记录，无法使用账户历史信息，请手动填写',
					icon : 'none'
				})
				return
			}
			uni.showModal({
				title		: '提示',
				content		: '确认使用历史基础信息快捷提交审核吗？提交后在审核期间不可更改',
				confirmText	: '提交审核',
				cancelText	: '取消',
				success		: res => {
					if(res.confirm){
						uni.showLoading({
							title: '提交中...',
							mask : true
						})
						historyBase(this.baseInfo.business_order_user_id, userBankId.user_base_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: 30rpx;
		box-sizing: border-box;
	}
	// btn
	.btn{
		padding: 0 30rpx 60rpx 30rpx;
		button[size="default"]{
			color: white;
			height: 100rpx;
			line-height: 100rpx;
			border-radius: 45rpx;
			background-color: $main-color;
			padding: 0;
			border-radius: 20rpx;
			font-size: 34rpx;
			&::after{
				display: none;
			}
		}
	}
	// form
	.from{
		margin:0 30rpx 30rpx 30rpx;
		background: white;
		display: flex;
		flex-wrap: wrap;
		border-radius: 20rpx;
		padding: 15rpx;
		.from-item{
			margin: 15rpx;
			&.from-item-50{
				width: calc(50% - 30rpx);
			}
			&.from-item-100{
				width: calc(100% - 30rpx);
			}
			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-input{
				background: #F6F6F6;
				width: 100%;
				height: 90rpx;
				border-radius: 10rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				font-size: 30rpx;
			}
			.from-textarea{
				padding: 20rpx 30rpx;
				background: #F6F6F6;
				width: 100%;
				box-sizing: border-box;
				font-size: 30rpx;
				line-height: 50rpx;
				border-radius: 10rpx;
			}
			.from-picker{
				.from-picker-text{
					position: relative;
					background: #F6F6F6;
					width: 100%;
					height: 90rpx;
					line-height: 90rpx;
					border-radius: 10rpx;
					font-size: 30rpx;
					padding: 0 90rpx 0 30rpx;
					box-sizing: border-box;
					& > .icon{
						position: absolute;
						right: 30rpx;
						top: 50%;
						margin-top: -10rpx;
					}
				}
			}
			.from-city-picker{
				@extend .from-picker;
				.from-picker-text{
					text{
						margin-left: 10rpx;
					}
				}
			}
		}
	}
</style>
