<template>
	<view class="content ">
		<view class="item-name">
			选择合同
		</view>
		<view class="ht-title flex">
			<picker @change="bindPickerChange" :value="0" :range="htList" range-key="title">
				<view class="clamp">
					{{htDetail.title}}
				</view>
			</picker>

			<view class="look" @click="lookMore">
				查看
			</view>
		</view>
		<!-- 		<view class="errorIf" v-if="dataInitError">
			初始化数据失败请重新填写数据
		</view> -->
		<!-- <view class="table flex" v-if="showModelType">
			<text class="table-text" @click="updata.modelType=0" :class="{action:updata.modelType==0}">
				图文模式
			</text>
			<text class="table-text" @click="updata.modelType=1" :class="{action:updata.modelType==1}">
				纯图模式
			</text>
		</view> -->

		<!-- <view class="item-name">
				上传头像
			</view>
			<view class="con_box">
				<view class="con_image">
					<image class="img" v-if="modelid==7" @click="upImage('avatar',1)"
						:src="updata.avatar||`../../../static/image/upImg.png`">
					</image>
					<image class="img" v-else @click="navCroper(400,400,'one')"
						:src="updata.avatar||`../../../static/image/upImg.png`">
					</image>
				</view>
			</view> -->
		<view class="item-name">
			甲方
		</view>
		<view class="listBox">
			<view class="list" v-for="item in jsonAr" :key="item.code">
				<view class="flex listItem"
					v-if="item.type != 'langtext' && item.type != 'img' && item.code != 'check_time'">
					<view class="flex titleBox">
						<text class="font-color-red font-size-sm" v-if="item.verify == 1">✲</text> <text
							class="title">{{item.name}}</text>
					</view>
					<view class="right flex">
						<input class="input" v-model="item.value" v-if="item.type == 'text'" type="text"
							:placeholder="'请填写' + item.name" placeholder-class="placeholder" />
						<input class="input" v-model="item.value" v-if="item.type == 'number'" type="number"
							:placeholder="'请填写' + item.name" placeholder-class="placeholder" />
						<view class="input clamp" @click="chooseAddress(item)" v-if="item.type == 'address'">
							{{item.value || ('请选择' + item.name)}}
						</view>
						<picker mode="date" :value="item.value" @change="bindDateChange($event,item)"
							v-if="item.type == 'date'">
							<input class="input" v-model="item.value" disabled type="text"
								:placeholder="'请选择' + item.name" placeholder-class="placeholder" />
						</picker>
					</view>
				</view>

			</view>
			<!-- chooseAddress -->

		</view>
		<view class="item-name">
			乙方
		</view>
		<view class="listBox">
			<view class="list">
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="font-color-red font-size-sm">✲</text> <text class="title">姓名</text>
					</view>
					<view class="right flex">
						<input class="input" v-model="partyB.name" :disabled="type == 0" type="text"
							placeholder="请填写真实姓名" placeholder-class="placeholder" />
					</view>
				</view>
			</view>
			<template v-if="type == 1">
				<view class="list">
					<view class="flex listItem">
						<view class="flex titleBox">
							<text class="font-color-red font-size-sm">✲</text> <text class="title">联系电话</text>
						</view>
						<view class="right flex">
							<input class="input" v-model="partyB.mobile" type="number" placeholder="请填写联系电话"
								placeholder-class="placeholder" />
						</view>
					</view>
				</view>
				<view class="list">
					<view class="flex listItem">
						<view class="flex titleBox">
							<text class="font-color-red font-size-sm">✲</text> <text class="title">身份证号</text>
						</view>
						<view class="right flex">
							<input class="input" v-model="partyB.idcard" type="idcard" placeholder="请填写身份证号"
								placeholder-class="placeholder" />
						</view>
					</view>
				</view>
				<view class="list">
					<view class="flex listItem">
						<view class="flex titleBox">
							<text class="font-color-red font-size-sm">✲</text> <text class="title">地址</text>
						</view>
						<view class="right flex">
							<input class="input" v-model="partyB.address" type="text" placeholder="请填写地址"
								placeholder-class="placeholder" />
						</view>
					</view>
				</view>
			</template>

		</view>
		<template v-for="item in jsonAr" v-if="item.type == 'langtext'">
			<view class="item-name">
				{{item.name}}
			</view>
			<view class="listBox " style="padding: 20rpx;">
				<textarea name="fujia" id="" cols="30" rows="30" maxlength="300" v-model="item.value"
					:placeholder="'请输入' + item.name " style="width: 100%;height: 200rpx;"></textarea>
			</view>
		</template>

		<!-- <view class="item-name">
			电子签名
		</view>
		<view class="listBox qm-content">
			<signInput ref="sign" canvasId="twoDrowCanvas" canvasIds="twoRotateCanvas" :header="header" :action="action"
				@signToUrl="signToUrl">
			</signInput>
		</view> -->
		<view class="base-buttom flex">
			<view class="updata flex flex-center" :class="{ 'bg-gray': loding }" @click="loding ? '' : confirm()">
				提交
			</view>
		</view>
		<!-- <uni-popup ref="popup" type="center">
			<scroll-view scroll-y="true" class="ht-detail">
				<image v-for="item in htDetail.imgs" :src="item" mode=""></image>
			</scroll-view>

		</uni-popup> -->
	</view>
