<template>
  <div v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <!-- 解冻 -->
    <BackBar :title="$t('frozen.l13')"> </BackBar>
    <div class="container">
      <div class="center">
        <img class="img" src="/img/icon/lock.svg" />
        <!-- 为了保障账户安全，解冻成功后24小时内禁止appName提币、提款。 -->
        <div class="tip">{{$t('frozen.l10')}}</div>
        <!-- 您的账户已被冻结，您可在  后申请解冻 -->
        <div class="msg" v-if="time > 0 && userInfo.status == 2">{{$t('frozen.l11')}}{{countDown}}{{$t('frozen.l12')}}</div>
      </div>
      <div v-if="userInfo.status == 2">
        <!-- 申请解冻 -->
        <div class="submit-btn" :class="{ dis: !disabled }" @click="TradePasswordShow">{{$t('frozen.btn2')}}</div>
      </div>
      <div v-if="userInfo.status == 3">
        <!-- 审核中 -->
        <div class="submit-btn">{{$t('ajax.151')}}</div>
      </div>
    </div>
    <div class="logout">
      <!-- 退出登录 -->
      <span @click="logout">{{$t('frozen.btn3')}}</span>
    </div>
    <!-- 解冻 -->
    <van-popup round position="bottom" v-model="tradeDialog">
      <el-form class="trade" :rules="rules" :model="form" ref="trade">
        <el-form-item prop="password" v-if="userInfo.password_verification==1">
          <div class="label">
            <!-- 交易密码 -->
            {{$t('setting.l5')}}
          </div>
          <div>
            <payPassword ref="test" @blur="passwordBlur"/>
          </div>
        </el-form-item>
        <el-form-item prop="verifyCode">
          <div class="label">
            <!-- 验证码 -->
            {{$t('setting.l-code')}}
          </div>
          <div class="row flex">
            <!-- 请输入验证码 -->
            <el-input type="number" v-model="form.verifyCode" :placeholder="$t('register.l12')">
            </el-input>
            <div class="send-btn" @click="sendMsg">{{ sendText }}{{isNaN(Number(sendText)) ? '' : 's'}}</div>
          </div>
        </el-form-item>
      </el-form>
      <div class="btn-box">
        <div class="submit-btn" @click="submit">
          <!-- 确认 -->
          {{$t('common.l3')}}
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { getVerifyCode } from '@/api/login'
import { unFrozenUser } from '@/api/user'
import payPassword from '@/components/pay-password/index'
import { mapGetters } from 'vuex'
import BackBar from '@/components/backBar'
import { logOut } from '@/api/login'
export default {
  components: {
    payPassword,
    BackBar
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (rule.field == 'password') {
        if (value.trim().length < 6) {
          callback(new Error(this.$t('setting.valid1')))
        } else {
          callback()
        }
      }
      callback()
    }
    return {
      disabled: false,
      tradeDialog: false,
      form: {
        password: '',
        verifyCode: '',
      },
      readed: true,
      sendDisable: false,
      fullscreenLoading: false,
      sendText: this.$t('common.l57'),
      time: '',
      timer: null,
      timer1: null,
      rules: {
        password: [{ validator: validatePass, trigger: 'blur' },],
        verifyCode: [{ required: true, message: this.$t('login.empty'), trigger: 'blur' }],
      },
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'language']),
    countDown() {
      var h = parseInt(this.time / (60 * 60))
      var m = parseInt((this.time - (h * 60 * 60)) / 60)
      var s = parseInt((this.time - (h * 60 * 60) - (m * 60)))
      return `${h < 10 ? ('0' + h) : h}:${m < 10 ? ('0' + m) : m}:${s < 10 ? ('0' + s) : s}`
    },
  },
  watch: {
    'userInfo.update_datetime'() {
      if (this.userInfo.status == 1) {
        this.$router.replace('/')
        return
      }
      this.time && clearInterval(this.timer)
      this.getTime()
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
    this.timer1 && clearInterval(this.timer1)
  },
  created() {
    this.getTime()
  },
  methods: {
    passwordBlur() {
      this.form.password = this.$refs.test.val
      this.$nextTick(() => {
        this.$refs['trade'].validateField('password')
      })
    },
    sendMsg() {
      if (this.sendDisable) {
        return
      }
      var account = this.userInfo.email || this.userInfo.phone
      getVerifyCode({
        account: account,
        type: account == this.userInfo.phone ? 'phone' : 'email',
        action: 'unFrozenUser',
        language: this.language
      }).then((res) => {
        this.timerStart()
      }).catch(() => {
      })
    },
    timerStart() {
      this.sendDisable = true
      this.sendText = 60
      this.timer1 = setInterval(() => {
        if (this.sendText <= 1) {
          this.sendText = this.$t('common.l57')
          this.sendDisable = false
          clearInterval(this.timer1)
          this.timer1 = null
        } else {
          this.sendText--
        }
      }, 1000)
    },
    TradePasswordShow() {
      if (!this.disabled) {
        return
      }
      this.tradeDialog = true
    },
    submit() {
      if (this.userInfo.password_verification==1) {
        this.form.password = this.$refs.test.val
      }
      this.$refs['trade'].validate((valid) => {
        if (valid) {
          this.fullscreenLoading = true
          unFrozenUser({
            password: this.form.password,
            verifyCode: this.form.verifyCode,
            bak: '',
          }).then((res) => {
            this.fullscreenLoading = false;
            this.tradeDialog = false
            this.$notify({
              message: this.$t('frozen.alter2'),
              type: 'success'
            });
            this.$store.dispatch('getUserInfo')
            // this.$router.replace('/')
          }).catch((error) => {
            if (error.code == 1000 && error.status == 3) {
              this.tradeDialog = false
              this.$notify({
                message: this.$t('frozen.alter2'),
                type: 'success'
              });
              this.$store.dispatch('getUserInfo')
            }
            this.fullscreenLoading = false;
          })
        } else {
          return false
        }
      })
    },
    logout() {
      logOut().then((res) => {
        this.$store.commit('SET_LOGIN', false)
        this.$store.commit('setAccountList', [])
        this.$store.commit('setCashInfo', {})
        this.$notify({
          // message: '退出成功',
          message: this.$t('home.l29'),
          type: 'success'
        });
        this.$store.dispatch('getProductUserList')
        this.$router.replace('/')
      })
    },
    getTime() {
      if (this.userInfo.update_datetime) {
        var time = new Date(this.userInfo.update_datetime.replace(' ', 'T') + '+08:00').getTime() + (1000 * 60 * 60 * 24)
        this.time = parseInt((time - new Date().getTime()) / 1000)
        if (this.time > 0 && this.userInfo.status == 2) {
          setInterval(() => {
            --this.time
            if (!(this.time > 0)) {
              this.disabled = true
              clearInterval(this.timer)
              this.timer = null
            }
          }, 1000)
        } else {
          this.disabled = true
        }
      }
    }
  },
}
</script>
<style lang="less" scoped>
.container {
  padding: 0 18px;
}
.row {
  .el-input {
    flex: 1;
    min-width: 10%;
    max-width: 100%;
  }
  .send-btn {
    line-height: 36px;
    width: 73px;
    text-align: center;
    font-weight: 600;
    color: var(--color-);
    border-radius: 6px;
    border: 1px solid #dddddd;
    cursor: pointer;
  }
}
.img {
  display: block;
  width: 70%;
  margin: 0 auto 20px;
}
.center {
  padding-top: 20vh;
}
.tip {
  text-align: center;
  font-size: 15px;
  color: #C0C0C0;
  line-height: 20px;
  margin-bottom: 25px;
}
.msg {
  text-align: center;
  margin-bottom: 12px;
}
.logout {
  text-align: center;
  font-size: 16px;
  color: #333;
  margin-top: 17px;
  cursor: pointer;
}
.el-form {
  padding: 32px 18px 12px;
}
.btn-box {
  padding: 0 18px 18px;
}
.submit-btn {
  line-height: 44px;
  text-align: center;
  border-radius: 6px;
  background: var(--color-);
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  &.dis {
    opacity: 0.3;
    cursor: no-drop;
  }
}

/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;
  }
}
.label {
  font-size: 18px;
  font-weight: 600;
  color: #1B1B1B;
  line-height: 1;
  margin-bottom: 3px;
}
</style>