<template>
  <div v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <BackBar :title="userInfo.phone ? $t('setting.ti3') : $t('setting.ti4')"> </BackBar>
    <div class="container">
      <el-form class="content" :rules="rules" :model="form" ref="form1" v-if="step === 1">
        <div class="title">
          <!-- 安全验证 -->
          {{ $t('setting.l24') }}
        </div>
        <div class="tip-box" v-if="userInfo.phone || userInfo.email">
          <div class="icon-box">
            <img class="icon" src="/img/setting/icon.png" alt="极度证券">
          </div>
          <div class="tip">
            <div>
              <!-- 为保护账户安全 -->
              {{ $t('setting.l25') }}
            </div>
            <div>
              <!-- 使用 -->
              {{ $t('setting.l26') }} <span class="span">{{ userPhone || userEmail }}</span> {{ $t('setting.l27') }}
              <!-- 验证身份 -->
            </div>
          </div>
        </div>
        <el-form-item prop="verifyCode">
          <div class="row flex">
            <!-- 请输入验证码 -->
            <el-input :placeholder="$t('register.l12')" type="number" v-model="form.verifyCode" @keyup.enter.native="securityVerifyCode">
            </el-input>
            <div class="send-btn" @click="sendMsg1">{{ sendText1 }}{{ isNaN(Number(sendText1)) ? '' : 's' }}</div>
          </div>
        </el-form-item>
        <div class="btn-box">
          <div class="submit-btn" type="success" @click="securityVerifyCode">
            <!-- 确定 -->
            {{ $t('common.l50') }}
          </div>
        </div>
      </el-form>
      <el-form class="content" :rules="rules" :model="user" ref="form" v-if="step === 2">
        <!-- <div class="old" v-if="userInfo.phone">{{ $t('setting.l9') }} {{ userPhone }}</div> -->
        <!-- 手机号 -->
        <div class="label">{{ $t('login.l21') }}</div>
        <el-form-item prop="account">
          <!-- 请输入手机号 -->
          <el-input type="number" :placeholder="$t('setting.l37')" v-model="user.account" class="input-with-select">
            <template slot="prepend">
              <div class="area-box" @click="countryShow" slot="reference">
                +{{ phoneCountry.area_code }}
              </div>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="verifyCode">
          <!-- 验证码 -->
          <div class="label">{{ $t('register.l-code') }}</div>
          <div class="row flex">
            <!-- 请输入验证码 -->
            <el-input :placeholder="$t('register.l12')" type="number" v-model="user.verifyCode" @keyup.enter.native="submitClick">
            </el-input>
            <div class="send-btn" @click="sendMsg">{{ sendText }}{{ isNaN(Number(sendText)) ? '' : 's' }}</div>
          </div>
        </el-form-item>
        <div class="btn-box">
          <div class="submit-btn" @click="submitClick">
            <!-- 确定 -->
            {{ $t('common.l50') }}
          </div>
        </div>
      </el-form>
      <div class="chat">
        <!-- *如无法收到验证码,请及时联系 -->
        {{ $t("setting.l23") }}<span class="span" @click="$router.push('/chat')">
          <!-- 在线客服 -->
          {{ $t("tab.tab11") }}
        </span></div>
    </div>
    <selectCountry :val="phoneCountry" ref="country" @back="selectCountryBack"/>
  </div>
