<template>
  <div>
    <van-checkbox class="radio-sty" icon-size="24px" checked-color="#ee0a24" v-model="checked">{{ protocol }}</van-checkbox>
    <div class="doc-style">
      <div @click="protocolclick">
        <p>《成都银行芙蓉锦城信用卡领用合约》</p>
        <p>《成都银行芙蓉锦城信用卡章程》</p>
        <p>《成都银行银联芯片信用卡小额免密免签服务协议》</p>
        <p>《重要说明》</p>
        <p>《随意分约定》</p>
      </div>
      <div class="btn-area">
        <button @click="stopCheck">返回</button>
        <button :style="checked ? agree : '' " @click="submit">同意</button>
      </div>
    </div>
    <van-popup v-model:show="signPopupShow" round class="popup-sign-sty" @close="close">
      <div class="signTitle-sty">电子签名</div>
      <vue-esign ref="esign" :width="600" :height="300" style="border: 1px solid #919187" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
      <div class="sign-btn-sty">
        <van-button text="取消" color="#C9C9C9" class="item-sty" @click="signPopupShow = false" />
        <van-button text="清除" color="#FF0000" class="item-sty" @click="clearCanvas" />
        <van-button text="确认" color="#FF0000" class="item-sty" @click="handleGenerate" />
      </div>
    </van-popup>
    <van-popup v-model:show="potocolPopupShow" round class="popup-potocol-sty" @close="time = 0">
      <div class="potocolTitle-sty">成都银行服务协议</div>
      <div class="potocol-view-sty">
        <protocol-view></protocol-view>
      </div>
      <div class="potocol-btn-sty">
        <van-button text="取消" color="#C9C9C9" class="item-sty" @click="potocolCancel" />
        <van-button :disabled="countdownEnd"  color="#FF0000" class="item-sty" @click="protocolReadClick">阅读并同意 {{countdown}}</van-button>
      </div>
    </van-popup>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import {Checkbox, CheckboxGroup, Popup } from 'vant';
import {NativeUI} from "@/public/ts/NativeUI";
import protocolView from "@/views/workbench/contract/protocol.vue";
import IF from "@/public/factory/InterFaceFactory";
import systemApi from "@/constants/api/ms-system/system.api";
import Public from "@/public/ts/Public";
import {MethodType} from "@/constants/enum/general/method-type.enum";
import Api from "@/services/api.service";

Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Popup);

@Component({
  name: 'CreditCardProtocol',
  components: {
    protocolView
  }
})
export default class CreditCardProtocol extends Vue {
  @Prop(Number) tabActive: Number | any;
  @Prop(Object) custInfo: Object | any;

  protocol = '请申请人确认以下全部协议，知悉相关业务风险并自愿遵守贵行各项服务协议和制度规定。明确知悉本人点击本页面” 确认 “后，即表示阅读并同意以下协议:';
  checked = false;
  agree = {
    'color': 'white',
    'background-color': '#FD5065'
  };
  lineWidth = 6;
  lineColor = '#000000';
  bgColor = '';
  resultImg = '';
  isCrop = false;
  potocolPopupShow = false;
  esignHeight = '100%';
  countdown = '30S';
  signPopupShow = false;
  time = 0;
  countdownEnd = true;
  imgFil: any;
  questionAnswer: any = {};

