<template>
  <div class="com">
    <div class="title flex">
      <div>
        <!-- 收益明细 -->
        {{ $t('follow.l18') }}
      </div>
      <div class="btn" @click="cancel">
        <!-- 确认 -->
        {{ $t('common.l3') }}
      </div>
    </div>
    <div class="row">
      <div class="top flex">
        <div>
          <!-- 跟单总收益 -->
          {{ $t('follow.l1') }}
        </div>
        <div class="amount" :class="allProfit >= 0 ? 'up' : 'down'">
          {{allProfit > 0 ? '+' : ''}} {{ $numToThousand(allProfit) }} USD
        </div>
      </div>
      <div class="box">
        <div class="col flex">
          <div class="lab">
            <!-- 已实现收益 -->
            {{ $t('follow.l19') }}
          </div>
          <div :class="profitedAll >= 0 ? 'up' : 'down'">
            {{profitedAll > 0 ? '+' : ''}} {{ $numToThousand(profitedAll) }} USD
          </div>
        </div>
        <div class="col flex">
          <div class="lab">
            <!-- 浮动收益 -->
            {{ $t('follow.l20') }}
          </div>
          <div :class="positionProfit >= 0 ? 'up' : 'down'">
            {{positionProfit > 0 ? '+' : ''}} {{ $numToThousand(positionProfit) }} USD
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="top flex">
        <div>
          <!-- 分润支出 -->
          {{ $t('follow.l21') }}
        </div>
        <div class="amount" :class="allBonus >= 0 ? 'up' : 'down'">
          {{allBonus > 0 ? '+' : ''}} {{ $numToThousand(allBonus) }} USD
        </div>
      </div>
      <div class="box">
        <div class="col flex">
          <div class="lab">
            <!-- 已结分润 -->
            {{ $t('follow.l22') }}
          </div>
          <div :class="bonusedAll >= 0 ? 'up' : 'down'">
            {{bonusedAll > 0 ? '+' : ''}} {{ $numToThousand(bonusedAll) }} USD
          </div>
        </div>
        <div class="col flex">
          <div class="lab">
            <!-- 预扣分润 -->
            {{ $t('follow.l23') }}
          </div>
          <div :class="positionBonus >= 0 ? 'up' : 'down'">
            {{positionBonus > 0 ? '+' : ''}} {{ $numToThousand(positionBonus) }} USD
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="top flex">
        <div>
          <!-- 跟单净收益 -->
          {{ $t('follow.l24') }}
        </div>
        <div class="amount" :class="netProfit >= 0 ? 'up' : 'down'">
          {{netProfit > 0 ? '+' : ''}} {{ $numToThousand(netProfit) }} USD
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getFollowPositionTradeList } from "@/api/copy";
import bus from '@/utils/bus'
import { getProductList } from "@/api/product";
import { mapGetters } from "vuex";
export default {
  inject: ['getproductDataObj'],
  data () {
    return {
      positionList: [],
      eidRatio: {},
      positionBonus: 0
    }
  },
  computed: {
    ...mapGetters(['followList', 'currencyList']),
    productDataObj() {
      return this.getproductDataObj()
    },
    netProfit() {
      return this.$bigDecimal.add(this.allProfit, this.allBonus)
    },
    allProfit() {
      return this.$bigDecimal.add(this.profitedAll, this.positionProfit)
    },
    allBonus() {
      return this.$bigDecimal.add(this.positionBonus, this.bonusedAll)
    },
    profitedAll() {
      var profit = 0;
      this.followList.forEach((item) => {
        profit = this.$bigDecimal.add(profit, item.profit)
      })
      return profit
    },
    bonusedAll() {
      var bonus = 0;
      var eidRatio = {}
      this.followList.forEach((item) => {
        bonus = this.$bigDecimal.add(bonus, item.bonus)
        eidRatio[item.eid] = {
          ratio: item.ratio,
          bonus_ratio: item.bonus_ratio
        }
      })
      this.eidRatio = eidRatio
      return this.$bigDecimal.multiply(bonus, -1)
    },
    positionProfit() {
      var positionList = this.positionList
      var allProfit = 0
      var positionBonus = 0
      positionList.forEach((item, index) => {
        var v = item
        var profit = 0
        var currency = this.serverUtil[item.market]
        profit = this.$bigDecimal.add(profit, v.profit)
        profit = this.$bigDecimal.add(profit, v.commission)
        profit = this.$bigDecimal.add(profit, v.swaps)
        profit = this.$bigDecimal.divide(profit, this.currencyList[currency] || 1)
        if (Number(profit) > 0) {
          positionBonus = this.$bigDecimal.add(positionBonus, this.$bigDecimal.multiply(this.$bigDecimal.multiply(profit, this.eidRatio[item.eid].ratio || 0), this.eidRatio[item.eid].bonus_ratio))
        }
        allProfit = this.$bigDecimal.add(allProfit, profit)
      })
      this.positionBonus = this.$bigDecimal.multiply(positionBonus, -1)
      return allProfit
    }
  },
  beforeDestroy() {
    bus.$off('updateSymbol', this.updateSymbol)
  },
  created () {
    this.getFollowPositionTradeList()
    bus.$on('updateSymbol', this.updateSymbol)
  },
  methods: {
     getFollowPositionTradeList() {
      getFollowPositionTradeList({
        eid: this.$route.params.id
      }).then(res => {
        this.positionList = res.list || []
        var symbolList = []
        this.positionList.forEach(item => {
          if (symbolList.indexOf(item.symbol) === -1) {
            symbolList.push(item.symbol)
          }
        })
        if (symbolList.length == 0) {
          return
        }
        getProductList({
          symbol: JSON.stringify(symbolList)
        }).then(res => {
          var list = res.list || []
          var list1 = []
          this.positionSign = true
          list.forEach(item => {
            if (item.profit_mode == 0) {
              var symbol = item.symbol.slice(3, 6)
              if (symbol != 'USD') {
                list1.push(symbol + 'USD')
                list1.push('USD' + symbol)
                symbolList.push(symbol + 'USD')
                symbolList.push('USD' + symbol)
              }
            } else {
              if (item.currency != 'USD') {
                list1.push(item.currency + 'USD')
                symbolList.push(item.currency + 'USD')
                list1.push('USD' + item.currency)
                symbolList.push('USD' + item.currency)
              }
            }
          })
          bus.$emit("alterProductData", {
            getData: list1,
            setData: list,
            subscribeList: [...symbolList]
          });
        })
      }).catch(() => {})
    },
    updateSymbol() {
      var positionList = this.positionList
      positionList.forEach((item, index) => {
        var v = item
        this.updateSign = true
        if (this.productDataObj[item.symbol]) {
          if (item.cmd == 0 && this.productDataObj[item.symbol].sell) {
            v.close_price = this.productDataObj[item.symbol].sell
          }
          if (item.cmd == 1 && this.productDataObj[item.symbol].buy) {
            v.close_price = this.productDataObj[item.symbol].buy
          }
        }
        v.profit = this.formatProfit(v) || v.profit
        this.$set(this.positionList, index, v)
      })
    },
    formatProfit(data) {
      var currencyData = this.productDataObj[data.symbol]
      if (!currencyData) {
        return data.profit
      }
      var rate, profit;
      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 (data.cmd == '1') {
            if (market2) {
              profit = (data.open_price - data.close_price) * (data.volume) * currencyData.contract_size * rate
            } else if (market1) {
              profit = ((data.open_price - data.close_price) * (data.volume) * currencyData.contract_size) / rate
            } else {
              profit = (data.open_price - data.close_price) * (data.volume) * currencyData.contract_size
            }
          } else if (data.cmd == '0') {
            if (market2) {
              profit = (data.close_price - data.open_price) * (data.volume) * currencyData.contract_size * rate
            } else if (market1) {
              profit = ((data.close_price - data.open_price) * (data.volume) * currencyData.contract_size) / rate
            } else {
              profit = (data.close_price - data.open_price) * (data.volume) * currencyData.contract_size
            }
          }
        } 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 (data.cmd == '1') {
            if (market2) {
              profit = (data.open_price - data.close_price) * (data.volume) * currencyData.contract_size * rate
            } else if (market1) {
              profit = (( data.open_price - data.close_price) * (data.volume) * currencyData.contract_size) / rate
            } else {
              profit = ((data.open_price - data.close_price) * (data.volume) * currencyData.contract_size)
            }
          } else if (data.cmd == '0') {
            if (market2) {
              profit = (data.close_price - data.open_price) * (data.volume) * currencyData.contract_size * rate
            } else if (market1) {
              profit = ((data.close_price - data.open_price) * (data.volume) * currencyData.contract_size) / rate
            } else {
              profit = ((data.close_price - data.open_price) * (data.volume) * currencyData.contract_size)
            }
          }
        }
      } else {
        if (data.cmd == '1') {
          profit = (data.open_price - data.close_price) * (data.volume) * currencyData.contract_size
        } else if (data.cmd == '0') {
          profit = (data.close_price - data.open_price) * (data.volume) * currencyData.contract_size
        }
      }
      if (profit) {
        return profit.toFixed(2)
      }
      return '0.00'
    },
    cancel(){
      this.$emit('cancel')
    }
  }
}
</script>
<style lang="less" scoped>
.com {
  padding: 17px 16px 18px;
  .title {
    font-size: 16px;
    justify-content: space-between;
    margin-bottom: 17px;
  }
}
.btn {
  font-size: 14px;
}
.row {
  border-radius: 8px;
  border: 1px solid #F6F6F6;
  &+.row {
    margin-top: 10px;
  }
  .top {
    justify-content: space-between;
    color: #888888;
    font-weight: 600;
    height: 42px;
    padding: 0 13px;
    .amount {
      font-weight: 400;
      font-size: 14px;
    }
  }
}
.box {
  border-top: 1px solid #F6F6F6;
  padding: 15px 13px;
  .col {
    justify-content: space-between;
    &+.col {
      margin-top: 14px;
    }
  }
  .lab {
    font-size: 12px;
    color: #B6B6B6;
    opacity: 0.88;
  }
}
.up {
  color: var(--red-);
}
.down {
  color: var(--green-);
}

</style>