<template>
  <div>
    <div class="box flex" v-if="!isLogin">
      <div class="left flex">
        <img class="img" src="/img/home/img1.png" alt="极度证券">
        <div class="right">
          <div>
            <!-- 1,000USD 大礼包 -->
            1,000USD {{ $t('home.l43') }}
          </div>
          <div class="lab">
            <!-- 新人专享  注册即得 -->
            {{ $t('home.l44') }}
          </div>
        </div>
      </div>
      <div class="btn" @click="$router.push('/login')">
        <!-- 注册/登录 -->
        {{ $t('home.l45') }}
      </div>
    </div>
    <div class="box1 flex" v-if="isLogin" style="background-image: url('/img/home/bg.png');">
      <div class="left">
        <div class="lab flex">
          <div>
            <!-- 资产总览 -->
            {{ $t('home.l46') }}({{ currency }})</div>
          <i @click="rateShow = true" :class="{'active': rateShow}" class="el-icon-caret-bottom"></i>
        </div>
        <div class="number" v-if="showAssets">{{currencyUtil[currency]}}{{ $numToThousand(allAssets) }}</div>
        <div class="number" v-else>*****</div>
      </div>
      <div class="btn" @click="goDepositUrl('/deposit')">
        <!-- 存款 -->
        {{ $t('home.l13') }}
        <div class="one-box" v-if="appParams.deposit && appParams.deposit.enable == 1 && userInfo.deposit_count == 0">
          <!-- 首次存款即送100USD 赠金 -->
          {{ $t('home.l50') }}
        </div>
        <i class="el-icon-caret-top" v-if="appParams.deposit && appParams.deposit.enable == 1 && userInfo.deposit_count == 0"></i>
      </div>
    </div>
    <van-popup v-model="rateShow" round position="bottom">
      <rateList :currency="currency" @success="selectBack"/>
    </van-popup>
    <van-popup v-model="depositPopShow" position="right" :style="{ width: '100%' }">
      <depositPop :url="depositUrl" @cancel="depositPopShow = false" />
    </van-popup>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import rateList from "@/view/account/components/rateList.vue";
import bus from '@/utils/bus'
import selectDepositPop from "@/mixins/selectDepositPop";
export default {
  components: {
    rateList
  },
  mixins: [selectDepositPop],
  data () {
    return {
      rateShow: false
    }
  },
  computed: {
    ...mapGetters(['showAssets', 'currencyList', 'accountList', 'cashInfo', 'followAccount', 'currency']),
    allAssets() {
      var amount = 0
      this.accountList.forEach(item => {
        var currency = this.serverUtil[item.server]
        amount += Number(this.$bigDecimal.multiply(this.$bigDecimal.divide(item.equity, this.currencyList[currency] || 1), this.currencyList[this.currency] || 1))
      })
      if (this.cashInfo.uid) {
        amount += Number(this.$bigDecimal.multiply(this.cashInfo.balance, this.currencyList[this.currency] || 1))
      }
      if (this.followAccount.uid) {
        amount += Number(this.$bigDecimal.multiply(this.followAccount.balance, this.currencyList[this.currency] || 1))
      }
      return amount
    },
    currencyUtil() {
      return {
        'USD': '$',
        'CNY': '¥',
        'HKD': 'HK$',
      }
    }
  },
  activated() {
    this.isLogin && (bus.$emit('updateAssets', ['getCash', 'getAccountList']))
  },
  methods: {
    selectBack(val) {
      this.$store.commit('setCurrency', val)
      this.rateShow = false
    },
  }
}
</script>
<style lang="less" scoped>
.box {
  background-color: #F7F8FA;
  border-radius: 6px;
  padding: 13px 14px 13px 9px;
  margin-bottom: 22px;
  .left {
    flex: 1;
    min-width: 20%;
    padding-right: 12px;
  }
  .img {
    width: 65px;
    margin-right: 7px;
  }
  .right {
    flex: 1;
    min-width: 20%;
    font-size: 17px;
    font-weight: 300;
  }
  .lab {
    font-size: 12px;
    color: #73757C;
    margin-top: 8px;
  }
}
.box1 {
  background-color: #F7F8FA;
  border-radius: 6px;
  padding: 13px 14px;
  margin-bottom: 22px;
  background-size: auto 100%;
  background-position: right top;
  background-repeat: no-repeat;
  .left {
    flex: 1;
    min-width: 20%;
    padding-right: 12px;
  }
  .lab {
    font-size: 12px;
    color: #8B909B;
    margin-bottom: 11px;
  }
  .el-icon-caret-bottom {
    transition: transform 0.4s;
    &.active {
      transform: rotate(-180deg);
    }
  }
  .number {
    font-weight: 600;
    font-size: 22px;
    color: #000000;
  }
  .img {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 26px;
    transform: translateY(100%);
  }
}
.btn {
  min-width: 80px;
  text-align: center;
  padding: 0 6px;
  line-height: 34px;
  background-color: #000000;
  border-radius: 6px;
  border: 1px solid #0D0D0D;
  font-weight: 600;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
  position: relative;
  .el-icon-caret-top {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translate(-50%, 50%);
    color: #F7483F;
    font-size: 20px;
  }
}
.one-box {
  position: absolute;
  bottom: -5px;
  right: 0;
  transform: translateY(100%);
  background-color: #F7483F;
  padding: 0 6px;
  border-radius: 3px;
  line-height: 23px;
  white-space: nowrap;
  color: #fff;
  font-size: 12px;
  z-index: 2;
}

</style>