<template>
  <div class="container" v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <!-- 账户冻结 -->
    <backBar :title="$t('setting.l6')"/>
    <!-- 确定要冻结您的账户 -->
    <div class="title">{{$t('frozen.l1')}}（{{name}}）?</div>
    <!-- 一旦确定冻结，将会在您的 appName 账户中自动执行： -->
    <div class="tip">{{$t('frozen.l2')}}</div>
    <ul class="tiplist">
      <!-- 您账户中所有未完成的提现将被取消。 -->
      <li>{{$t('frozen.l3')}}</li>
      <!-- 您账户中所有的委托将被撤单。 -->
      <li>{{$t('frozen.l4')}}</li>
      <!-- 您账户中所有的API将被禁用。 -->
      <li>{{$t('frozen.l5')}}</li>
      <!-- 账户的交易、提现功能将被禁用。 -->
      <li>{{$t('frozen.l6')}}</li>
      <!-- 账户冻结后，至少需要24小时才能申请解冻。 -->
      <li>{{$t('frozen.l7')}}</li>
      <!-- 账户冻结后，交易账户仓位将以市价平仓。 -->
      <li>{{$t('frozen.l8')}}</li>
    </ul>
    <div class="checkbox flex">
      <van-checkbox icon-size="14px" v-model="disabled" shape="square"></van-checkbox>
      <!-- 我已了解后果并同意操作 -->
      <div @click="disabled =!disabled">{{$t('frozen.l9')}}</div>
    </div>
    <div style="padding: 0 16px">
      <!-- 同意冻结账户 -->
      <div class="submit-btn" :class="{'dis': !disabled}" @click="TradePasswordShow">{{$t('frozen.btn1')}}</div>
    </div>
    <!-- 安全验证 -->
    <van-popup position="right" v-model="tradeDialog"  :style="{ width: '100%' }" :title="$t('setting.l24')">
      <TradePassword @cancel="tradeDialog = false" v-if="tradeDialog" @success="frozenUser" />
    </van-popup>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { frozenUser } from '@/api/user'
import backBar from '@/components/backBar'
import TradePassword from '@/components/TradePassword/index'
export default {
  components: {
    backBar,
    TradePassword,
  },
  data() {
    return {
      disabled: false,
      tradeDialog: false,
      fullscreenLoading: false
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    name() {
      if (this.userInfo.email) {
        var arr = this.userInfo.email.split('@')
        return `${arr[0].slice(0, 2)}**@**.${arr[1].split('.')[1]}`
      }
      if (this.userInfo.phone) {
        return `${this.userInfo.phone.slice(0, 2)}***${this.userInfo.phone.slice(this.userInfo.phone.length - 2)}`
      }
    },
  },
  methods: {
    TradePasswordShow() {
      if (!this.disabled) {
        return
      }
      this.$store.dispatch('getUserInfo').then(res => {
        if (this.userInfo.password_transaction == '1') {
          if (this.userInfo.password_verification == '1') {
            this.tradeDialog = true
          } else {
            this.frozenUser({})
          }
        } else {
          // this.$message({
          //   message: this.$t('wallet.lab45'),
          //   duration: 1500,
          //   type: 'error',
          // })
          this.$router.push('/deal')
        }
      })
    },
    frozenUser(info) {
      this.fullscreenLoading = true
      frozenUser({
        password: info.password
      }).then(res => {
        this.$notify({
          // message: '冻结成功',
          message: this.$t('frozen.alter1'),
          type: 'success'
        });
        // this.$store.commit('SET_USER_STATUS', '冻结')
        this.tradeDialog = false
        this.$router.replace('/')
      }).catch(() => {
      }).finally(() => {
        this.fullscreenLoading = false;
      })
    }
  }
}
</script>
<style lang="less" scoped>
.container {
}
.title {
  margin-bottom: 12px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  color: #00142a;
  padding: 10px;
  margin-top: 16px;
}
.tip {
  padding-left: 10px;
}
.tiplist {
  margin-top: 12px;
  padding: 24px 32px;
  background: rgba(0, 20, 42, 0.04);
  list-style-type: disc;
  color: #00142a;
  margin-bottom: 12px;
  li {
    margin-bottom: 8px;
  }
}
.checkbox {
  margin-bottom: 24px;
  font-size: 14px;
  padding-left: 24px;
  column-gap: 8px;
}
.submit-btn {
  line-height: 50px;
  text-align: center;
  border-radius: 4px;
  background: var(--color-);
  border: none;
  color: #fff;
  font-size: 16px;
  &.dis {
    opacity: .4;
  }
}
.checkbox {
  display: flex;
  align-items: flex-start;
  font-size: 12px;
  .el-checkbox {
    margin-right: 6px;
  }
}

/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: rgb(45, 189, 150);
}
/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
  color: rgb(45, 189, 150);
}
</style>