<template>
  <div class="capital-info" v-if="tradeAccount">
    <!-- 资金信息 -->
    <div class="capital-info__header">
      <div class="capital-info__header-content">
        <span>{{tradeAccount.accountid}}</span>
        <span>({{getPayCurrencyTypeEnumItemName(tradeAccount.currencyid)}})</span>
      </div>
      <div class="capital-info__header-icon">
        <i :class="['iconfont', show ? 'icon-zhengyan' : 'icon-biyan']" @click="showAction"></i>
      </div>
    </div>
    <table class="capital-info__table">
      <colgroup>
        <col width="64px" />
        <col width="auto" />
      </colgroup>
      <tbody>
        <tr>
          <td>权益</td>
          <td>{{showValue(formatAmount(tradeAccount.equity))}}</td>
        </tr>
        <tr>
          <td>余额</td>
          <td>{{showValue(formatAmount(tradeAccount.currentbalance))}}</td>
        </tr>
        <tr>
          <td>可用</td>
          <td>{{showValue(formatAmount(tradeAccount.availableBalance))}}</td>
        </tr>
        <tr>
          <td>占用</td>
          <td>{{showValue(formatAmount(tradeAccount.usedmargin))}}</td>
        </tr>
        <tr>
          <td>冻结</td>
          <td>{{showValue(formatAmount(tradeAccount.freezeAmount))}}</td>
        </tr>
        <tr>
          <td>浮盈</td>
          <td :class="{ 'up-quote-color': tradeAccount.positionProfitAndLoss > 0, 'down-quote-color': tradeAccount.positionProfitAndLoss < 0 } ">{{showValue(formatAmount(tradeAccount.positionProfitAndLoss))}}</td>
        </tr>
        <tr>
          <td>风险率</td>
          <td>{{showValue(tradeAccount.hazardRatio > 0 ? (tradeAccount.hazardRatio * 100).toFixed(2)+'%' : 0)}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useTradeAccount } from '@/hooks/account'
import { getPayCurrencyTypeEnumItemName } from '@/common/constants/enumsName';
import { formatAmount } from '@/utils/number'

export default defineComponent({
  name: 'capital-info',
  setup() {
    const { tradeAccount } = useTradeAccount();
    const show = ref<boolean>(true);

    function showAction() {
      show.value = !show.value;
    }

    function showValue(value: number) {
      return show.value ? value : '******';
    }
    return {
      show,
      showValue,
      showAction,
      tradeAccount,
      getPayCurrencyTypeEnumItemName,
      formatAmount,
    };
  },
});
</script>

<style lang="less">
@import './index.less';
</style>