</template>

<script>
	import signInput from "@/components/am-sign-input/am-sign-input.vue"

	import {
		getArtDetail
	} from '@/api/index.js'
	import AllAddress from '@/components/wangding-pickerAddress/data.js'
	import {
		getCommonUserCardInfo,

		getServiceTimeTypeList,
		getServiceTypeList,
		subInfoAudit,
		getUserWorkTypeList,
		getUserCardInfo,
		getHtList,
		getHdDetail
	} from '@/api/model.js';
	import {
		isCardNo
	} from '@/utils/rocessor.js';
	import {
		getAstro,
		getShengXiao,
		IdCard
	} from '@/utils/twelve.js';
	import {
		mapState
	} from "vuex"

	import {
		createSigning
	} from '@/api/signing.js'
	import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';

	export default {
		components: {
			pickerAddress,
			signInput
		},
		data() {
			return {
				htList: [],
				loding: false,
				fujia: '',
				header: {
					"token": uni.getStorageSync('token')
				}, //图片上传携带头部信息
				htModel: {
					title: '',
				},
				contract: {
					day: '',
					start_time: '',
					end_time: '',
					money: '',
					deposit: '',
					balance: ''
				},
				partyA: {
					phone: '',
					address: '',
					name: '',
					idcard: ''
				},
				partyB: {},
				uid: '', //乙方uid,
				type: 0,
				htDetail: {},
				jsonAr: [],
				jsonBr: []
			};
		},
		onLoad(options) {
			this.getHtModel()
			const that = this;
			if (options.id) {
				this.uid = options.id
				this.getCommonUserCardInfo()
				console.log(this.userInfo)
				this.partyA.mobile = this.userInfo.mobile || ''
			}
			if (options.type) {
				this.type == options.type
			}
		},
		computed: {
			// #ifdef H5
			...mapState(['urlFile']),
			// #endif
			...mapState(['baseURL']),
			...mapState('user', ['userInfo', 'hasLogin']),
			action() {
				return this.baseURL + '/api/user/qiniuUpload' //上传服务器的地址
			}
		},
		methods: {

			bindPickerChange(e) {
				let id = this.htList[e.detail.value].id
				console.log(id);
				if (id != this.htDetail.id) {
					this.getHdDetail(this.htList[e.detail.value].id)
				}
			},
			getHtList() {
				getHtList({
					page: 1,
					limit: 100
				}).then(res => {
					this.htList = res.data.list
					this.getHdDetail(this.htList[0].id)
				})
			},
			getHdDetail(hid) {
				getHdDetail({
					id: hid
				}).then(res => {
					this.htDetail = res.data
					this.jsonAr = this.htDetail.content.jsonAr.map(item => {
						item.value = ''
						return item
					})
					this.jsonBr = this.htDetail.content.jsonBr.map(item => {
						item.value = ''
						return item
					})
					this.setBInfo()
					// this.htDetail = res.data
				})
			},
			// 设置乙方默认值
			setBInfo() {
				this.jsonBr = this.jsonBr.map(item => {
					if (item.code == 'name') {
						item.value = this.partyB.name
					} else if (item.code == 'card') {
						item.value = this.partyB.idcard
					} else if (item.code == 'address') {
						item.value = this.partyB.ancestral_place
					} else if (item.code == 'phone') {
						item.value = this.partyB.mobile
					}
					return item
				})
			},
			chooseAddress(item) {
				console.log('zhe');
				let that = this
				uni.chooseLocation({
					success(res) {
						console.log(res)
						if (res.errMsg == 'chooseLocation:ok') {
							// that.partyA.address = res.address
							// that.partyA.latitude = res.latitude
							// that.partyA.longitude = res.longitude
							// item.value = res.address
							let index = that.jsonAr.findIndex(i => i.name == item.name)
							item.value = res.address
							that.$set(that.jsonAr, index, item)
							console.log(index, that.jsonAr[index])
							that.partyA.latitude = res.latitude
							that.partyA.longitude = res.longitude
						}


						console.log(that.partyA.address, res.address);

					},
					fail(err) {
						console.log(err);
					}
				})
			},
			bindDateChange(e, item) {
				console.log(e, item);
				let index = this.jsonAr.findIndex(i => i.name == item.name)
				item.value = e.detail.value
				this.$set(this.jsonAr, index, item)
				// this.contract.start_time = e.detail.value
			},
			bindDateChanges(e) {
				console.log(e);
				this.contract.end_time = e.detail.value
			},
			lookMore() {
				// this.$refs.popup.open()
				uni.previewImage({
					urls: this.htDetail.imgs, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			getHtModel() {
				try {
					getArtDetail({
						id: 11
					}).then(res => {
						this.htModel = res.data.list[0]
						this.htModel.content = this.htModel.content.replace(/<img/g, '<img class="rich-img"')
							.replace(/<p>\s*<img/g, '<p class="pHeight"><img').replace(/<div/g,
								'<div style="max-width: 50% !important;"');
						console.log(res)
					})
				} catch (err) {
					console.log(err);
				}

			},
			getCommonUserCardInfo() {
				getCommonUserCardInfo({
					uid: this.uid
				}).then(res => {
					this.partyB = res.data
					this.getHtList()
				})
			},
			confirm(e) {
				const that = this;
				if (!that.rendl()) {
					return
				}
				let start_time_item = this.jsonAr.find(item => item.code == 'start_time')
				let end_time_item = this.jsonAr.find(item => item.code == 'end_time')
				that.loding = true;
				createSigning({
						id: 0,
						to_name: that.partyB.name,
						// name: that.partyA.name,
						uid: that.userInfo.uid,
						// phone: that.partyA.mobile,
						// address: that.partyA.address,
						// card: that.partyA.idcard,
						to_uid: that.uid,
						// price: that.contract.money,
						// deposit: that.contract.deposit,
						// balance: that.contract.balance,
						// period: that.contract.day,
						start_time: start_time_item.value,
						end_time: end_time_item.value,
						// mark: that.fujia,
						latitude: that.partyA.latitude,
						longitude: that.partyA.longitude,
						template_id: that.htDetail.id,
						content: JSON.stringify({
							id: that.htDetail.id,
							title: that.htDetail.title,
							jsonAr: that.jsonAr,
							jsonBr: that.jsonBr
						})
					})
					.then((e) => {
						uni.showModal({
							title: '温馨提醒',
							content: '成功创建合同，是否立即签约',
							complete(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/user/signing/mySig'
									})
								}
							}
						});
						that.loding = false;
					})
					.catch(err => {
						this.loding = false;
						console.log(err);
					});
			},
			// 认证
			rendl() {
				const that = this;
				//
				let re = true
				for (let i = 0; i < that.jsonAr.length; i++) {
					if (that.jsonAr[i].type != 'img' && that.jsonAr[i].name != '签约时间' && that.jsonAr[i].verify == 1 && !
						that.jsonAr[i].value) {
						uni.showModal({
							title: '温馨提醒',
							content: '请完善' + that.jsonAr[i].name,
							showCancel: false,
						});
						re = false;
						break;
					}
					// 其他操作
				}
				// uni.showModal({
				// 	title: '温馨提醒',
				// 	content: '请选择结束日期',
				// 	showCancel: false,
				// });
				return re
			}
		}
	};
