<template>
	<view class="list-bg" v-show="showPop">
		<view class="list-wrap">
			<view class="top">
					<view class="top-num" @click="showPop=false">
						<text>
							需选中{{contactNum}}位联系人
						</text>
						<view class="top-icon">
							<u-icon name="close" bold></u-icon>
						</view>
					</view>
					<view @click="goEdit()" class="top-add">
						<text>
							+添加旅客信息
						</text>
					</view>
				</view>
				
				<view class="bottom">
					<checkbox-group  @change="chooseContactChange">
						<!-- key只能为index，防止id可能有重复 -->
						<view class="bottom-list" v-for="(item,index) of listTotal" :key="index">
							<label>
								<checkbox class="blue" :value="JSON.stringify(item)" :checked="item.ifChoose" color="#3688ff" :disabled="!item.contactVos||item.contactVos.length==0" />
								<view class="bottom-content">
									<view>
										{{item.name}}
									</view>		
									<view>
										<text>
											证件号
										</text>
										{{item.credentialNumber?item.credentialNumber.substr(0,3)+"****"+item.credentialNumber.substr(item.credentialNumber.length-4,4):"无"}}
									</view>
									<view>
										<text>
											手机号
										</text>
										{{item.phone?item.phone.substr(0,3)+"****"+item.phone.substr(7,4):"无"}}
									</view>
								</view>
							</label>
				
							<view @click="goEdit(item)" style="margin-right:30rpx;">
								<u-icon name="edit-pen" color="#3688ff" size="56"></u-icon>
							</view>
							<view  @click="clickDele(item)">
								<u-icon name="trash-fill" color="#3688ff" size="56"></u-icon>
							</view>
						</view>
						<view style="margin: 40rpx 0;text-align: center;" v-if='listTotal&&listTotal.length>0'>
							已展示所有联系人
						</view>
					</checkbox-group>
					
					<view class="bottom-sure" @click="config()">
						确定
					</view>
			</view>
		</view>
		<u-modal :show="showModal" @confirm="confirmDele" @cancel="showModal=false" showCancelButton title="确认删除该联系人" ></u-modal>
	</view>
</template>

<script>
export default {
  props: ['contactTotal', 'contactNum','moreContactIndex'],
  watch: {
    contactTotal: {
		  handler(newValue, oldValue) {
		    if (newValue) {
		      this.listTotal = this.contactTotal
		    }
		  },
		  deep: true,
		  immediate: true
    }
  },
  data() {
    return {
      showPop: false, //控制联系人弹窗显示隐藏
      listTotal:[],//所有联系人
      showModal: false, //确认弹窗显示隐藏
      contactName:'',//删除联系人的Id
      contactopenid:'',//删除联系人的openid
    }
  },
  methods: {
    //---展示编辑弹窗，并传值给编辑弹窗
    goEdit(data){ 
      let obj=data||''
      this.$parent.showEdit(obj,this.moreContactIndex)
    },
    //---确定选中的联系人
    config() { 
      this.showPop = false
      let chooseArr=[]
      this.listTotal.forEach(item=>{
        if(item.ifChoose){
          chooseArr.push(item)
        }
      })
      this.$emit('contactListConfig', chooseArr)
    },
    //---联系人姓名变化
    chooseContactChange(e){
      let value=e.detail.value
      if (value.length > this.contactNum) {
        let number=value.length-this.contactNum
        value=value.slice(number)
      }
      let arr=[]
      value.forEach(item=>{
        arr.push(JSON.parse(item))
      })
      //先全部取消选中，后面根据选中的值来判断谁选中
      this.listTotal.forEach(item=>{
        item.ifChoose=false
      })
      arr.forEach(item=>{
        this.listTotal.forEach(item2=>{
          if(item.id==item2.id){
						 item2.ifChoose=true
          }
        })
      })
    },
    //---点击删除
    clickDele(item) {
      this.showModal = true
      this.contactName=item.name
      this.contactopenid=item.openid
    },
    //---确认删除
    confirmDele(){
      let data={
        name:this.contactName,//联系人姓名
        openid:this.contactopenid//联系人openid
      }
      this.$request('wechatUser/contact/deleteContact', data).then((res) => {
        if (res.code == '00') {
          uni.showToast({
            title:'删除成功',
            icon:'none'
          })
          this.showModal = false
          this.$parent.getContactList()
        } else {
          uni.showToast({
            title:res.message,
            icon:'none'
          })
        }
      }).catch(() => {
        this.showModal = false
      })
    }
  }
}
</script>

<style scoped="scoped" lang="scss">
	.list-bg{
		background:rgba(0,0,0,0.4);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		padding-top: 100rpx;
	}
	.list-wrap{
		height: 100%;
		display: flex;
		flex-direction: column;
		background: #ffffff;
		border-radius: 20rpx;
	}
	.top-num{
		height: 100rpx;
		display: flex;
		align-items: center;
		background: #FFF1E8;
		color: #FC771D;
		justify-content: center;
		font-weight: bold;
		font-size: 32rpx;
		position: relative;
		border-radius: 20rpx 20rpx 0 0;
	}
	.top-icon{
		position: absolute;
		right: 24rpx;
	}
	.top-add {
		height:150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1px solid #e6e6e6;
		padding: 0 24rpx;
		background: #ECF3FE;
	}
	.top-add text{
		display: inline-block;
		width:100%;
		height: 76rpx;
		text-align: center;
		line-height:76rpx;
		border: 1px solid $theme;
		color:$theme;
		border-radius:5rpx;
		box-shadow:0px 0px 12px 2px rgba(0,0,0,0.08);
	}
	.bottom {
		padding:0 24rpx 100rpx 24rpx;
		flex: 1;
		overflow-y: scroll;
	}
	.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;
	}
	.bottom-sure{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background:$theme;
		font-size:32rpx;
		font-weight: bold;
		color: #ffffff;
	}
</style>
