<template>
  <div class="insurance-login">
    <van-form
      ref="loginForm"
      class="insurance-login-form"
    >
      <!-- 控制补全信息显示隐藏 -->
      <template v-if="!need">
        <div>
          <div class="login-form-label">
            <span>*</span>领取人手机号
          </div>
          <div class="login-form-tips">
            <van-icon name="warning-o" />为保证筛查准确性，请本人填写相关信息和联系方式
          </div>
          <van-field

            v-model="formData.mobilePhone"
            name="手机号"
            clearable
            placeholder="手机号"
            :rules="[{ required: true, message: '请输入手机号' },{ validator:validatorPhoneNum, message: '手机号格式填写有误' }]"
          />
          <div
            class="login-form-message"
          >
            <van-field
              v-model="formData.checkCode"
              center
              clearable
              placeholder="请输入验证码"
              :rules="[{ required: true, message: '请输入验证码' }]"
            />
            <van-button
              size="small"
              type="primary"
              class="message-btn"
              :class="{'send-btn' : isSend}"
              native-type="button"
              @click="getCode"
            >
              {{ isSend ? `${second}S后重发` : "获取验证码" }}
            </van-button>
          </div>
        </div>
      </template>
      <template v-else>
        <div>
          <div class="login-form-label">
            <span>*</span>领取人姓名
          </div>
          <van-field
            v-if="need"
            v-model="formData.patientName"
            clearable
            name="领取人姓名"
            placeholder="请输入领取人姓名"
            :rules="[{ required: true, message: '请输入领取人姓名' },
                     { validator:validatorName, message: '请输入正确姓名，不少于两个字' }]"
          />
          <div class="login-form-label">
            <span>*</span>领取人身份证
          </div>
          <van-field
            v-if="need"
            v-model="formData.idCard"
            clearable
            name="领取人身份证"
            placeholder="请输入领取人身份证"
            :rules="[{ required: true, message: '请输入领取人身份证' },{ validator:validatorIdCard, message: '身份证号码格式填写有误' }]"
          />
        </div>
      </template>

      <div
        class="login-form-submit"
        @click="submit"
      >
        {{ need ? '领取权益':'领取/查看权益' }}
      </div>
    </van-form>
    <!-- 滑块验证 -->
    <slideToCheck
      v-if="showCheckDialog"
      :mobile="formData.mobilePhone"
      @closeSlideCheckpageDialog="closeSlideCheckpageDialog"
      @refreshGetMsg="refreshGetMsg"
    />
    <!-- 用户协议 -->
    <div
      v-if="need"
      class="insurance-login-agreement"
    >
      <van-checkbox
        v-model="checked"
      >
        我已阅读并同意 <span @click="goProtocol(prototypes.yqjkyhxy)">《云鹊健康用户协议》</span> 和 <span @click="goProtocol(prototypes.yhzqtys)">《云鹊隐私声明》</span>
      </van-checkbox>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import { sendEncryptRequest } from '@/utils/encrypt';
import { checkNeedImgCode, getMessageCode, insuranceLogin, getPrototypes } from '@/api/login';
import { signDetection} from '@/api/detection.js';

