<template>
  <div class="pop">
    <div class="sticky">
      <div class="header">
        <div class="back">
          <backIcon back="cancel" @cancel="cancel"/>
        </div>
        <!-- 安全验证 -->
        {{ step == 1 ? $t('fund.l122') : typeName[type]}}
      </div>
    </div>
    <div class="container" v-if="step == 1">
      <div class="tip">
        <!-- 请现在以下至少一种安全方式验证 -->
        {{ $t('fund.l117') }}
      </div>
      <div class="cell flex" v-if="userInfo.phone" @click="step=2;type=1">
        <div class="left flex">
          <img class="icon" src="/img/pay/icon1.png" alt="极度证券">
          <div>
            <!-- 手机验证 -->
            {{ $t('fund.l118') }}
          </div>
        </div>
        <div class="right flex">
          <img class="icon1" src="/img/pay/icon3.png" alt="极度证券">
        </div>
      </div>
      <div class="cell flex" v-if="userInfo.email" @click="step=2;type=2">
        <div class="left flex">
          <img class="icon" src="/img/pay/icon2.png" alt="极度证券">
          <div>
            <!-- 邮箱验证 -->
            {{ $t('fund.l119') }}
          </div>
        </div>
        <div class="right flex">
          <img class="icon1" src="/img/pay/icon3.png" alt="极度证券">
        </div>
      </div>
    </div>
    <div class="container1" v-if="step == 2">
      <el-form autocomplete="off" class="login-box" :model="form" ref="form">
        <el-form-item prop="verifyCode">
          <div class="code-box flex">
            <!-- 请输入验证码 -->
            <el-input autocomplete="off" type="number" :placeholder="$t('register.l12')" v-model="form.verifyCode">
            </el-input>
            <div class="send" @click="getVerifyCode">{{ sendText }}{{ isNaN(Number(sendText)) ? '' : 's' }}</div>
          </div>
        </el-form-item>
        <div class="tip">
          <!-- 请输入{{ setAccount(account) }}的验证码 -->
          {{ $t('fund.l120').replace('{p}', setAccount(account)) }}
        </div>
      </el-form>
      <div class="btn" @click="submit">
        <!-- 确认 -->
        {{ $t('common.l3') }}
      </div>
    </div>
  </div>
</template>
<script>
import { getVerifyCode } from "@/api/login";
import { setSession } from "@/utils/sessionStorage";
export default {
  data () {
    return {
      step: 1,
      form: {
        verifyCode: ''
      },
      sendText: this.$t('register.l11'),
      sendDisable: false,
      timer: null,
      type: 1,
    }
  },
  computed: {
    account() {
      return this.type == 1 ? this.userInfo.phone : this.userInfo.email
    },
    typeName() {
      return {
        // '1': '手机验证',
        // '2': '邮箱验证',
        '1': this.$t('fund.l118'),
        '2': this.$t('fund.l119'),
      }
    }
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
  },
  created () {
    if (!(this.userInfo.phone && this.userInfo.email)) {
      this.step = 2
      if (this.userInfo.phone) {
        this.type = 1
      }
      if (this.userInfo.email) {
        this.type = 2
      }
    }
  },
  methods: {
    submit() {
      if (!this.form.verifyCode.trim()) {
        // 请输入验证码
        this.$toast(this.$t('register.l12'));
        return
      }
      this.$emit('success', this.form.verifyCode.trim())
    },
    cancel() {
      this.$emit('cancel')
    },
    getVerifyCode() {
      if (this.sendDisable) {
        return
      }
      this.sendDisable = true
      getVerifyCode({
        account: this.account,
        type: this.type == 1 ? 'phone' : 'email',
        action: 'insertCollectionAccount',
        language: this.language
      }).then((res) => {
        this.timerStart()
        setSession('phoneToken', res.token)
      })
      .catch(() => {
        this.sendDisable = false
      })
    },
    timerStart() {
      this.sendText = 60
      this.timer = setInterval(() => {
        if (this.sendText <= 1) {
          this.sendText = this.$t('register.l11')
          this.sendDisable = false
          clearInterval(this.timer)
          this.timer = null
        } else {
          this.sendText--
        }
      }, 1000)
    },
    setAccount(val) {
      if (this.type == 1) {
        return `${val.slice(0, 4)}***${val.slice(val.length - 3)}`
      }
      if (this.type == 2) {
        var arr = val.split('@')
        return `${arr[0].slice(0, 2)}**@**.${arr[1].split('.')[1]}`
      }
    }
  }
}
</script>
<style lang="less" scoped>
.pop {
  min-height: 100vh;
}
.sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--bg-);
  margin-bottom: 8px;
}
.header {
  position: relative;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 17px;
  font-size: 18px;
  font-weight: 600;
  .back {
    position: absolute;
    left: 9px;
    top: 11px;
  }
}
.container {
  padding: 22px 20px;
  .tip {
    font-size: 14px;
    color: #636363;
    text-align: center;
    margin-bottom: 36px;
  }
  .cell {
    padding: 5px 5px 5px 10px;
    justify-content: space-between;
    color: #000000;
    background: #F7F8FA;
    border-radius: 4px;
    cursor: pointer;
    &+.cell {
      margin-top: 18px;
    }
    .icon {
      width: 25px;
      margin-right: 6px;
    }
    .right {
      background: #FFFFFF;
      box-shadow: 0px 3px 8px 0px rgba(202,206,216,0.36);
      border-radius: 4px;
      width: 44px;
      height: 44px;
      justify-content: center;
    }
    .icon1 {
      width: 16px;
    }
  }
}
.container1 {
  padding: 27px 17px 20px;
  .tip {
    color: #BCBEC0;
    margin-bottom: 36px;
  }
  .btn {
    cursor: pointer;
    line-height: 44px;
    text-align: center;
    background: #000000;
    color: #FEFFFF;
    font-weight: 600;
    border-radius: 6px;
    font-size: 16px;
  }
}
.login-box {
  padding-top: 0;
}
.code-box {
  padding-right: 4px;
  .el-input {
    flex: 1;
  }
  .send {
    min-width: 96px;
    line-height: 38px;
    text-align: center;
    background: #FFFFFF;
    box-shadow: 0px 2px 5px 0px rgba(188,192,193,0.31);
    border-radius: 6px;
    color: #000000;
    cursor: pointer;
    font-size: 14px;
    padding: 0 6px;
  }
}
</style>