<template>
  <van-list
    :offset="900"
    v-model="loading"
    :finished="finished"
    :finished-text="list.length ? $t('common.l5') : ''"
    @load="onLoad"
  >
    <div class="li" v-for="item in list" :key="item.ticket">
      <div class="left">
        <div class="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 flex">
          <div>{{ $handleDigits(item.open_price, productDataObj[item.symbol] ? productDataObj[item.symbol].digits : 2) }}</div>
          &gt;
          <div :class="{up: item.cmd == 0, down: item.cmd == 1}">{{ $handleDigits(item.close_price, productDataObj[item.symbol] ? productDataObj[item.symbol].digits : 2) }}</div>
        </div>
        <div class="time flex">
          <div>{{ item.open_time.replace(/-/g, '/') }}</div>
          <img class="icon" src="/img/copy/icon1.png" alt="">
          <div>{{ item.close_time.replace(/-/g, '/') }}</div>
        </div>
      </div>
      <div class="right">
        <div class="flex box1">
          <div class="lab">
            <!-- 数量 -->
            {{ $t('common.l25') }}
          </div>
          <div v-if="productDataObj[item.symbol]">
            {{ $handleDigits($bigDecimal.multiply(item.volume, productDataObj[item.symbol].contract_size)) }}
          </div>
        </div>
        <div class="income-box">
          <div>
            <!-- 收益率 -->
            {{ $t('follow.l7') }}
          </div>
          <div class="val" :class="getRateReturn(item) > 0 ? 'up' : 'down'">
            {{ getRateReturn(item) }}%
          </div>
        </div>
      </div>
    </div>
    <NoData v-if="!loading && list.length == 0" />
  </van-list>
</template>
<script>
import { getExpertTradeList } from "@/api/copy";
import bus from '@/utils/bus'
import { mapGetters } from "vuex";
export default {
  inject: ['getproductDataObj'],
  data () {
    return {
      pageNum: 0,
      pageSize: 20,
      finished: false,
      loading: false,
      list: [],
      symbolList: [],
    }
  },
  computed: {
    ...mapGetters(['expertInfo']),
    productDataObj() {
      return this.getproductDataObj()
    },
  },
  created () {
  },
  methods: {
    onLoad() {
      this.pageNum += 1;
      if (this.pageNum == 1) {
        this.list = [];
      }
      this.getExpertTradeList()
    },
    getExpertTradeList() {
      getExpertTradeList({
        eid: this.expertInfo.eid,
        status: 2,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then(res => {
        var list = res.list || [];
        var symbolList = []
        list.forEach((item) => {
          if (this.symbolList.indexOf(item.symbol) === -1 && !this.productDataObj[item.symbol]) {
            symbolList.push(item.symbol)
            this.symbolList.push(item.symbol)
          }
        })
        bus.$emit("alterProductData", {
          getData: symbolList
        });
        if (this.pageNum == 1) {
          this.list = list;
        } else {
          this.list = this.list.concat(list);
        }
        this.loading = false;
        if (res.endRow == res.total) {
          this.finished = true;
        }
      }).catch(() => {})
    },
    getRateReturn(item) {
      return (((item.close_price - item.open_price) / item.open_price) * 100).toFixed(2)
    }
  }
}
</script>
<style lang="less" scoped>
.van-list {
  padding: 0 16px 10px;
}
.li {
  border-radius: 8px;
  border: 1px solid #F6F6F6;
  padding: 14px 9px;
  position: relative;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  column-gap: 12px;
}
.left {
  flex: 1;
  min-width: 0px;
}
.box {
  margin-bottom: 6px;
  .title {
    min-width: 0px;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .cmd {
    margin-left: 6px;
    padding: 2px;
    border-radius: 2px;
    background-color: var(--red-);
    font-weight: 600;
    font-size: 10px;
    color: #FFFFFF;
  }
  .cmd1 {
    background-color: var(--green-);
  }
}
.price {
  font-size: 12px;
  color: #B6B6B6;
  column-gap: 4px;
}
.time {
  font-size: 10px;
  color: #B6B6B6;
  margin-top: 10px;
  column-gap: 4px;
  .icon {
    width: 10px;
  }
}
.right {
  .box1 {
    font-size: 10px;
    column-gap: 4px;
    margin-bottom: 10px;
    .lab {
      color: #B6B6B6;
    }
  }
}
.income-box {
  font-size: 12px;
  color: #888888;
  .val {
    font-weight: 600;
    font-size: 14px;
    margin-top: 6px;
  }
}
.up {
  color: var(--red-);
}
.down {
  color: var(--green-);
}
</style>