<template>
    <section class="wallet-verify">
        <Header :title="title" :meaushow='meaushow'></Header>
        <div class="verify-content">
            <ul class="form-wrap">
                <li class="inp-wrap">
                    <label class="va-m">支付密码</label><br>
                    <template v-if="showPassword">
                        <input type="password" placeholder="请输入支付密码" class="va-m inp" v-model="form.password"/>
                    </template>
                    <template v-else>
                        <input type="text" placeholder="请输入支付密码" class="va-m inp" v-model="form.password"/>
                    </template>
                    <van-icon v-if="showPassword" name="closed-eye" class="va-m f-r" @click="changeShow"/>
                    <van-icon v-else name="eye-o" class="va-m f-r" @click="changeShow"/>
                </li>
                <li class="inp-wrap" v-show="verifyShowImgCode">
                    <label class="va-m">图片验证码</label><br>
                    <input type="text" placeholder="请输入验证码" v-model="form.imgCode" class="va-m inp"/>
                    <img :src="imgCodeVal" alt="图片验证码" class="img-code va-m" @click="changeImgCode"/>
                </li>
                <li class="inp-wrap">
                    <label class="va-m">安全手机：{{walletInfoData.safe_mobile}}</label><br>
                    <input type="text" placeholder="请输入验证码" v-model="form.verifyCode" class="va-m inp"/>
                    <a v-if="yzmSend" href="javascript:;" class="send-yzm va-m" @click="getCode">{{countDownText}}</a>
                    <a v-else href="javascript:;" class="sending-yzm va-m">再次发送({{countDown}}s)</a>
                </li>
            </ul>
            <p class="form-error" v-show="formError">{{formMsg}}</p>
            <a href="javascript:;" class="next" @click="next">下一步</a>
        </div>
    </section>
</template>

<script>
  import Vue from 'vue';
  import {mapState} from 'vuex'
  import Header from '@/views/common/Header.vue';
  import {Icon, Toast} from 'vant';
  import {productionUrlPc} from '../../api/index';

  Vue.use(Icon);

  export default {
    name: 'WalletVerify',
    data() {
      return {
        title: "验证身份",
        meaushow: true,
        showPassword: true, //是否显示密码
        yzmSend: true, //验证码发送
        countDown: 60,
        countDownText: '发送验证码',
        form: {
          verifyCode: '',
          imgCode: '',
          password: '',
        },
        formError: false,
        formMsg: '',
        imgCodeVal: productionUrlPc + "public/verify",
      }
    },
    computed: {
      ...mapState({
        walletInfoData: state => state.wallet.walletInfoData,
        verifyShowImgCode: state => state.wallet.verifyShowImgCode,
        verifyCountDownFlag: state => state.wallet.verifyCountDownFlag,
      })
    },
    watch: {
      verifyCountDownFlag(value) {
        if (value) {
          this.yzmSend = false;
          this.timeNum();
        } else {
          this.yzmSend = true;
        }
      }
    },
    created() {
      this.$store.dispatch({
        type: 'getWalletInfo'
      })
    },
    methods: {
      changeShow() {
        this.showPassword = !this.showPassword;
      },
      timeNum() {
        var me = this;
        var clock = setInterval(doLoop, 1000);

        function doLoop() {
          me.countDown--;
          if (me.countDown <= 0) {
            clearInterval(clock);
            me.countDown = 60;
            me.countDownText = "再次发送";
            me.yzmSend = true;
          }
        }
      },
      //获取图片验证码
      changeImgCode() {
        this.imgCodeVal = productionUrlPc + "public/verify?" + new Date().getTime()
      },
      getCode() {
        //下一步
        var password_reg = new RegExp(/^[a-zA-Z0-9]{6,20}$/); //^表示开始 $表示结束 8～20位字母和数字组合
        if (!this.form.password) {
          Toast({
            message: '亲,请输入支付密码',
            duration: 2000
          });
          return;
        }

        if (!password_reg.test(this.form.password)) {
          Toast({
            message: '亲,密码由6～20位字母、数字组合',
            duration: 2000
          });
          return;
        }


        this.$store.dispatch({
          //actions分发
          type: 'sendSafesms',
          imgCode: this.form.imgCode
        })
      },
      next() {
        //下一步
        var password_reg = new RegExp(/^[a-zA-Z0-9]{6,20}$/); //^表示开始 $表示结束 8～20位字母和数字组合
        if (!this.form.password) {
          this.formError = true;
          this.formMsg = '亲,请输入支付密码';
          return;
        }

        if (!password_reg.test(this.form.password)) {
          this.formError = true;
          this.formMsg = '亲,密码由6～20位字母、数字组合';
          return;
        }

        if (!this.form.verifyCode) {
          this.formError = true;
          this.formMsg = '亲,请输入验证码';
          return;
        }

        this.formError = false;

        this.$store.dispatch({
          type: 'verifySafeMobile',
          verify_code: this.form.verifyCode,
          pay_password: this.form.password
        })
      }
    },
    components: {
      Header
    }
  }
</script>

<style scoped>
    @import "../../assets/css/wallet/wallet.css";
</style>