<template>
  <div class="insurance-sz">
    <div class="text">
      <img
        src="https://files.yunqueyi.com/image/jpeg/common/20230506144713814.jpg"
        alt=""
      >
    </div>
    <div class="bottom">
      <div
        class="bottom-text"
        @click="() =>show=true"
      >
        <div class="bottom-text-left">
          选择被保险人
        </div>
        <div class="bottom-text-right">
          <span v-if="person">{{ person }}</span>
          <span v-else>请选择</span><van-icon name="arrow" />
        </div>
      </div>
      <div class="bottom-btn">
        <van-button
          class="btn"
          :disabled="!person"
          @click="toPage"
        >
          领取权益
        </van-button>
      </div>
    </div>
    <van-popup
      v-model="show"
      closeable
      round
      position="bottom"
      :style="{ height: '500px' ,overflow:'hidden'}"
    >
      <div class="popup-title">
        选择被保险人
      </div>
      <div class="popup-list">
        <van-radio-group v-model="person">
          <van-cell-group>
            <van-cell
              v-for="(item) in userinfo"
              :key="item.id"
              clickable
              @click="person = item.name"
            >
              <div class="popup-list-item">
                <div class="name">
                  {{ item.name }}
                </div>
                <div class="info">
                  <div class="phoneNum">
                    <span>手机号码：</span>
                    <span>{{ item.mobile }}</span>
                  </div>
                  <div class="idCard">
                    <span>身份证号：</span>
                    <span>{{ item.id_number }}</span>
                  </div>
                </div>
              </div>
              <template #right-icon>
                <van-radio :name="item.name" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <div class="popup-btn-box">
        <van-button
          class="popup-btn"
          :disabled="!person"
          @click="show=false
          "
        >
          确定
        </van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      show: false,
      person: null,
      env:'test',
      userinfo: [

      ]
    };
  },
  mounted() {
    const { env } = this.$route.query;
    this.env = env ? env : 'prod';
    this.getlist();
  },
  methods: {
    getlist() {
    const that = this;
      axios.get(`https://project.picahealth.com/batch_get_person_info?num=10&env=${this.env}`).then(function ({data}) {
        console.log(data);
        if (data.code === '000000') {
          that.userinfo = data.data;
        }
      });
    },
    toPage() {
      const externalOrderNo = Math.floor(new Date().getTime() / 1000);
      const projectEquityNo = 'SZ202305031000597601';
      console.log(externalOrderNo);
      const item = this.userinfo.filter(ele => ele.name === this.person)[0];
      localStorage.setItem('chooseInfo', JSON.stringify(item));
      this.$router.push({
        path: '/appoint-demo',
        query: {
          externalOrderNo:'SZ' + externalOrderNo,
          projectEquityNo
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.insurance-sz{
  height:  1772px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 120px;
  .text{

  }
  .bottom{
    position: fixed;
    bottom: 0;
    width: 100vw;
    background: #fff;
    padding-bottom: 27px;
    .bottom-text{
      padding: 10px 21px 10px 15px;
      display: flex;
      justify-content: space-between;
      .bottom-text-left{
        height: 18px;
        font-size: 13px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #000000;
        line-height: 18px;
        span{
          margin-right: 6px;
        }
      }
      .bottom-text-right{
        height: 18px;
        font-size: 13px;
        font-weight: 600;
        line-height: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #999999;
      }
    }
    .bottom-btn{
      background: #FFFFFF;
      box-shadow: inset 0px 1px 0px 0px #E9E9E9;
      overflow: hidden;
      text-align: center;
      .btn{
        width: 351px;
        height: 40px;
        background: #00BDA5;
        border-radius: 20px;
        margin: 4px auto;
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 40px;
        text-align: center;

      }
    }
  }
}
.van-popup--bottom{
  width: 100%;
}
.popup-title{
  width: 100%;
  position: absolute;
  top: 0;
  height: 25px;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #02120F;
  line-height: 25px;
  text-align: center;
  padding: 17px 0;
}
/deep/ .van-cell{
  padding-top:0 ;
  padding-bottom: 0;
}
.popup-list{
  position: absolute;
  width: 100%;
  top: 50px;
  height: calc(100% - 135px);
  overflow: auto;
  padding-bottom: 130px;
}
.popup-list-item{
  display: flex;
  align-items: center;
  padding: 23px 0;
  .name{
    width: 45px;
    font-size: 15px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #212121;
    text-align: center;
    margin-right: 12px;
  }
  .info{
    .phoneNum{
      height: 14px;
      font-size:14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 14px;
      margin-bottom: 6px;
    }
    .idCard{
      height: 14px;
      font-size:14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 14px;
    }
  }
}
.popup-btn-box{
  position: fixed;
  z-index: 2;
  width: 100%;
  bottom: 0;
  padding: 20px 0;
  background: #FFFFFF;
  border: 1px solid #ebedf0;
}
.popup-btn{
  margin: 0 auto;
  width: 351px;
  height: 40px;
  background: #00BDA5;
  border-radius: 20px;
  font-size: 16px;
  text-align: center;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 40px;
  display: block;

}
/deep/ .van-radio__icon--checked .van-icon{
  background: #00bda5;
  border-color: #00bda5;
}
</style>
