<template>
  <div>
    <headerView></headerView>
    <div class="box">
      <div class="top">
        <div class="left">
          <div class="flex">
            <!-- <div @click="rateShow = true">总资产.{{ currencyName[currency] }}</div> -->
            <div @click="rateShow = true">{{ $t('account.l') }}.{{ currencyName[currency] }}</div>
            <i class="el-icon-caret-bottom" :class="{active: rateShow}" @click="rateShow = true"></i>
            <img v-show="showAssets" @click.stop="toggleShow(false)" class="eye" src="/img/account/eye.svg" alt="极度证券">
            <img v-show="!showAssets" @click.stop="toggleShow(true)" class="eye" src="/img/account/eye1.svg" alt="极度证券">
          </div>
          <div class="amount" v-if="showAssets">{{ $numToThousand(allAssets) }}</div>
          <div class="amount" v-else>*****</div>
        </div>
        <img class="img" src="/img/account/img.png" alt="极度证券">
        <!-- <i class="el-icon-arrow-right"></i> -->
      </div>
    </div>
    <div class="container">
      <routerView />
      <!-- <div class="poster-box" v-if="adShow">
        <img class="poster" src="/img/user/poster.png" alt="极度证券">
        <img class="close" @click="adShow = false" src="/img/icon/close.png" alt="极度证券">
      </div> -->
      <list></list>
    </div>
    <van-popup v-model="rateShow" round position="bottom">
      <rateList :currency="currency" @success="selectBack"/>
    </van-popup>
  </div>
</template>
<script>
import bus from '@/utils/bus'
import headerView from "./components/header.vue";
import routerView from "./components/routerView.vue";
import list from "./components/list.vue";
import rateList from "./components/rateList.vue";
import { mapGetters } from "vuex";
export default {
  components: {
    headerView,
    routerView,
    list,
    rateList,
  },
  data () {
    return {
      adShow: true,
      rateShow: false,
    }
  },
  computed: {
    ...mapGetters(['showAssets', 'currencyList', 'accountList', 'cashInfo', 'followAccount', 'currency']),
    currencyName() {
      return {
        'CNY': this.$t('common.l21'),
        'USD': this.$t('common.l20'),
        'HKD': this.$t('common.l22'),
      }
    },
    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
    }
  },
  activated() {
    bus.$emit('updateAssets', ['getCash'])
  },
  created () {
    // bus.$emit('updateAssets', ['getCash'])
  },
  methods: {
    selectBack(val) {
      this.$store.commit('setCurrency', val)
      this.rateShow = false
    },
    toggleShow(sign) {
      this.$store.commit('setShowAssets', sign)
    }
  }
}
</script>
<style lang="less" scoped>
.box {
  padding: 7px 18px 18px;
}
.top {
  color: #565759;
  font-size: 12px;
  background: #F7F8FA;
  border-radius: 10px;
  padding: 19px 14px 21px;
  position: relative;
  .amount {
    font-size: 22px;
    font-weight: 600;
    margin-top: 9px;
    color: #000;
  }
  .left {
    position: relative;
    z-index: 2;
    >.flex {
      column-gap: 6px;
    }
  }
  .el-icon-caret-bottom {
    font-size: 14px;
    transition: transform 0.5s;
    &.active {
      transform: rotateZ(180deg);
    }
  }
  .eye {
    width: 20px;
    cursor: pointer;
  }
  .el-icon-arrow-right {
    font-size: 22px;
  }
  .img {
    position: absolute;
    right: 12px;
    bottom: 0px;
    width: 142px;
  }
}
.container {
  padding: 0 18px 20px;
}
.poster-box {
  position: relative;
  margin-bottom: 14px;
  .poster {
    display: block;
    width: 100%;
  }
  .close {
    position: absolute;
    top: 6px;
    right: 5px;
    width: 16px;
    cursor: pointer;
  }
}
</style>