<template>
  <div class="insurance-login">
    <van-form
      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: '请输入手机号' }]"
          />
          <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: '请输入领取人姓名' }]"
          />
          <div class="login-form-label">
            <span>*</span>领取人身份证
          </div>
          <van-field
            v-if="need"
            v-model="formData.idCard"
            clearable
            name="领取人身份证"
            placeholder="请输入领取人身份证"
            :rules="[{ required: true, message: '请输入领取人身份证' }]"
          />
        </div>
      </template>

      <div
        class="login-form-submit"
        @click="submit"
      >
        领取/查看权益
      </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(42)">《云鹊健康用户协议》</span> 和 <span @click="goProtocol(5)">《云鹊隐私声明》</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: '13783339933',
        idCard: '',
        checkCode:''
      },
      need:false,
      checked:false,
      timer:null,
      isSend: false,
      second: 60,
      sixThen: 60,
      showCheckDialog: false,
      prototypeId:'',
      prototypeLogId:'',
    };
  },
  computed: {

  },
  mounted() {
    const {projectEquityNo} = this.$route.query;
    this.projectEquityNo = projectEquityNo;
    this.getPrototypes(projectEquityNo);
  },
  methods: {
    ...mapActions('home', ['setImgCodeData', 'setNeedTimer']),
    closeSlideCheckpageDialog() {
      this.showCheckDialog = false;
    },
    getPrototypes(projectEquityNo) {
      getPrototypes(projectEquityNo).then(res => {
        console.log(res);
      });
    },
    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() {
      if (this.need && !this.checked) {
        this.$toast('请勾选同意底部协议后进行登录');
        return;
      }
//       {
//   "checkCode": "string",
//   "idCard": "string",
//   "mobilePhone": "string",
//   "patientName": "string",
//   "projectEquityNo": "string",
//   "prototypeId": 0,
//   "prototypeLogId": 0
// }
      const data = {
        checkCode: this.formData.checkCode,
        idCard: this.formData.checkCidCardode,
        mobilePhone: this.formData.mobilePhone,
        patientName: this.formData.patientName,
        projectEquityNo:this.projectEquityNo,
      };
      insuranceLogin(data).then(res => {
        if (res.code == '000000') {
          if (res.data.status == '0') {
            this.need = true;
            this.$dialog.alert({
              title: '温馨提示',
              message: '您尚未领取过本权益，需要完善相关信息',
              theme: 'round-button',
              confirmButtonColor:'#00bda5'
            });
          }
        }
      });
    },
    phoneFun() {

    },
    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>
