<template>
  <div class="contact_box">
    <div class="flex_box">
      <p class="contact_title">出行人</p>
      <span class="contact_count" v-if="people*limit">需添加{{child*limit}}位学生,{{people*limit}}位家长</span>
      <span class="contact_count" v-else>只需添加{{child*limit}}位学生</span>
      <span class="contact_btn" @click="enterSelectContact">选择出行人</span>
    </div>
    <p class="tip">
      <van-icon class="icon" name="warning" />
      填写项须与出游所持证件保持一致
    </p>
    <div class="contact_item" v-for="(item,index) in selectedContactArr" :key="index">
      <van-icon class="close" name="close" @click="delContact(index)" />
      <div class="info">
        <p class="name">{{item.travelerName}}<span>{{item.userType==1?"学生":"家长"}}</span></p>
        <p class="cardid">身份证{{item.travelerIdCard}}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["limit", "people", "child"],
  data () {
    return {
      selectedContactArr: [],//选择的出行人
    }
  },
  mounted () {
    // 选择的出行人
    let selectedContactArr = localStorage.getItem('selectedContactArr');
    if (selectedContactArr) {
      selectedContactArr = JSON.parse(selectedContactArr);
      this.selectedContactArr = selectedContactArr
    }
  },
  methods: {
    // 选择联系人
    enterSelectContact () {
      this.$router.push({ name: 'SelectContact', query: { limit: this.limit } })
    },
    // 删除联系人
    delContact (index) {
      this.selectedContactArr.splice(index, 1)
      localStorage.setItem('selectedContactArr', JSON.stringify(this.selectedContactArr))
    }
  }
}
</script>
<style lang="scss">
.contact_box {
  font-size: 28px;
  .flex_box {
    padding: 0 22px;
    height: 98px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .contact_title {
    display: inline-block;
    font-weight: bold;
  }
  .contact_count {
    display: inline-block;
    width: 420px;
    color: #666;
    font-weight: normal;
  }
  .contact_btn {
    color: #4092ff;
    font-weight: normal;
  }
  .tip {
    padding: 0 22px;
    margin-bottom: 28px;
    color: #999;
    .icon {
      color: #ff9604;
    }
  }
  .contact_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 2px solid #f2f4f9;
    width: 702px;
    margin: 0 auto;
    .close {
      padding: 20px;
      padding-left: 0;
      font-size: 40px;
      color: #4092ff;
    }
    .info {
      width: 630px;
      padding: 28px 0;
      .name {
        font-size: 30px;
        font-weight: bold;
        span {
          display: inline-block;
          padding: 0 4px;
          margin-left: 10px;
          font-size: 22px;
          font-weight: normal;
          color: #4092ff;
          border: 1px solid #e6e9ef;
        }
      }
      .cardid {
        margin-top: 6px;
        font-size: 24px;
        color: #999;
      }
    }
  }
}
</style>