<template>
	<view class="evan-form-show">
		<view class="bottom-border">
			<view class="left-border"><text class="mgl10">基本信息</text></view>
		</view>
		<uni-forms :value="formData" ref="form" validate-trigger="bind" err-show-type="toast">
			<uni-forms-item required name="cusType" label="客户类型">
				<uni-data-checkbox v-model="cusType" :localdata="cusTypeList"></uni-data-checkbox>
			</uni-forms-item>
			<uni-forms-item name="code" required label="客户编号">
				<uni-easyinput type="text" :inputBorder="true" v-model="enterpriseForm.code" placeholder="请输入客户编号"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="name" required label="客户名称">
				<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.name" placeholder="客户名称"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="time" label="业务类别">
				<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.name" placeholder="客户名称"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="phone" required label="联系电话">
				<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="联系电话"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="phone" required label="申请额度">
				<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="申请额度"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="phone" required label="申请期限">
				<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="申请期限"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="phone" required label="资产评估报告名称">
				<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="资产评估报告名称"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="phone" required label="资产评估报告编号">
				<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="资产评估报告编号"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="phone" required label="评估价值(万元)">
				<uni-data-checkbox :inputVisble="true" :multiple="true" mode="list" v-model="enterpriseFrom.gender" :localdata="EvaluationList"></uni-data-checkbox>
				<view class="flex-end">
					<text>合计</text>
					<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="自动合计"></uni-easyinput>
				</view>
			</uni-forms-item>
			<uni-forms-item name="time" label="评估日期">
				<uni-datetime-picker v-model="formData.time" :timestamp="true" @change="datetimeChange"></uni-datetime-picker>
			</uni-forms-item>
			<uni-forms-item name="phone" required label="审计编号">
				<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="审计编号"></uni-easyinput>
			</uni-forms-item>	
			<uni-forms-item name="phone" required label="审计报告(名称)">
				<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="审计报告(名称)"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="time" label="审计日期">
				<uni-datetime-picker v-model="formData.time" :timestamp="true" @change="datetimeChange"></uni-datetime-picker>
			</uni-forms-item>
			<uni-forms-item name="phone" required label="审计价值(万元)">
				<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="审计价值"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item required name="enGuaranteeMeasures" label="反担保措施">
				<uni-data-checkbox mode="list" v-model="enterpriseFrom.enGuaranteeMeasures" :localdata="easuresList"></uni-data-checkbox>
			</uni-forms-item>
			<uni-forms-item name="name" required label="反担保措施描述">
				<uni-easyinput type="textarea" v-model="enterpriseForm.remarks" placeholder="请输入反担保措施描述"></uni-easyinput>
			</uni-forms-item>
		</uni-forms>		
		
		<view class="foot-btn btn-rig pad-bt">
			<button plain class="mini-btn round plain-btn" type="primary" size="mini" @click="goto('/pages/application/application')">返回</button>
			<button class="mini-btn round def-btn mar-lr" type="primary" size="mini" @click="goto('/pages/application/application')">保存</button>
			<button class="mini-btn round suc-btn" type="primary" size="mini" @click="goto('/pages/application/application')">提交</button>
		</view>
		
		<timeline></timeline>
	</view>
</template>

