<template>
  <div class="insurance-register">
    <page-model
      v-if="picaWechat != 'wechat'"
      ref="PageModel"
      :header-info="headerInfo"
    />
    <div class="insurance-register-bg">
      <div class="bg-img">
        <img
          src="https://files.yunqueyi.com/image/png/common/20230302151152742.png"
          alt="success"
        >
      </div>
      <div class="text">
        <span class="text-icon">
          <img
            src="https://files.yunqueyi.com/image/png/common/20230302152425130.png"
            alt="success"
          >
        </span>
        <span class="text-border">&nbsp;&nbsp;&nbsp;&nbsp;{{ hospitalName }} &nbsp;&nbsp;</span>
      </div>
      <div class="wrap-reg">
        <div class="choose-section">
          <van-form
            ref="dectionForm"
            validate-first
          >
            <van-field
              label="被保险人信息"
              required
              disabled

              class="appoint-form-title"
            />
            <van-field
              v-model="dectionForm.beneficiaryName"
              label="被保险人"
              clearable
              class="appoint-form-items"
              placeholder="请输入被保险人姓名"
              :rules="[{ required: true, message: '请输入被保险人姓名' },{
                         pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/,
                         message: '请输入正确格式',
                       },
                       {
                         pattern: /^.{2,20}$/,
                         message: '被保险人姓名请填写2-20位',
                       },]"
            />
            <van-field
              v-model="dectionForm.beneficiaryPhone"
              class="appoint-form-items"
              label="手 机 号"
              clearable
              placeholder="请输入手机号"
              :rules="[{ required: true, message: '请输入手机号' },
                       {
                         pattern: /^([1][3,4,5,6,7,8,9])\d{9}$/,
                         message: '手机号格式填写有误',
                       },]"
            />
            <van-field
              v-model="dectionForm.beneficiaryIdNum"
              class="appoint-form-items"
              clearable
              label="身份证号"
              placeholder="请输入真实身份证号"
              :rules="[{ required: true, message: '请输入真实身份证号' },
                       {
                         pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                         message: '身份证号格式填写有误',
                       },]"
            />
          </van-form>
        </div>
        <van-button
          round
          block
          type="info"
          :disabled="!canSubmit"
          class="appoint-form-submit "
          :class="canSubmit ? 'appoint-form-submit-active':''"
          @click="appointment"
        >
          免费领取
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getDetailHospital, getCheckInUserInfo} from '@/api/appoint';

export default {
  components: {
  },
  data() {
    return {
      picaWechat:window._picaWechat,
      headerInfo: {
        title: '肠癌早筛权益优先领取登记',
        isBlack: true,
        backMethod: 'web',
        style: 'backgroundColor:#ffffff;zIndex:100;',
        background: '',
      },
      dectionForm: {
        beneficiaryPhone: '',
        beneficiaryIdNum:'',
        beneficiaryName: '',
      },
      hospitalName:''
    };
  },
  computed: {
    canSubmit() {
      return (
        this.dectionForm.beneficiaryIdNum &&
        this.dectionForm.beneficiaryName &&
        this.dectionForm.beneficiaryPhone
      );
    },
  },
  mounted() {
    document.title = '肠癌早筛权益优先领取登记';
    this.getID();
    const {projectEquityNo} = this.$route.query;
    this.$sendBuriedData({
      action: 'ACTION_WEB_AFTER',
      component_tag: '7802857#0#0#肠癌早筛权益优先领取登记',
      web_data:{projectEquityNo: projectEquityNo},
    });
  },
  methods: {
    getID() {
      console.log('--res', this.$route);
      const {hospitalId} = this.$route.query;
      if(hospitalId) {
        getDetailHospital(hospitalId).then(res => {
          console.log('--res', res);
          if (res.code === '000000') {
            const {name} = res.data;
            this.hospitalName = name;
          }
        });
      }
    },
    appointment() {
      const {projectEquityNo, hospitalId} = this.$route.query;
      this.$sendBuriedData({
        action: 'ACTION_WEB_CLICK',
        component_tag: '7802857#0#0#免费领取',
        web_data:{projectEquityNo: projectEquityNo},
      });

      this.$refs.dectionForm.validate().then(result => {
        console.log('this.dectionForm', result);
        const data = {
          idCard: this.dectionForm.beneficiaryIdNum,
          mobilePhone: this.dectionForm.beneficiaryPhone,
          patientName: this.dectionForm.beneficiaryName,
          hospitalId: hospitalId,
          projectEquityNo: projectEquityNo,
          idType: 1,
        };
        getCheckInUserInfo(data).then(res => {
          console.log('this.dectionForm', res);
          if (res.code === '000000') {
            this.$router.push({
              path: '/insurance-register-success',
              query: {
                projectEquityNo: projectEquityNo,
              },
            });
          }else {
            this.$toast(res.message);
          }
        });

      }).catch(err => {
        console.log(err);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.insurance-register {
  width: 100%;
  height: 100vh;
  overflow: auto;
  box-sizing: border-box;
  color: #ffffff;
  background: #F3FCFF;
  .insurance-register-bg{
    width: 100%;
    //height: 350px;
    position: relative;
    .bg-img{
      width: 100%;
      //height: 350px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .text{
      position: absolute;
      font-size: 10px;
      font-weight: 400;
      color: #08A588;
      top: 131px;
      left: 23px;
      display: flex;
      align-items: center;
      .text-icon{
        display: inline-block;
        width: 17px;
        height: 15px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .text-border{
        height: 13px;
        line-height: 13px;
        display: inline-block;
        border-radius: 5px;
        border: 1px solid #08A588;
        border-left: none;
        position: relative;
        left: -5px;
        box-sizing: content-box;
      }
    }
    .wrap-reg{
      width: 350px;
      background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
      box-shadow: 0px 18px 12px 0px #EBF9F8;
      border-radius: 20px;
      position: absolute;
      top: 170px;
      left: 13px;
    }
  }

  .choose-section {
    padding: 10px 12px;
    background: #ffffff;
    border-radius: 11px;
    font-weight: 600;
    /deep/ .van-field__label{
      color: #212121;
    }
    /deep/ .van-field__control:disabled{
      color: #323233;
      -webkit-text-fill-color: #323233;
    }
    .item {
      color: #212121;
      font-size: 14px;
      display: flex;
      height: 60px;
      align-items: center;
      position: relative;
      .input-key {
        font-weight: 300;
        margin-left: 10px;
      }
      .input-value {
        margin-left: 18px;
        font-weight: 500;
        overflow: visible;
      }
      .right {
        position: absolute;
        right: 10px;
        top: 25px;
      }
    }
    .height60 {
      height: 30px;
    }
    .required {
      position: relative;
    }
    .required::after {
      position: absolute;
      content: '*';
      display: block;
      left: -10px;
      top: 0;
      text-align: center;
      color: rgba(255, 56, 56, 1);
    }
  }
  .appoint-form-items{
    /deep/ .van-field__label{
      color: #999999;
    }

  }
  .appoint-form-placeholder{
    color: #999999;
  }
  .appoint-form-title::after{
    display: none;
  }
  .appoint-form-submit{
    margin-top: 30px;
    height: 40px;
    background: #D9D9D9;
    border-radius: 20px;
    border: none;
    position: absolute;
    font-size: 16px;
    font-weight: 600;
  }
  .appoint-form-submit-active{
    background: #00BDA5;
  }
}
</style>
