<template>
  <div style="height: 100%">
    <div class="titleInfo-sty">
      <div class="titleInfo-sty">随意分信用卡网申面签申请书共<p class="number-sty">10</p>项调查内容</div>
<!--      <span>-->
<!--        <span>-->
<!--          <img src="@/assets/svg/cursor-active.svg">-->
<!--          <p>查看</p>-->
<!--        </span>-->
<!--        <span>-->
<!--          <img src="@/assets/svg/cursor-active.svg">-->
<!--          <p>保存</p>-->
<!--        </span>-->
<!--      </span>-->
    </div>
    <div v-if="questionNo == 1" class="heading-sty">
      <p>1、您是通过何种渠道申请办理的“ 随意分 ”？</p>
      <van-radio-group  class="group-sty" v-model="radio1" @click="chooseAnswer">
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="1">A.找他人待办，并支付费用</van-radio>
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="2">B.成都银行营业网点</van-radio>
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="3">C.成都银行官方线上渠道，本人扫码申请</van-radio>
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="4">D.成都银行工作人员主动联系后，由我本人扫码申请</van-radio>
      </van-radio-group>
    </div>
    <div v-else-if="questionNo == 2" class="heading-sty">
      <p>2、您的工资劳务报酬年收入为（折合人民币）？</p>
      <van-radio-group  class="group-sty" v-model="radio2" @click="chooseAnswer">
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="1">A.4万元以下</van-radio>
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="2">B.4-20万元</van-radio>
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="3">C.20-50万元</van-radio>
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="4">D.50万元以上</van-radio>
      </van-radio-group>
    </div>
    <div v-else-if="questionNo == 3" class="heading-sty">
      <p>3、您的” 随意分 “资金用途是？</p>
      <van-radio-group  class="group-sty" v-model="radio3" @click="chooseAnswer">
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="1">A.购买住房</van-radio>
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="2">B.从事股本权益性投资或股票、期货等经营活动</van-radio>
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="3">C.住房装修装饰</van-radio>
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="4">D.购买自用交通工具</van-radio>
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="5">E.购买家庭大额耐用消费品</van-radio>
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="6">F.支付家庭成员旅游、婚假、医疗、保险、教育培训等消费用途</van-radio>
      </van-radio-group>
    </div>
    <div v-else-if="questionNo == 4" class="heading-sty">
      <p>4、用途声明：“随意分”资金仅用于以下指定用途：住房装修装饰；自用消费的交通工具；购买家庭大额耐用消费品；支付家庭成员境内外旅游、婚嫁费用；支付家庭成员医疗保健费用、购买商业性保险；支付家庭成员出国留学或国内各类教育培训费用；符合监管规定的其它个人消费用途。 不得用于购买住房，不得用于从事股本权益性投资和股票、期货等投机经营活动，不得用于国家法律和金融法规明确规定禁止的经营项目。若违反上述规定， 我行将有权采取提前收回全部分期额度本息费，按合同约定的违约处理及计入个人信用征信信息等处理措施。对此您是否知晓并同意？</p>
      <van-radio-group  class="group-sty" v-model="radio4" @click="chooseAnswer">
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="1">A.是</van-radio>
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="2">B.否</van-radio>
      </van-radio-group>
    </div>
    <div v-else-if="questionNo == 5" class="heading-sty">
      <p>5、“随意分”分期资金仅限通过电话银行、手机银行等我行渠道提用，不支持刷卡消费。“随意分”资金一经提用或提前还款，均不能撤销，我行将按照约定收取提前还款手续费，对已产生的手续费均不予退还；提用次日可申请提前还款（采用一次性支付手续费方式提用资金的，须至少产生一期账单后方可申请提前还款）。对此您是否知晓并同意？</p>
      <van-radio-group  class="group-sty" v-model="radio5" @click="chooseAnswer">
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="1">A.是</van-radio>
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="2">B.否</van-radio>
      </van-radio-group>
    </div>
    <div v-else-if="questionNo == 6" class="heading-sty">
      <p>6、“随意分”业务在授信有效期内，若您个人名下整体信用状况出现恶化，包括但不限于：预留的身份证件或联系方式失效，且未主动及时联系我行更新、负债增加、在本行或他行的贷款或信用卡逾期等，我行有权停止与您的分期合作，并采取限制提用、止付、降额、提前结清等限制用卡措施。请问您是否知晓并同意？</p>
      <van-radio-group  class="group-sty" v-model="radio6" @click="chooseAnswer">
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="1">A.是</van-radio>
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="2">B.否</van-radio>
      </van-radio-group>
    </div>
    <div v-else-if="questionNo == 7" class="heading-sty">
      <p>7、请问您是否知晓“随意分”信用卡的账单日为每月15日，每期账单最后还款日为每月20日？</p>
      <van-radio-group  class="group-sty" v-model="radio7" @click="chooseAnswer">
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="1">A.是</van-radio>
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="2">B.否</van-radio>
      </van-radio-group>
    </div>
    <div v-else-if="questionNo == 8" class="heading-sty">
      <p>8、随意分的所有还款，包括提前还款均须在还款日当日22：00前，将包括分期本金、分期手续费等在内的所有当期欠款，足额存入黑色融字卡片，卡号6228 1309开头的信用卡中，否则我行有权按照合同约定收取相应违约金和利息。还款方式选择“到期还本”的，“到期日”银行不提供借记卡自扣还款服务。对此您是否知晓并同意？</p>
      <van-radio-group  class="group-sty" v-model="radio8" @click="chooseAnswer">
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="1">A.是</van-radio>
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="2">B.否</van-radio>
      </van-radio-group>
    </div>
    <div v-else-if="questionNo == 9" class="heading-sty">
      <p>9、若您未按时偿还“随意分”的分期本金、分期手续费或其他应付款项，我行有权按照合同约定收取相应违约金和罚息。违约金收取比例为当期已出账单金额未还部分的1%；罚息按账户自欠款入账之日起至欠款全部清偿之日止，以 每日万分之三点五的利率全额计收。同时我行可通过短信、电话、电子邮件、信函、上门拜访、委托合法设立的第三方单位、司法途径等方式向您及其担保人进行催收，在上述方式未能有效取得与你联系的情况下，我行有权通过第三方（包括但不限于您提供的联系人、近亲属、附属卡持卡人、工作单位等）向您转告催收欠款事宜。对此您是否知晓并同意？</p>
      <van-radio-group  class="group-sty" v-model="radio9" @click="chooseAnswer">
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="1">A.是</van-radio>
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="2">B.否</van-radio>
      </van-radio-group>
    </div>
    <div v-else-if="questionNo == 10" class="heading-sty">
      <p>10、“随意分”提前还款（包括部分提前还款、全额提前结清）需通过电话银行人工座席、或在手机银行提前还款界面，主动进行提前还款操作。提前还款是否成功，取决于提前还款操作结果。仅将欠款存入“随意分”专项分期信用卡或自扣还款借记卡，不视为已经提前还款，分期手续费仍会继续计收。请问您是否知晓并同意？</p>
      <van-radio-group  class="group-sty" v-model="radio10" @click="chooseAnswer">
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="1">A.是</van-radio>
        <van-radio class="radio-sty" icon-size="25px" checked-color="#ee0a24" name="2">B.否</van-radio>
      </van-radio-group>
    </div>
    <div class="btn-area">
      <button @click="stopCheck">{{ backBtn }}</button>
      <button :style=" questionNo != '0' ? btnSty: '' " @click="submit">{{ nextBtn }}</button>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import {Image as VanImage, RadioGroup, Radio} from 'vant';
