<template>
  <div class="list">
    <div class="li" v-for="item in list" :key="item.ticket">
      <div class="box">
        <div class="left">
          <div class="name-box flex">
            <div class="title" v-if="productDataObj[item.symbol]">
            {{ productDataObj[item.symbol].title }}
          </div>
            <div>({{ item.symbol }})</div>
            <div class="cmd" :class="'cmd' + item.cmd">
              <!-- 买 -->
              {{ item.cmd == 0 ? $t('follow.l32') : $t('follow.l33') }}
            </div>
          </div>
          <div class="price-box flex">
            <div>{{ $handleDigits(item.open_price, productDataObj[item.symbol] ? productDataObj[item.symbol].digits : 2) }}</div>
            <div>&gt;</div>
            <div v-if="productDataObj[item.symbol]" :class="{up: item.cmd == 0, down: item.cmd == 1}">{{ $handleDigits(item.cmd == 0 ? productDataObj[item.symbol].ask : productDataObj[item.symbol].bid, productDataObj[item.symbol].digits) }}</div>
          </div>
        </div>
        <div class="profit">
          <div class="lab">
            <!-- 持仓盈亏 -->
            {{ $t('account.l19') }}
          </div>
          <div class="number" :class="item.profit > 0 ? 'up' : 'down'">{{ item.profit > 0 ? '+' : '' }}{{ $handleDigits(item.profit) }}({{ getRateReturn(item) }}%)</div>
        </div>
      </div>
      <van-row>
        <van-col span="8">
          <div class="lab">
            <!-- 持仓数量 -->
            {{ $t('follow.l34') }}
          </div>
          <div v-if="productDataObj[item.symbol]">
            {{ $handleDigits($bigDecimal.multiply(item.volume, productDataObj[item.symbol].contract_size)) }}
          </div>
        </van-col>
        <van-col span="8">
          <div class="lab">
            <!-- 持仓市值 -->
            {{ $t('account.l21') }}
          </div>
          <div>
            {{ formatMarket(item) }}
          </div>
        </van-col>
      </van-row>
      <div class="time">
        {{ item.open_time.replace(/-/g, '/') }}
      </div>
    </div>
    <NoData v-if="list.length == 0" />
  </div>
</template>
<script>
export default {
  props: ['list'],
  inject: ['getproductDataObj'],
  data () {
    return {
    }
  },
  computed: {
    productDataObj() {
      return this.getproductDataObj()
    },
  },
  methods: {
    formatMarket(item) {
      var currencyData = this.productDataObj[item.symbol]
      if (currencyData) {
        var market = this.$bigDecimal.multiply(item.close_price, this.$bigDecimal.multiply(item.volume, currencyData.contract_size))
        var rate;
        if (currencyData.market == 'CFD') {
          if (currencyData.profit_mode == '1') {
            var market1 = ''
            var market2 = ''
            if (currencyData.currency != 'USD') {
              market1 = this.productDataObj[`USD${currencyData.currency}`]
              market2 = this.productDataObj[`${currencyData.currency}USD`]
              if (market1) {
                rate = (market1['ask'] + market1['bid']) / 2
              }
              if (market2) {
                rate = (market2['ask'] + market2['bid']) / 2
              }
              if (market2) {
                market = market * rate
              } else if (market1) {
                market = market / rate
              }
            }
          } else if (currencyData.profit_mode == '0') {
            var symbol = currencyData.symbol.slice(3, 6)
            var market1 = this.productDataObj[`USD${symbol}`]
            var market2 = this.productDataObj[`${symbol}USD`]
            if (market1) {
              rate = (market1['ask'] + market1['bid']) / 2
            }
            if (market2) {
              rate = (market2['ask'] + market2['bid']) / 2
            }
            if (market2) {
              market = market * rate
            } else if (market1) {
              market = market / rate
            }
          }
        }
        return Number(market).toFixed(2)
      }
      return this.$bigDecimal.multiply(item.close_price, this.$bigDecimal.multiply(item.volume, item.productBean.contract_size))
    },
    getRateReturn(item) {
      return ((((item.cmd == 0 ? this.productDataObj[item.symbol].ask : this.productDataObj[item.symbol].bid) - item.open_price) / item.open_price) * 100).toFixed(2)
    }
  }
}
</script>
<style lang="less" scoped>
.list {
  padding: 0 16px 10px;
}
.li {
  border-radius: 8px;
  border: 1px solid #F6F6F6;
  padding: 13px 9px;
  position: relative;
  margin-bottom: 10px;
}
.box {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 6px;
  margin-bottom: 10px;
  .left {
    flex: 1;
    min-width: 0px;
  }
  .cmd {
    padding: 2px;
    font-size: 12px;
    font-weight: 600;
    font-size: 10px;
    background-color: var(--red-);
    color: #fff;
    margin-left: 8px;
    border-radius: 2px;
  }
  .title {
    min-width: 0px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .name-box {
    margin-bottom: 6px;
  }
  .price-box {
    font-size: 12px;
    color: #B6B6B6;
    column-gap: 4px;
  }
  .profit {
    text-align: right;
    .lab {
      font-size: 12px;
      color: #888888;
      margin-bottom: 6px;
    }
    .number{
      font-weight: 600;
    }
  }
}
.price {
  padding-top: 11px;
  font-size: 12px;
  color: #333333;
  column-gap: 4px;
}
.van-row {
  font-size: 10px;
  word-break: break-all;
  .lab {
    color: #B6B6B6;
    margin-bottom: 4px;
  }
}
.time {
  font-size: 10px;
  color: #B6B6B6;
  margin-top: 10px;
}
.up {
  color: var(--red-);
}
.down {
  color: var(--green-);
}
</style>