<template>
  <div class="component">
    <div class="top" @click="$router.push('/account-operate/' + accountInfo.id)">
      <div class="flex">
        <!-- 资产净值 -->
        {{$t('account.l2')}}({{serverUtil[accountInfo.server] || accountInfo.server}})
        <img v-show="showAssets" @click.stop="toggleShow(false)" class="eye" src="/img/account/icon1.svg" alt="极度证券">
        <img v-show="!showAssets" @click.stop="toggleShow(true)" class="eye" src="/img/account/icon2.svg" alt="极度证券">
      </div>
      <div class="amount" v-if="showAssets">{{ $numToThousand((equity)) }}</div>
      <div class="amount" v-else>*****</div>
      <div class="profit-box">
        <div>
          <!-- 持仓盈亏 -->
          {{$t('account.l19')}}
        </div>
        <div class="profit" :class="{up: allProfit >= 0, down: allProfit < 0}">{{ allProfit > 0 ? '+' : '' }}{{ $numToThousand((allProfit)) }}({{ allProfit > 0 ? '+' : '' }}{{ getPercentage(allProfit, equity) }}%)</div>
      </div>
      <img class="right" src="/img/account/right.png" alt="极度证券">
    </div>
    <div class="container">
      <van-row>
        <van-col span="8">
          <div class="label flex">
            <!-- 可用现金 -->
            {{$t('account.l23')}}
            <!-- 可用现金说明：可用现金是客户账号中可以用于交易的资金。 -->
            <img class="info" @click="descriptionPopShow($t('account.l88'), $t('account.l89'))" src="/img/account/info.png" alt="极度证券">
          </div>
          <div v-if="showAssets">{{ $numToThousand((marginFree)) }}</div>
          <div v-else>*****</div>
        </van-col>
        <van-col span="8">
          <div class="label flex">
            <!-- 账户结余 -->
            {{$t('account.l20')}}
            <!-- 账户结余说明：上一笔平仓后归属于客户的资金，不包含浮动盈亏和信用赠金。 -->
            <img class="info" @click="descriptionPopShow($t('account.l90'), $t('account.l91'))" src="/img/account/info.png" alt="极度证券">
          </div>
          <div v-if="showAssets">{{ $numToThousand((accountInfo.balance)) }}</div>
          <div v-else>*****</div>
        </van-col>
        <van-col span="8" class="text-right">
          <div class="label flex">
            <!-- 持仓市值 -->
            {{$t('account.l21')}}
            <!-- 持仓市值说明：持仓市值是指客户当前持仓的价值。 -->
            <img class="info" @click="descriptionPopShow($t('account.l92'), $t('account.l93'))" src="/img/account/info.png" alt="极度证券">
          </div>
          <div>{{ allMarket > 0 ? '+' : '' }}{{ $numToThousand((allMarket)) }}</div>
        </van-col>
      </van-row>
      <van-row>
        <van-col span="8">
          <div class="label flex">
            <!-- 赠金/信用 -->
            {{$t('account.l83')}}
            <!-- 赠金/信用说明： 参与优惠活动后领取到的奖金，可以直接用户下单交易，完成活动要求后可转入账户余额。-->
            <img class="info" @click="descriptionPopShow($t('account.l94'), $t('account.l95'))" src="/img/account/info.png" alt="极度证券">
          </div>
          <div v-if="showAssets">{{ $numToThousand(cashInfo.gift) }}</div>
          <div v-else>*****</div>
        </van-col>
        <van-col span="8">
          <div class="label flex">
            <!-- 占用保证金 -->
            {{$t('account.l22')}}
            <!-- 占用保证金说明： 占用保证金是当前已经使用了的保证金。-->
            <img class="info" @click="descriptionPopShow($t('account.l96'), $t('account.l97'))" src="/img/account/info.png" alt="极度证券">
          </div>
          <div v-if="showAssets">{{ $numToThousand((accountInfo.margin)) }}</div>
          <div v-else>*****</div>
        </van-col>
        <van-col span="8" class="text-right">
          <div class="label flex">
            <!-- 保证金比例 -->
            {{$t('account.l84')}}
            <img class="info" @click="marginLevelPop = true" src="/img/account/info.png" alt="极度证券">
          </div>
          <div v-if="showAssets">{{ getPercentage(equity, accountInfo.margin) }}%</div>
          <div v-else>*****</div>
        </van-col>
      </van-row>
    </div>
    <van-popup v-model="textDescriptionPop" round position="bottom">
      <textDescription :title="title" :text="text"/>
    </van-popup>
    <van-popup v-model="marginLevelPop" round position="bottom">
      <marginLevel/>
    </van-popup>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import textDescription from "@/components/textDescription";
import marginLevel from "@/components/textDescription/marginLevel.vue";
export default {
  props: ['accountInfo', 'allProfit', 'allMarket', 'positionSign', 'updateSign'],
  components: {
    textDescription,
    marginLevel
  },
  data () {
    return {
      textDescriptionPop: false,
      marginLevelPop: false,
      title: '',
      text: '',
    }
  },
  computed: {
    ...mapGetters(['showAssets', 'accountList', 'cashInfo']),
    equity() {
      if(!this.positionSign || !this.updateSign) {
        return this.accountInfo.equity
      }
      var equity = Number(this.$bigDecimal.add(this.accountInfo.balance, Number(this.allProfit)))
      var accountList = this.accountList
      accountList.forEach(item => {
        if (item.server == this.accountInfo.server) {
          item.equity = equity
        }
      })
      return equity
    },
    marginFree() {
      if(!this.positionSign || !this.updateSign) {
        return this.accountInfo.margin_free
      }
      return this.$bigDecimal.add(this.$bigDecimal.subtract(this.accountInfo.balance, Number(this.accountInfo.margin)), Number(this.allProfit))
    }
  },
  methods: {
    getPercentage(value, equity) {
      if (!value || !Number(equity)) {
        return '0.00'
      }
      return (value/equity * 100).toFixed(2)
    },
    toggleShow(sign) {
      this.$store.commit('setShowAssets', sign)
    },
    descriptionPopShow(title, text) {
      this.title = title
      this.text = text
      this.textDescriptionPop = true
    }
  }
}
</script>
<style lang="less" scoped>
.component {
  background-color: var(--bg-);
  margin-bottom: 12px;
  padding-bottom: 16px;
  border-radius: 12px;
  cursor: pointer;
}
.top {
  color: #6C6C6C;
  font-size: 12px;
  position: relative;
  padding: 14px 12px 20px;
  .right {
    position: absolute;
    top: 30px;
    right: 10px;
    width: 7px;
  }
  .amount {
    color: #000000;
    font-size: 23px;
    font-weight: bold;
    margin-top: 5px;
  }
  >.flex {
    column-gap: 3px;
  }
  .eye {
    width: 16px;
    cursor: pointer;
  }
  .profit-box {
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 16px;
    color: #6C6C6C;
    margin-top: 9px;
  }
  .profit {
    padding-left: 4px;
    &.up {
      color: #EA4A45;
    }
    &.down {
      color: #07AC3A;
    }
  }
}
.container {
  padding-left: 12px;
  padding-right: 10px;
  font-size: 13px;
  line-height: 16px;
  color: #000000;
  word-break: break-all;
  .van-row + .van-row {
    margin-top: 13px;
  }
  .label {
    font-size: 11px;
    color: #6C6C6C;
    margin-bottom: 5px;
    line-height: 1;
  }
  .text-right {
    text-align: right;
    .flex {
      justify-content: flex-end;
    }
  }
  .info {
    width: 10px;
    margin-left: 2px;
    cursor: pointer;
  }
}
</style>