<template>
    <section class="wallet-retrieve">
        <Header :title="title" :meaushow='meaushow'></Header>
        <div class="retrieve-content" v-show="step1">
            <ul class="form-wrap">
                <li class="inp-wrap" style="height: 1.5rem;">
                    <label class="va-m">安全手机号: {{walletInfoData.safe_mobile}}</label>
                </li>
                <li class="inp-wrap" v-show="retieveShowImgCode">
                    <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" style="border-top: none;">
                    <label class="va-m">验证码</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>
        <div class="retrieve-content" v-show="step2">
            <ul class="form-wrap">
                <li class="inp-wrap">
                    <label class="va-m">设置支付密码</label><br>
                    <template v-if="showPassword">
                        <input type="password" placeholder="密码由6~20位字母、数字组合而成" class="va-m inp" v-model="form.password"/>
                    </template>
                    <template v-else>
                        <input type="text" placeholder="密码由6~20位字母、数字组合而成" 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">
                    <label class="va-m">确认支付密码</label><br>
                    <template v-if="showPasswordConfirm">
                        <input type="password" placeholder="请再次输入上面的密码" class="va-m inp" v-model="form.passwordConfirm"/>
                    </template>
                    <template v-else>
                        <input type="text" placeholder="请再次输入上面的密码" class="va-m inp" v-model="form.passwordConfirm"/>
                    </template>
                    <van-icon v-if="showPasswordConfirm" name="closed-eye" class="va-m f-r" @click="changeShowConfirm"/>
                    <van-icon v-else name="eye-o" class="va-m f-r" @click="changeShowConfirm"/>
                </li>
            </ul>
            <p class="form-error" v-show="formError">{{formMsg}}</p>
            <a href="javascript:;" class="confirm" @click="confirm">确认</a>
        </div>
    </section>
</template>

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

  Vue.use(Icon);

  export default {
    name: 'walletRetrieve',
    data() {
      return {
        title: "找回密码",
        meaushow: true,
        showPassword: true, //是否显示密码
        showPasswordConfirm: true, //是否显示密码确认
        yzmSend: true, //验证码发送
        countDown: 60,
        countDownText: '发送验证码',
        step1: true,
        step2: false,
        form: {
          verifyCode: '',
          imgCode: '',
          password: '',
          passwordConfirm: '',
        },
        formError: false,
        formMsg: '',
        imgCodeVal: productionUrlPc + "public/verify",
      }
    },
    computed: {
      ...mapState({
        walletInfoData: state => state.wallet.walletInfoData,
        retieveShowImgCode: state => state.wallet.retieveShowImgCode,
        retieveCountDownFlag: state => state.wallet.retieveCountDownFlag,
        passwordToken: state => state.wallet.passwordToken
      })
    },
    watch: {
      retieveCountDownFlag(value) {
        if (value) {
          this.yzmSend = false;
          this.timeNum();
        } else {
          this.yzmSend = true;
        }
      },
      passwordToken(value) {
        if (value) { //返回token则验证成功，下一步
          this.step1 = false;
          this.step2 = true;
        } else {
          this.step1 = true;
          this.step2 = false;
        }
      }
    },
    created() {
      this.$store.dispatch({
        type: 'getWalletInfo'
      })
    },
    methods: {
      changeShow() {
        this.showPassword = !this.showPassword;
      },
      changeShowConfirm() {
        this.showPasswordConfirm = !this.showPasswordConfirm;
      },
      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() {
        this.$store.dispatch({ //actions分发
          type: 'smsVerifyRetrieve',
          imgCode: this.form.imgCode
        })
      },
      next() { //下一步
        if (!this.form.verifyCode) {
          this.formError = true;
          this.formMsg = '亲,请输入验证码';
          return;
        }

        this.formError = false;

        this.$store.dispatch({
          type: 'verifyResetsms',
          verify_code: this.form.verifyCode
        })
      },
      confirm() { //确认
        var password_reg = new RegExp(/^[a-zA-Z0-9]{6,20}$/); //^表示开始 $表示结束 6～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.passwordConfirm) {
          this.formError = true;
          this.formMsg = '亲,请再次输入支付密码';
          return;
        }

        if (this.form.password !== this.form.passwordConfirm) {
          this.formError = true;
          this.formMsg = '亲,两次输入支付密码不一致';
          return;
        }

        this.formError = false;

        //提交
        this.$store.dispatch({
          type: 'changeWalletpwd',
          token: this.passwordToken,
          pay_password: this.form.password,
          reconfirm: this.form.passwordConfirm,
          mode: 'forget'
        })
      }
    },
    components: {
      Header
    }
  }
</script>

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