<template>
  <div class="components flex" v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <div class="item flex" @click="goDepositUrl('/deposit')">
      <img class="icon" src="/img/account/icon10.png" alt="极度证券">
      <div class="text">
        <!-- 存款 -->
        {{ $t('home.l13') }}
      </div>
    </div>
    <div class="item flex" @click="goUrl('/withdraw')">
      <img class="icon" src="/img/account/icon11.png" alt="极度证券">
      <div class="text">
        <!-- 取款 -->
        {{ $t('home.l14') }}
      </div>
    </div>
    <div class="item flex" @click="goUrl('/convert')">
      <img class="icon" src="/img/home/icon6.png" alt="极度证券">
      <div class="text">
        <!-- 划转 -->
        {{ $t('home.l15') }}
      </div>
    </div>
    <div class="item flex" @click="$router.push('/transfer-account')">
      <img class="icon" src="/img/account/icon12.png" alt="极度证券">
      <div class="text">
        <!-- 外部转账 -->
        {{ $t('account.l8') }}
      </div>
    </div>
    <div class="item flex" @click="$router.push('/account-records/1')">
      <img class="icon" src="/img/account/icon13.png" alt="极度证券">
      <div class="text">
        <!-- 资金记录 -->
        {{ $t('account.l9') }}
      </div>
    </div>
    <!-- <authIdentity v-if="authShow" @cancel="authShow = false" /> -->
    <van-popup v-model="depositPopShow" position="right" :style="{ width: '100%' }">
      <depositPop :url="depositUrl" @cancel="depositPopShow = false" />
    </van-popup>
  </div>
</template>
<script>
// import authIdentity from "@/components/authIdentity";
import selectDepositPop from "@/mixins/selectDepositPop";
export default {
  components: {
    // authIdentity
  },
  mixins: [selectDepositPop],
  data () {
    return {
      authShow: false,
    }
  },
  deactivated () {
    this.authShow = false
  },
  activated() {
    this.authShow = false
  },
  methods: {
    goUrl(url) {
      if (this.userInfo.identity_status == 1) {
        this.$router.push(url)
        return
      }
      this.fullscreenLoading = true
      this.$store.dispatch('getUserInfo').then(() => {
        // if (this.userInfo.identity_status !== 1) {
        //   this.authShow = true
        // } else {
          this.$router.push(url)
        // }
      }).catch(() => {}).finally(() => {
        this.fullscreenLoading = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
.components {
  padding-bottom: 18px;
  align-items: flex-start;
  justify-content: space-between;
  .item {
    width: calc(20% - 4px);
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
  }
  .text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
  }
  .icon {
    width: 46px;
    margin-bottom: 8px;
  }
}
</style>