import slideToCheck from '@/components/slide-check/index';
export default {
  components: {
    slideToCheck
  },
  data() {
    return {
      formData: {
        patientName: '',
        mobilePhone: '13783339943',
        idCard: '',
        checkCode:''
      },
      need:false,
      checked:false,
      timer:null,
      isSend: false,
      second: 60,
      sixThen: 60,
      showCheckDialog: false,
      prototypeId:'',
      prototypeLogId: '',
      prototypes: {},
      token: '',
      patientId:''
    };
  },
  computed: {

  },
  mounted() {
    const {projectEquityNo} = this.$route.query;
    this.projectEquityNo = projectEquityNo;
    this.getPrototypes(projectEquityNo);
  },
  methods: {
    ...mapActions('home', ['setImgCodeData', 'setNeedTimer']),
    // 验证姓名
    validatorName(val) {
      console.log(val);
      if (val === '') {
        return true;
      }
      return /^[\u4E00-\u9FA5A-Za-z\s]+(·[\u4E00-\u9FA5A-Za-z]+)*$/.test(val);
    },
    // 验证手机号码
    validatorPhoneNum(val) {
      console.log(val);
      if (val === '') {
        return true;
      }
      return /^([1][3,4,5,6,7,8,9])\d{9}$/.test(val);

    },
    // 验证身份证
    validatorIdCard(val) {
      console.log(val);
      if (val === '') {
        return true;
      }
      return /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test(val);

    },
    // 关闭 滑块
    closeSlideCheckpageDialog() {
      this.showCheckDialog = false;
    },
    // 获取协议id
    getPrototypes(projectEquityNo) {
      getPrototypes(projectEquityNo).then(res => {
        console.log(res);
        this.prototypes = res.data;
      });
    },
    // 获取验证码
    getCode() {
      this.checkControlStatus();
    },
    // 发送验证码
    refreshGetMsg() {
      this.$toast({
        message: '验证码已发送',
        icon: 'passed',
      });
      this.isSend = true;
      this.second--;
      this.timer = setInterval(() => {
        this.second--;
        if (this.second <= 0) {
          clearInterval(this.timer);
          this.second = this.sixThen;
          this.isSend = false;
          }
      }, 1000);
    },
    signDetection(protocolType, patientId) {
      const obj = {
        protocolType,
        patientId
      };
      signDetection(obj).then(res => {
          if (res.code !== '000000') {
            return this.$toast(res.message);
          }
      });
    },
    checkControlStatus() {
      const data = {
        mobile: this.formData.mobilePhone,
        jigsawVersion: 'v1',
      };
      sendEncryptRequest(data, (params) => {
        checkNeedImgCode(params).then((res) => {
          if (res.code == '000000') {
            if (res.data.capCode) {
              // 跳转至风控页面
              this.setImgCodeData(res.data);
              this.showCheckDialog = true;
            } else {
              // 不需要风控直接获取验证码
              getMessageCode();
            }
          } else {
            this.$toast(res.message);
          }
        });
      });
    },
    // 提交事件
    submit() {
      this.$refs.loginForm.validate().then(res => {
        console.log(res);
        if (this.formData.checkCode == '') {
          this.$toast('请输入验证码');
          return;
        }
        if (this.need && !this.checked) {
          this.$toast('请勾选同意底部协议后进行登录');
          return;
        }

        const data = {
          checkCode: this.formData.checkCode,
          idCard: this.formData.idCard,
          mobilePhone: this.formData.mobilePhone,
          patientName: this.formData.patientName,
          projectEquityNo:this.projectEquityNo,
        };
        if (this.need) {
          data.checkCode = '';
          data.token = this.token;
        }
        insuranceLogin(data).then(res => {
          console.log(res.code);
          if (res.code == '000000') {
            this.patientId = res.data.patientId;
            if (res.data.status == '0') {
              this.need = true;
              this.token = res.data.token;
              this.$dialog.alert({
                title: '温馨提示',
                message: '您尚未领取过本权益，需要完善相关信息',
                theme: 'round-button',
                confirmButtonColor:'#00bda5'
              });
            } else {
              this.signDetection(this.prototypes.yqjkyhxy, this.patientId);
              this.signDetection(this.prototypes.yhzqtys, this.patientId);
              window.location.href = res.data.questionnaireUrl;
            }
          }else {
            this.$toast(res.message);
          }
        });
      });
    },
   // 页面跳转
    goProtocol(type) {
      this.$router.push({
        path: '/protocol',
        query: {
          type
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.insurance-login{
  height: 100vh;
  overflow: hidden;
  background-image: url('~@/assets/images/bg-login.png');
  background-repeat: no-repeat;
  background-size: 100% 276px;
  .insurance-login-form{
    margin:246px auto 160px auto;
    padding: 24px 19px;
    background: #fff;
    width: 317px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
    box-shadow: 0px 18px 12px 0px #EBF9F8;
    border-radius: 40px;
    border: 1px solid rgba(0,189,165,0.33);
    .login-form-label{
      display: flex;
      align-items: center;
      height: 16px;
      font-size: 15px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #02120F;
      line-height: 16px;
      margin-bottom: 10px;
      span{
        margin-right: 3px;
        color: #FB602D;
      }
    }
    .login-form-tips{
      height: 16px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 16px;
      margin-bottom: 18px;
      .van-icon{
        margin-right: 4px;
      }
    }
    .login-form-bottom{
      height: 10px;
    }
    .login-form-message{
      display: flex;
      justify-content: space-between;
      .van-field{
        width: 170px;
      }
      .message-btn{
        width: 130px;
        height: 44px;
        border-radius: 6px;
        background: #00BDA5 ;
        border: 1px solid #00BDA5;
        font-size: 16px;
        line-height: 44px;

      }
    }
    .login-form-submit{
      width: 240px;
      height: 64px;
      margin: 0 auto;
      background: linear-gradient(271deg, #15CBB6 0%, #19C6B2 44%, #32ECCD 100%);
      box-shadow: 0px 7px 7px 0px rgba(43,225,197,0.26), inset 0px 3px 7px 0px rgba(243,255,255,0.48), inset 0px -3px 8px 0px rgba(97,184,169,0.5);
      border-radius: 66px;
      border-image: linear-gradient(274deg, rgba(157, 254, 239, 1), rgba(226, 255, 250, 1)) 2 2;
      font-size: 21px;
      font-family: PingFangSC-Semibold, PingFang SC;
      text-align: center  ;
      font-weight: 600;
      color: #FFFFFF;
      line-height: 64px;
      margin-bottom: 15px;
    }
    .van-field {
      overflow: visible;
      padding: 0;
      margin-bottom: 15px;
      /deep/.van-field__value{

      }
      /deep/ .van-field__body{
        height: 44px;
        background: #F7F8F9;
        align-items: center;
        padding: 0 12px;
      border-radius: 6px;

      }
      /deep/ .van-field__error-message{
        padding-left: 12px;
      }
      &::after{
        display: none;
      }
    }
  }
  .insurance-login-agreement{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 21px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height:21px;
    span{
      color: #00BDA5;
    }
    /deep/ .van-checkbox__icon{
      height: 12px;
      width: 12px;
    }
    /deep/ .van-checkbox__icon .van-icon{
      height: 12px;
      width: 12px;
      font-size: 12px;
      line-height: 12px;
    }
    /deep/ .van-checkbox__icon--checked .van-icon{
      background: #00BDA5;
      border-color: #00BDA5
    }
    /deep/ .van-checkbox__label{
      margin-left: 4px;
    }
  }
}
</style>
