<template>
	<view class="editBox" v-show="showEdit">
		<view @click="close()" class="return">
			<u-icon name="close"></u-icon>
		</view>
		<view class="editTop">

		</view>

		<view class="editBottom">
			<view class="bottomContent">
				<view>
					<text>
						姓名：
					</text>
					<input v-model.trim="name" placeholder="请输入中文姓名" />
				</view>

				<view>
					<text>
						身份证：
					</text>
					<input v-model.trim="credentialNumber" maxlength="18" placeholder="请输入身份证号码" />
				</view>
				
				<view>
					<!--编辑-->
					<a class="middle-btn" @click="keepEdit()" v-if="editBtn">完成</a>
					<!--新增-->
					<a class="middle-btn" @click="keepPlus()" v-else="">完成</a>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		props: ["editContact"],
		data() {
			return {
				showEdit: false, //控制组件显示隐藏
				name: "", //姓名
				credentialNumber: "", //身份证号
				reviseContactId: "", //被修改人id
				editBtn: "", //控制编辑完成按钮显示隐藏
			}
		},
		watch: {
			editContact: { //
				handler(newValue, oldValue) {
					if (newValue) {
						this.editBtn = true
					} else {
						this.editBtn = false
					}
					this.name = newValue.name||''
					this.credentialNumber = newValue.credentialNumber||''
					this.reviseContactId = newValue.id||''
				},
				deep: false,
				immediate: false
			}
		},
		methods: {
			//---关闭弹窗
			close() {
				this.showEdit = false
			},
			//---新增保存
			keepPlus() { 
				if (!this.$commonjs.nameReg().test(this.name)) {
					uni.showToast({
						title:'请输入正确的中文名字',
						icon:'none'
					})
					return
				}
				if (!this.$commonjs.idReg().test(this.credentialNumber)) {
					uni.showToast({
						title:'请输入正确身份证号',
						icon:'none'
					})
					return
				}
				let data = {
					name: this.name, //保存姓名
					phone: "", //电话号码
					credentialNumber: this.credentialNumber, //身份证号
					category: "", //成人或者儿童
					openid: uni.getStorageSync("openid"), //用户Id
					credentialsType: "", //证件类型
					merchantType: 1, //商户类型，1.景区，2.酒店，3.餐饮
				}
				this.$request("wechatUser/contact/saveContact", data).then((res) => {
					if (res.code == "00") {
						uni.showToast({
							title:'保存成功',
							icon:'none'
						})
						this.$parent.addChoose()
						this.showEdit = false
						this.name = "" //成功之后清空数据，防止下次新增的时候出现之前的数据
						this.credentialNumber = ""
					} else {
						uni.showToast({
							title:res.message,
							icon:'none'
						})
					}
				})
			},
			//---编辑保存
			keepEdit() { 
				if (!this.$commonjs.nameReg().test(this.name)) {
					uni.showToast({
						title:'请输入正确的中文名字',
						icon:'none'
					})
					return
				}
				if (!this.$commonjs.idReg().test(this.credentialNumber)) {
					uni.showToast({
						title:'请输入正确身份证号',
						icon:'none'
					})
					return
				}
				let data = {
					name: this.name, //保存姓名
					phone: "", //电话号码
					credentialNumber: this.credentialNumber, //身份证号
					category: "", //成人或者儿童
					openid: uni.getStorageSync("openid"), //用户Id
					credentialsType: "", //证件类型
					merchantType: 1, //商户类型，1.景区，2.酒店，3.餐饮
					id: this.reviseContactId, //被修改人id
				}
				this.$request("wechatUser/contact/updateContact", data).then((res) => {
					if (res.code == "00") {
						uni.showToast({
							title:'修改成功',
							icon:'none'
						})
						this.$parent.getContactList()
						this.showEdit = false
					} else {
						uni.showToast({
							title:res.message,
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.editBox {
		height: 100%;
		background: #F5F5F5;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10000;
		overflow-y: auto;
		font-size:28rpx;
	}
	.return {
		height:100rpx;
		padding: 0 24rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content:flex-end;
	}
	.editTop {
		height:200rpx;
		background: linear-gradient(to bottom, #2984ef, #d8eaf6);
	}
	.editBottom {
		position: relative;
		top: -80rpx;
		padding: 0 20rpx;
	}
	.bottomContent {
		border-radius: 20rpx;
		background: #FFFFFF;
		padding: 20rpx 20rpx 60rpx 20rpx;
	}
	.bottomContent view {
		height: 100rpx;
		align-items: center;
		display: flex;
		border-bottom: 1px solid #f0f0f0;
	}
	.bottomContent view text {
		display: inline-block;
		width: 120rpx;
		text-align-last: justify;
		margin-right: 20rpx;
	}
	.bottomContent view input {
		flex: 1;
	}
	.bottomContent view:last-child {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;
		border: none;
	}
</style>