<script>
	import utils from '@/components/evan-form/utils.js'
	const CONTACT_INFO={
		name:'',
		phone:'',
		duty:''
	}
	export default {
		data() {
			return {
				cusTypeList: [{
					text: '个人',
					value: '0'
				},
				{
					text: '企业',
					value: '1'
				}],//客户类型列表
				cusType: '1',
				EvaluationList: [{
					text: '房产',
					value: '0',
					InputValue: ''
				},
				{
					text: '车辆',
					value: '1',
					InputValue: ''
				},
				{
					text: '设备',
					value: '2',
					InputValue: ''
				},
				{
					text: '其他',
					value: '3',
					InputValue: ''
				}],//评估价值列表
				employeeMsg: [{
					name: '个人',
					value: '3'
				},
				{
					name: '企业',
					value: '4'
				}],//客户经理列表
				genderList: [{
					text: '男',
					value: 1
				},
				{
					text: '女',
					value: 2
				}],//性别列表
				easuresList: [{
					text: '第三方保证',
					value: 1
				},
				{
					text: '抵押',
					value: 2
				},
				{
					text: '个人无限责任连带',
					value: 3
				},
				{
					text: '质押',
					value: 4
				}],
				imgList: [],
				maritalList: ['未婚','已婚','离异','再婚'],//婚姻状况列表
				educationList: ['本科','大专','高职','中专','其他'],//学历列表
				isExistList: [{
					text: '否',
					value: 0
				},
				{
					text: '是',
					value: 1
				}],//是否存在关联人列表
				manager: '',
				enterpriseFrom: {
					maritalStatus: 0,//婚姻状况
					gender: 1,//性别
					education: 0, //学历
					legalGender: 1, //关联人性别
					isExistRelated: 0, //是否存在关联人
					enGuaranteeMeasures: ''
				},//个人form
				enterpriseForm: {},//企业form
				hideRequiredAsterisk: false,
				// 表单的内容必须初始化
				info: {
					name: '',
					email: '',
					desc: '',
					phone: '',
					sex: '',
				},
				rules: {
					cusType: {
						required: true,
						message: '请选择客户'
					},
					code: {
						required: true,
						message: '请选择客户编号'
					},
					manager: {
						required: true,
						message: '请选择客户经理'
					},
					name: {
						required: true,
						message: '请输入姓名'
					},
					email: [{
						required: true,
						message: '请输入邮箱'
					}, {
						type: 'email',
						message: '邮箱格式不正确'
					}],
					desc: [{
							required: true,
							message: '请输入简介'
						},
						{
							min: 10,
							max: 30,
							message: '简介必须在10到30个字之间'
						}
					],
					phone: [{
							required: true,
							message: '请输入手机号'
						},
						{
							validator: (rule, value, callback) => {
								// 注意这里如果用的是methods里的isMobilePhone将不生效
								if (this.$utils.isMobilePhone(value)) {
									callback()
								} else {
									callback(new Error('手机号格式不正确'))
								}
							}
						},
						// 或者这样也是可以的
						// {
						// 	validator: this.isMobile
						// }
					],
					sex: {
						required: true,
						message: '请选择性别'
					}
				},
				info2:{
					name:'',
					email:'',
					phone:''
				},
				rules2:{
					name: {
						required: true,
						message: '请输入姓名'
					},
					email: [{
						required: true,
						message: '请输入邮箱'
					}, {
						type: 'email',
						message: '邮箱格式不正确'
					}],
					phone:[{
							required: true,
							message: '请输入手机号'
						},
						{
							pattern:'^1\\d{10}$', // 注意这里由于小程序的缘故正则表达式需要通过string的方式传递并且去除两边的斜杠，中间的斜杠变成两个斜杠
							message:'手机号格式不正确'
						}
					]
				},
				dynamicInfo:{
					test1:'',
					test2:'',
					list:[{...CONTACT_INFO}]
				},
				dynamicRules:{
					test1:[{required:true,message:'请输入rule规则字段'},{min:4,max:8,message:'必须4-8位'}]
				},
				showRuleParam:true,
				showRequiredParam:true,
				mobileRules:[{required:true,message:'请输入手机号'},{pattern:'^1\\d{10}$',message:'手机号格式不正确'}] // 注意这里由于小程序的缘故正则表达式需要通过string的方式传递并且去除两边的斜杠，中间的斜杠变成两个斜杠
			}
		},
		mounted() {
			// 这里必须放在mounted中，不然h5，支付宝小程序等会找不到this.$refs.form
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			//客户类型选择
			cusChange(e) {
				this.cusType = e.detail.value
			},
			//性别选择
			genderChange(e) {
				this.personageForm.gender = e.detail.value
			},
			//婚姻状况选择
			maritalChange(e) {
				this.personageForm.maritalStatus = e.detail.value
			},
			//学历选择
			educationChange(e) {
				this.personageForm.education = e.detail.value
			},
			//关联人性别选择
			legalGenderChange(e) {
				this.personageForm.legalGender = e.detail.value
			},
			isExistChange(e) {
				this.personageForm.isExistRelated = e.detail.value
			},
			bindPickerChange: function(e) {
				// this.cusType = e.target.value
			},
			save() {
				this.$refs.form.validate((res) => {
					if (res) {
						uni.showToast({
							title: '验证通过'
						})
					}
				})
			},
			promiseSave(){
				this.$refs.form.validate().then((res)=>{
					uni.showToast({
						title: '验证通过'
					})
				}).catch(()=>{
				})
			},
			async asyncSave(){
				try{
					const result=await this.$refs.form.validate()
					if(result){
						uni.showToast({
							title: '验证通过'
						})
					}
				} catch(e){
					console.log(e)
				}
			},
			saveForm2(){
				this.$refs.form2.validate((res) => {
					if (res) {
						uni.showToast({
							title: '验证通过'
						})
					}
				})
			},
			utilsSave() {
				utils.validate(this.info, this.rules, (res, errors) => {
					if (res) {
						uni.showToast({
							title: '验证通过'
						})
					}
				})
			},
			validateSingle() {
				this.$refs.form.validateField('email', (res) => {
					if (res) {
						uni.showToast({
							title: '验证通过'
						})
					}
				})
			},
			validateMultiple() {
				this.$refs.form.validateField(['email', 'phone'], (res) => {
					if (res) {
						uni.showToast({
							title: '验证通过'
						})
					}
				})
			},
			isMobilePhone() {
				const reg = /^1\d{10}$/
				if (reg.test(value)) {
					return true
				}
				return false
			},
			isMobile(rule, value, callback) {
				if (this.$utils.isMobilePhone(value)) {
					callback()
				} else {
					callback(new Error('手机号格式不正确'))
				}
			},
			sexChange(e) {
				this.info.sex = e.detail.value
			},
			addContact(){
				this.dynamicInfo.list.push({...CONTACT_INFO})
			},
			deleteContact(index){
				this.dynamicInfo.list.splice(index,1)
			},
			toggleRuleParam(){
				this.showRuleParam=!this.showRuleParam
			},
			toggleRequiredParam(){
				this.showRequiredParam=!this.showRequiredParam
			},
			dynamicSave(){
				this.$refs.dynamicForm.validate((res)=>{
					if(res){
						uni.showToast({
							title: '验证通过'
						})
					}
				})
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该文件吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			ChooseImage() {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.evan-form-show {
		padding: 0 30rpx;
		background-color: #fff;

		.form-input {
			font-size: 28rpx;
			color: #333;
			text-align: right;
			width: 100%;
			box-sizing: border-box;
			height: 60rpx;
			&.textarea{
				height: 240rpx;
				padding: 24rpx 0;
				text-align: left;
			}
		}

		.form-input-placeholder {
			font-size: 28rpx;
			color: #999;
		}

		&__button {
			width: 100%;
			height: 88rpx;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			font-size: 36rpx;
			color: #fff;
			margin-top: 20rpx;
			background-color: #2D87D5;

			&::before,
			&::after {
				border: none;
			}
		}

		.customize-form-item {
			&__label {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 16rpx;
			}

			&__radio {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;

				&__text {
					font-size: 28rpx;
					color: #333;
				}
			}
		}
	}
	.label-color{
		color: #00B9FF;
	}
	// 必填
	.is-required {
		color: $uni-color-error;
	}
	
	
	
	.checklist-group {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	.checklist-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		margin: 10rpx 0;
		margin-right: 50rpx;
	}
	
	.checklist-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	
	.checklist-text {
		font-size: 28rpx;
		color: #333;
		margin-left: 10rpx;
		transition: color 0.2s;
	}
	
	.checkbox__inner {
		flex-shrink: 0;
		position: relative;
		border: 2rpx solid #DCDFE6;
		border-radius: 4rpx;
		box-sizing: border-box;
		width: 32rpx;
		height: 32rpx;
		background-color: #fff;
		z-index: 1;
		transition: border-color 0.1s;
	}
	
	.checkbox__inner-icon {
		border: 2rpx solid #fff;
		border-left: 0;
		border-top: 0;
		height: 16rpx;
		left: 10rpx;
		position: absolute;
		top: 2rpx;
		width: 6rpx;
		opacity: 0;
		transition: transform .2s;
		transform-origin: center;
		transform: rotate(40deg) scaleY(0.4);
	}
</style>