</script>

<style lang="scss">
	.content,
	page {
		min-height: 100%;
	}

	.content {
		padding-bottom: 150rpx;
	}

	.item-name {
		margin: $page-row-spacing;
		font-size: $font-lg;
		font-weight: bold;
		color: $font-color-dark;
	}

	.con_box {
		margin: $page-row-spacing;

		.con_image {
			width: 150rpx;
			height: 150rpx;
			display: inline-block;
			margin-right: 20rpx;
			position: relative;

			.img {
				width: 100%;
				height: 100%;
			}

			.tip {
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				width: 30rpx;
				height: 30rpx;
				background-color: #FFF;
				border-radius: 99rpx;
			}
		}
	}

	.listBox {
		margin: $page-row-spacing;
		margin-top: 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #FFFFFF;
	}

	.list {
		.input {
			text-align: right;
			font-size: $font-base;
			color: $color-gray;
			width: 100%;
		}

		.listItem {
			padding: 35rpx 40rpx;
			border-bottom: 1px solid $page-color-light;

			.ql-editor.ql-blank:before {
				font-style: normal;
			}

			.textarea {
				font-size: $font-base;
				width: 100%;
				word-wrap: break-word;
				white-space: pre-line;
				min-height: 9rem;
			}
		}

		.listIconImg {
			width: 36rpx;
		}

		.right {
			color: $font-color-light;
			font-size: $font-base;
			flex-grow: 1;
			justify-content: flex-end;

			.timetype {
				width: 100%;
				justify-content: flex-end;
			}

			.citylist {
				.del {
					color: $color-red;
					font-size: $font-sm;
					border: 1px solid $color-red;
					border-radius: 10rpx;
					line-height: 1;
					padding: 5rpx 15rpx;
				}
			}

			.img {
				width: 26rpx;
			}

			.buttom {
				color: $base-color;
				border: 1px solid $base-color;
				border-radius: 10rpx;
				line-height: 1;
				padding: 10rpx 20rpx;
			}
		}

		.titleBox {
			.title {
				color: $font-color-base;
				font-size: $font-base;
			}
		}
	}

	.bg-gray {
		background-color: $color-gray;
	}

	.base-buttom {
		position: fixed;
		bottom: 0rpx;
		right: 0rpx;
		left: 0rpx;
		margin: 0;
		padding: 0;
		height: 100rpx;
		border-radius: 0;

		.updata,
		.ylan {
			// width: 50%;
			flex: 1;
			height: 100%;
			justify-content: center;
		}

		.ylan {
			background-color: #FFF;
			color: $font-color-dark;
		}
	}

	.errorIf {
		font-size: $font-lg;
		color: #F65486;
		padding: 30rpx;
	}

	.table {
		.table-text {
			color: #F65486;
			text-align: center;
			flex-grow: 1;
			padding: 30rpx;
			border: 1px solid #F65486;

			&.action {
				background-color: #F65486;
				color: #FFFFFF;
			}
		}
	}

	.ht-title {

		padding: 20rpx;
		background-color: #fff;
		margin: 0 40rpx;
		border-radius: 20rpx;
	}

	.ht-detail {
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		width: 600rpx;
		height: 80vh;
	}

	.rich-img {
		width: 100%;
	}

	.qm-content {
		padding: 40rpx;
		display: flex;
		justify-content: center;
	}

	.look {
		font-size: 26rpx;
		color: $base-color;
	}
</style>