  //关闭弹框
  close(){
    (this.$refs.esign as any).reset()
  }
  //清除画布
  clearCanvas(){
    (this.$refs.esign as any).reset();
  }
  // 生成签字图
  handleGenerate() {
    const _this = this;
    (this.$refs.esign as any)
      .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
      .then((res: any) => {
        _this.resultImg = res;
      })
      .catch((err: any) => {
        NativeUI.toast('请签名后再生成签字图片');
      });
    // 在这里向后端发请求把转换后的base64文件传给后端，后端接收以后再转换成图片做静态图片存储
    // 当然也可以把base64转成流文件blob格式的，类似上传给后端这样，具体哪种方式看后端要求
    setTimeout(() => {
      // 这里要使用定时器稍微延后以后就能取到base64数据了，当然也可以再加一个确认按钮，如：确认使用这张base64签名图片
      // 点击确认以后，在其回调函数中，再把base64的签名图片传给后端用于存储
      console.log(this.resultImg);
      this.imgFil = Public.base64toFile(this.resultImg, '签名');
      this.signPopupShow = false;
    }, 200);

  }
  protocolReadClick(){
    this.potocolPopupShow = false;
    if(window.plus){
      this.$native.cloudWalkBiometrics().then((res: any) => {
        console.log(JSON.stringify(res));
      })
    }else{
      this.potocolPopupShow = false;
      this.signPopupShow = true;
    }
  }
  protocolclick(){
    this.potocolPopupShow = true;
    this.countdownEnd = true;
    this.theCountdown();
  }
  stopCheck(){
    if (this.tabActive != 0){
      this.$emit("activeChange", this.tabActive-1);
    }
  }
  submit(){
    this.questionAnswer = this.$store.getters.getQuestionAnswerObj;
    console.log(this.imgFil.size);
    console.log(this.questionAnswer);
    if(this.checked){
      const param = {
        "name": this.custInfo.CUSTOMERNAME,
        "sex": this.custInfo.SEX,
        "busId": "",
        "busType": "",
        "option": "",
        "ContractNo": "",
        "nation": "汉族",
        "cerType": "身份证",
        "cerId": this.custInfo.CERTID,
        "nationality": "中国",
        "birthday": "",
        "issAuth": "",
        "cerValidity": "",
        "occupation": "",
        "phone": this.custInfo.TELPHONE,
        "Address": this.custInfo.COMPANYADD,
        "BusContent":"网贷面签办理",
        "cardNum": this.custInfo.CREDITCARDID,
        "product": "随意分",
        "AccType": "信用卡",
        "lssDate": this.custInfo.CREDITCARDDATE,  //发卡日期
        "dateTime":"",
        "ftfPer": sessionStorage.getItem("USERNAME"),
        "handRes": "",
        "ftfAddress": "", //当前位置
        "ftfPunchTime": "", //当前时间
        "option1": this.questionParams(this.questionAnswer.radio1),
        "option2": this.questionParams(this.questionAnswer.radio2),
        "option3": this.questionParams(this.questionAnswer.radio3),
        "option4": "ContractYes4",
        "option5": "ContractYes5",
        "option6": "ContractYes6",
        "option7": "ContractYes7",
        "option8": "ContractYes8",
        "option9": "ContractYes9",
        "option10": "ContractYes10",
        "cusName": this.custInfo.CUSTOMERNAME
      };
      NativeUI.showWaiting('查询中...');
      return IF.transferFile(systemApi.createContract, {fileParam: JSON.stringify(param),file: this.imgFil}).then((res: any) => {
        NativeUI.closeWaiting();
        console.log(res);
        NativeUI.toast('上传成功');
      });
      this.$emit("activeChange", this.tabActive+1);
    }else NativeUI.toast('请勾选同意协议');
  }
  /**
  *@Description 将问题答案封装为后端所需参数
  *@Author XWH
  *@Date 2022/2/24 20:18
  */
  questionParams(answer: any) {
    switch (answer) {
      case '1':
        return "A";
      case '2':
        return "B";
      case '3':
        return "C";
      case '4':
        return "D";
      default:
        return "";
    }
  }
  /**
  *@Description 倒计时
  *@Author XWH
  *@Date 2022/2/24 10:53
  */
  theCountdown(){
    const me = this;
    me.time = 1;
    const timer = setInterval(function() {
      if (me.time == 0) {
        me.countdown = '';
        me.countdownEnd = false;
        clearInterval(timer);
      } else {
        me.countdown = me.time + 'S';
        me.time--;
      }
    }, 1000);
  }
  potocolCancel(){
    this.potocolPopupShow = false;
  }
}
</script>
<style scoped lang="scss">
.group-sty{
  height: 80px;
  margin: 10px 40px;
}
.radio-sty{
  margin: 10px 40px;
  font-size: 16px;
  font-weight: bold;
}
::v-deep .van-checkbox__label{
  line-height: 30px
}
.doc-style{
  display: flex;
  flex-direction: column;
  align-items: center;
}
p{
  font-size: 16px;
  color: #53C7F8;
}
.btn-area{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.btn-area > button {
  width: 180px;
  height: 50px;
  border: 1px solid #BEBEBE;
  font-size: 19px;
  border-radius: 30px;
  outline: none;
}
.btn-area > button:nth-child(1){
  color: #BEBEBE;
  background-color: white;
  margin-right: 20px;
}
.btn-area > button:nth-child(2){
  color: white;
  background-color: #FF8651;
}
.doc-style > div:nth-child(1){
  width: 50%;
  height: 380px;
  background-image: url("../../../assets/images/protocol.png");
  background-size: 100% 100%;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 80px;
}
.popup-sign-sty{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 70%;
  height: 420px;
  .signTitle-sty{
    font-size: 20px;
  }
}
.popup-potocol-sty{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 80%;
  height: 80%;
}
.sign-btn-sty{
  display: flex;
  justify-content: space-around;
  width: 70%;
  .item-sty{
    width: 100px;
    border: none;
    border-radius: 5px;
    color: white;
  }
}
*, ::after, ::before {
  font-size: 18px;
}
.potocol-btn-sty{
  display: flex;
  justify-content: space-around;
  width: 40%;
  .item-sty{
    width: 130px;
    border: none;
    border-radius: 5px;
    color: white;
  }
}
.potocolTitle-sty{
  font-size: 20px;
  font-weight: bold;
}
.potocol-view-sty{
  border: 1px solid #919187;
  width: 90%;
  height: 75%;
}
</style>