<template>
	<view class="contact-box">
		<u-popup :show="contactsShow" @close="contactsShow=false">
			<view class="top">
				<u-icon name="close" @click="contactsShow=false"></u-icon>
				<text>
					需填写{{buyNum}}位联系人
					<text v-if="buyNum-chooseContact.length>0">
						,还需
						<text class="top-number">{{buyNum-chooseContact.length}}</text>
						位出行人
					</text>
				</text>

				<text @click="config()" class="top-sure">
					确定
				</text>
			</view>

			<view class="bottom">
				<view @click="showEdit()" class="bottom-add">
					<text>
						+添加旅客信息
					</text>
				</view>
				
				<checkbox-group  @change="chooseContactChange">
					<view class="bottom-list" v-for="(item,index) of contactData" :key="item.id">
						<label>
							<checkbox :value="JSON.stringify(item)" :checked="item.ifChoose" color="#3688ff"  />
							<view class="bottom-content">
								<view>
									{{item.name}}
								</view>

								<view>
									<text>
										身份证
									</text>
									{{item.credentialNumber?item.credentialNumber.substr(0,3)+"****"+item.credentialNumber.substr(14,4):"无"}}
								</view>
							</view>
						</label>

						<view @click="goEdit(item)" style="margin-right:20rpx;">
							<u-icon name="edit-pen" color="#3688ff" size="28"></u-icon>
						</view>
						<view  @click="clickDele(item.id)">
							<u-icon name="trash-fill" color="#3688ff" size="28"></u-icon>
						</view>
						
						<u-modal :show="showModal" @confirm="confirmDele" @cancel="showModal=false" showCancelButton title="确认删除该联系人" ></u-modal>
					</view>
				</checkbox-group>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: ["contactData", "orderTouristList", "buyNum"],
		watch: {
			orderTouristList: {
				handler(newValue, oldValue) {
					if (newValue) {
						this.chooseContact = this.orderTouristList
					}
				},
				deep: true,
				immediate: true
			}
		},
		data() {
			return {
				contactsShow: false, //控制联系人弹窗显示隐藏
				chooseContact: [], //选中的联系人
				showModal: false, //确认弹窗显示隐藏
				contactId:'',//删除联系人的Id
				
			}
		},
		methods: {
			//---点击新增，展示编辑联系人弹窗,并传空值给编辑弹窗
			showEdit() { 
				this.contactsShow=false
				this.$parent.showEdit()
				this.$emit("getEditContact", "")
			},
			//---展示编辑弹窗，并传值给编辑弹窗
			goEdit(obj) { 
				this.contactsShow=false
				this.$parent.showEdit()
				this.$emit("getEditContact", obj)
			},
			//---确定选中的联系人
			config() { 
				this.contactsShow = false
				this.$emit("contactListConfig", this.chooseContact)
				
			},
			//---联系人姓名变化
			chooseContactChange(e){
				let value=e.detail.value
				let arr=[]
				value.forEach(item=>{
					arr.push(JSON.parse(item))
				})
				this.chooseContact=arr
				if (arr.length == this.buyNum) { //当选择的人数等于需要填的人数时关闭弹窗
					this.config()
				}
				if (arr.length > this.buyNum) {
					arr.shift()
					this.config()
				}
			},
			//---点击删除
			clickDele(id) {
				this.showModal = true
				this.contactId=id
			},
			//---确认删除
			confirmDele(){
				let data={
					id:this.contactId
				}
				this.$request('wechatUser/contact/deleteContact', data).then((res) => {
					if (res.code == '00') {
						uni.showToast({
							title:'删除成功',
							icon:'none'
						})
						this.showModal = false
						this.contactsShow=false
						this.$parent.getContactList()
					} else {
						uni.showToast({
							title:res.message,
							icon:'none'
						})
					}
				}).catch(() => {
					this.showModal = false
				})
		}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.top {
		height:100rpx;
		display: flex;
		justify-content: space-between;
		background: #f0f0f0;
		align-items: center;
		padding: 0 24rpx;
	}
	.top-sure {
		color: var(--main-color);
		font-size: 28rpx;
	}
	.top-number{
		color: #f9690e;
		font-size: 32rpx;
		font-weight:bold;
	}

	.bottom {
		padding:0 24rpx 80rpx 24rpx;
	}

	.bottom-add {
		height:130rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #e6e6e6;
		width: 100%;
		justify-content: center;
	}

	.bottom-add text{
		width:280rpx;
		height: 65rpx;
		text-align: center;
		line-height:65rpx;
		border: 1px solid var(--main-color);
		color:var(--main-color);
		display: inline-block;
		border-radius:5rpx;
	}

	.bottom-list{
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #E6E6E6;
		padding:25rpx 0;
	}

	.bottom-list label {
		display: flex;
		flex: 1;
		align-items: center;
	}

	.bottom-content {
		flex: 1;
		margin-left: 40rpx;
	}

	.bottom-content view {
		font-size:28rpx;
		color: #666666;
	}

	.bottom-content view:not(:first-child) {
		margin-top: 10rpx;
	}

	.bottom-content view text {
		display: inline-block;
		width: 100rpx;
	}
</style>