</template>
<script>
import BackBar from '@/components/backBar'
import { mapGetters } from 'vuex'
import { getVerifyCode, setSecurityVerify } from '@/api/login'
import { updatePhoneEmail } from '@/api/user'
import selectCountry from "@/components/selectCountry";
export default {
  components: {
    BackBar,
    selectCountry
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(this.$t('login.empty')))
      }
      callback()
    }
    return {
      user: {
        account: '',
        verifyCode: '',
      },
      phoneCountry: {
        "name": "China (中国)",
        "code": "cn",
        "area_code": "86"
      },
      form: {
        verifyCode: '',
      },
      readed: true,
      sendDisable: false,
      sendDisable1: false,
      step: 1,
      // 发送验证码
      sendText: this.$t("common.l57"),
      sendText1: this.$t("common.l57"),
      timer: null,
      timer1: null,
      rules: {
        account: [{ validator: validatePass, trigger: 'blur' }],
        verifyCode: [{ validator: validatePass, trigger: 'blur' }],
      },
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'language']),
    userPhone() {
      return this.userInfo.phone ? `${this.userInfo.phone.slice(0, 4)}***${this.userInfo.phone.slice(this.userInfo.phone.length - 3)}` : ''
    },
    userEmail() {
      if (this.userInfo.email) {
        var arr = this.userInfo.email.split('@')
        return `${arr[0].slice(0, 2)}**@**.${arr[1].split('.')[1]}`
      }
      return ''
    },
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
    this.timer1 && clearInterval(this.timer1)
  },
  created() {
  },
  methods: {
    sendMsg() {
      if (this.sendDisable) {
        return
      }
      this.$refs['form'].validateField('account', (valid) => {
        if (valid) return false
        getVerifyCode({
          account: this.phoneCountry.area_code + this.user.account,
          type: 'phone_update',
          action: 'updatePhoneEmail',
          language: this.language
        }).then((res) => {
          this.timerStart()
        }).catch(() => {
        })
      })
    },
    timerStart() {
      this.sendDisable = true
      this.sendText = 60
      this.timer = setInterval(() => {
        if (this.sendText <= 1) {
          // '发送验证码'
          this.sendText = this.$t("common.l57")
          this.sendDisable = false
          clearInterval(this.timer)
          this.timer = null
        } else {
          this.sendText--
        }
      }, 1000)
    },
    sendMsg1() {
      if (this.sendDisable1) {
        return
      }
      var account =  this.userInfo.phone || this.userInfo.email
      getVerifyCode({
        account:account,
        type: account == this.userInfo.phone ? 'phone' : 'email',
        action: 'setSecurityVerify',
        language: this.language
      }).then((res) => {
        this.timerStart1()
      }).catch(() => {
      })
    },
    timerStart1() {
      this.sendDisable1 = true
      this.sendText1 = 60
      this.timer1 = setInterval(() => {
        if (this.sendText1 <= 1) {
          // '发送验证码'
          this.sendText1 = this.$t("common.l57")
          this.sendDisable1 = false
          clearInterval(this.timer1)
          this.timer1 = null
        } else {
          this.sendText1--
        }
      }, 1000)
    },
    securityVerifyCode() {
      this.$refs['form1'].validate((valid) => {
        if (!valid) return false
        this.setSecurityVerify()
      })
    },
    setSecurityVerify() {
      setSecurityVerify({
        verifyCode: this.form.verifyCode,
      }).then((res) => {
        this.step = 2
      }).catch(() => {
      })
    },
    submitClick() {
      this.$refs['form'].validate((valid) => {
        if (!valid) return false
        this.updatePhoneEmail()
      })
    },
    updatePhoneEmail() {
      this.fullscreenLoading = true
      updatePhoneEmail({
          verifyCode: this.user.verifyCode,
        },1).then((res) => {
          this.$notify({
            message: this.$t('setting.alter1'),
            type: 'success'
          });
          this.$store.commit('SET_LOGIN', false)
          this.$store.commit('setAccountList', [])
          this.$store.commit('setCashInfo', {})
          this.$router.replace('/login')
        }).catch(() => {
        }).finally(() => {
          this.fullscreenLoading = false;
        })
    },
    countryShow() {
      this.$refs['country'].reset()
    },
    selectCountryBack(val) {
      this.phoneCountry = val
    }
  },
}
</script>
<style lang="less" scoped>
.container {
  padding: 20px 17px;
}
.title {
  font-weight: 600;
  color: #1B1B1B;
  font-size: 18px;
  line-height: 1;
  margin-bottom: 20px;
}
.row {
  .el-input {
    flex: 1;
    min-width: 10%;
    max-width: 100%;
  }
  .send-btn {
    line-height: 36px;
    min-width: 73px;
    padding: 0 4px;
    text-align: center;
    font-weight: 600;
    color: var(--color-);
    border-radius: 6px;
    border: 1px solid #DDDDDD;
    cursor: pointer;
  }
}
.tip-box {
  display: flex;
  align-items: flex-start;
  column-gap: 3px;
  color: #C0C0C0;
  margin-bottom: 29px;
  line-height: 1;
  .icon-box {
    padding-top: 5px;
  }
  .icon {
    width: 16px;
    display: block;
  }
  .tip {
    flex: 1;
    min-width: 10%;
    max-width: 100%;
    line-height: 24px;
  }
  .span {
    color: #000000;
  }
}
.chat {
  text-align: center;
  color: #C0C0C0;
  font-size: 12px;
  .span {
    color: var(--color-);
    cursor: pointer;
  }
}
.label {
  font-size: 18px;
  font-weight: 600;
  color: #1B1B1B;
  line-height: 1;
  margin-bottom: 3px;
}
/deep/ .el-form-item {
  border-bottom: 1px solid #EDEDED;
  margin-bottom: 28px;
  .el-input__inner {
    padding: 0;
    border: none;
    height: 54px;
    font-size: 16px;
    line-height: 52px;
  }
  .el-input-group {
    .el-input__inner {
      padding-left: 20px;
    }
  }
  .el-input-group__prepend {
    background-color: transparent;
    border: none;
    padding: 0;
  }
}
.area-box {
  width: 62px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #000;
  border-right: 1px solid #000;
}
.btn-box {
  padding-top: 12px;
  padding-bottom: 25px;
}
.submit-btn {
  line-height: 44px;
  text-align: center;
  border-radius: 6px;
  background: var(--color-);
  font-size: 16px;
  color: #fff;
}
</style>