import { mapGetters } from 'vuex';
import {NativeUI} from "@/public/ts/NativeUI";
Vue.use(Radio);
Vue.use(RadioGroup);

@Component({
  name: 'RiskEvaluation',
  components: { VanImage }
})
export default class RiskEvaluation extends Vue{
  @Prop(Number) tabActive: Number | any;
  radio1 = '0';
  radio2 = '0';
  radio3 = '0';
  radio4 = '0';
  radio5 = '0';
  radio6 = '0';
  radio7 = '0';
  radio8 = '0';
  radio9 = '0';
  radio10 = '0';
  questionNo = 1;
  radioFlag = '0';
  btnSty = {
    'background-color': '#FD5065',
    'color': 'white'
  };
  backBtn = '返回';
  nextBtn = '下一题';
  message = '注：我行从未授权任何个人或第三方中介机构代理我行包含随意分在内的所有信用卡业务，也从未以任何名义向客户收取申请费用，请谨防上当受骗。如您是通过他人代办，请联系经办客户经理或致电4000795507。';
  questionAnswer: any = {};

  mounted(){
    this.questionAnswer = this.$store.getters.getQuestionAnswerObj;

    if(JSON.stringify(this.questionAnswer) != "{}"){
      this.radio1 = this.questionAnswer.radio1;
      this.radio2 = this.questionAnswer.radio2;
      this.radio3 = this.questionAnswer.radio3;
      this.radio4 = this.questionAnswer.radio4;
      this.radio5 = this.questionAnswer.radio5;
      this.radio6 = this.questionAnswer.radio6;
      this.radio7 = this.questionAnswer.radio7;
      this.radio8 = this.questionAnswer.radio8;
      this.radio9 = this.questionAnswer.radio9;
      this.radio10 = this.questionAnswer.radio10;
    }
  }
  //取消返回上一页
  stopCheck(){
    if (this.questionNo == 1){
      this.$emit("activeChange", this.tabActive-1);
    }else{
      this.questionNo -= 1;
    }
  };
  //下一题
  submit(){
    console.log(this.radioFlag);
    if(this.radioFlag == '0'){
      NativeUI.toast("请选择一个答案")
    }else{
      if(this.questionNo == 10){
        const questionAnswerObj = {
          radio1: this.radio1,
          radio2: this.radio2,
          radio3: this.radio3,
          radio4: this.radio4,
          radio5: this.radio5,
          radio6: this.radio6,
          radio7: this.radio7,
          radio8: this.radio8,
          radio9: this.radio9,
          radio10: this.radio10
        };
        this.$store.commit("setQuestionAnswerObj",questionAnswerObj);
        this.$emit("activeChange", this.tabActive+1);
      }else{
        this.radioFlag = '0';
        this.questionNo += 1;
      }
    }
  };
  //选择答案
  get chooseAnswer(){
    const _this = this;
    _this.backBtn = '返回';
    switch (_this.questionNo) {
      case 1 :
        if(_this.radio1 == '1'){
          NativeUI.confirm('温馨提示',_this.message).then(() => {
            _this.radio1 = '0';
          }).catch(() => {
            _this.radio1 = '0';
          })
        }
        _this.radioFlag = _this.radio1;
        _this.backBtn = '取消';
        return _this.radio1;
      case 2 :
        if(_this.radio2 == '1'){
          NativeUI.confirm('温馨提示','您暂不符合我行随意分准入条件，感谢您的申请。').then(() => {
            _this.radio2 = '0';
          }).catch(() => {
            _this.radio2 = '0';
          })
        }
        _this.radioFlag = _this.radio2;
        return _this.radio2;
      case 3 :
        if(_this.radio3 == '1' || _this.radio3 == '2'){
          NativeUI.confirm('温馨提示','我行随意分仅限用于申请人一切合法的个人消费和非经营性支出。感谢您的申请。').then(() => {
            _this.radio3 = '0';
          }).catch(() => {
            _this.radio3 = '0';
          })
        }
        _this.radioFlag = _this.radio3;
        return _this.radio3;
      case 4 :
        if(_this.radio4 == '2'){
          NativeUI.confirm('温馨提示','鉴于您不同意随意分相关规定，视同您自愿放弃使用随意分卡。感谢您的申请。').then(() => {
            _this.radio4 = '0';
          }).catch(() => {
            _this.radio4 = '0';
          })
        }
        _this.radioFlag = _this.radio4;
        return _this.radio4;
      case 5 :
        if(_this.radio5 == '2'){
          NativeUI.confirm('温馨提示','鉴于您不同意随意分相关规定，视同您自愿放弃使用随意分卡。感谢您的申请。').then(() => {
            _this.radio5 = '0';
          }).catch(() => {
            _this.radio5 = '0';
          })
        }
        _this.radioFlag = _this.radio5;
        return _this.radio5;
      case 6 :
        if(_this.radio6 == '2'){
          NativeUI.confirm('温馨提示','鉴于您不同意随意分相关规定，视同您自愿放弃使用随意分卡。感谢您的申请。').then(() => {
            _this.radio6 = '0';
          }).catch(() => {
            _this.radio6 = '0';
          })
        }
        _this.radioFlag = _this.radio6;
        return _this.radio6;
      case 7 :
        if(_this.radio7 == '2'){
          NativeUI.confirm('温馨提示','您暂不符合我行随意分准入条件，感谢您的申请。').then(() => {
            _this.radio7 = '0';
          }).catch(() => {
            _this.radio7 = '0';
          })
        }
        _this.radioFlag = _this.radio7;
        return _this.radio7;
      case 8 :
        if(_this.radio8 == '2'){
          NativeUI.confirm('温馨提示','鉴于您不同意随意分相关规定，视同您自愿放弃使用随意分卡。感谢您的申请。').then(() => {
            _this.radio8 = '0';
          }).catch(() => {
            _this.radio8 = '0';
          })
        }
        _this.radioFlag = _this.radio8;
        return _this.radio8;
      case 9 :
        if(_this.radio9 == '2'){
          NativeUI.confirm('温馨提示','鉴于您不同意随意分相关规定，视同您自愿放弃使用随意分卡。感谢您的申请。').then(() => {
            _this.radio9 = '0';
          }).catch(() => {
            _this.radio9 = '0';
          })
        }
        _this.radioFlag = _this.radio9;
        return _this.radio9;
      case 10 :
        if(_this.radio10 == '2'){
          NativeUI.confirm('温馨提示','鉴于您不同意随意分相关规定，视同您自愿放弃使用随意分卡。感谢您的申请。').then(() => {
            _this.radio10 = '0';
          }).catch(() => {
            _this.radio10 = '0';
          })
        }
        _this.radioFlag = _this.radio10;
        _this.backBtn = '取消';
        return _this.radio10;
    }
  };
}
</script>
<style scoped lang="scss">
.titleInfo-sty{
  display: flex;
  flex-direction: row;
  margin-left: 15px;
  font-size: 18px;
}
p{
  font-size: 20px;
  margin-bottom: 0;
}
span > span:nth-child(1){
  margin-right: 30px;
}
span {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
}
img{
  width: 44px;
  height: 17px;
}
.heading-sty{
  margin-left: 50px;
  margin-top: 20px;
}
.group-sty{
  margin: 10px 20px;
}
.radio-sty{
  height: 40px;
  margin: 15px 0;
  font-size: 20px;
}
.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;
}
.number-sty{
  color: red;
}
</style>