<template>
  <div>
    <div class="section">
      <div class="box flex">
        <div class="title">
          <!-- 收益率 -->
          {{ $t('follow.l7') }}
        </div>
        <div class="filter" @click="dateShowClick(1)">
          {{ cycleText[cycle] }}<i class="el-icon-caret-bottom"></i>
        </div>
      </div>
      <lineView height="168px" :percentage="true" :legendShow="false" :lineTitle="lineTitle" id="line1" ref="line1" />
    </div>
    <div class="section">
      <div class="box flex">
        <div class="title">
          <!-- 总收益 -->
          {{ $t('follow.l8') }}
        </div>
        <div class="filter" @click="dateShowClick(2)">
          {{ cycleText[cycle1] }}<i class="el-icon-caret-bottom"></i>
        </div>
      </div>
      <lineView height="168px" :legendShow="false" :lineTitle="lineTitle1" id="line2" ref="line2" />
    </div>
    <van-popup v-model="dateShow" round position="bottom">
      <dateList @cancel="dateShow = false" :cycle="targetCycle" @success="selectBack"/>
    </van-popup>
  </div>
</template>
<script>
import { getExpertTradeListByDay } from "@/api/copy";
import lineView from "@/components/charts/line.vue";
import dateList from "./dateList.vue";
export default {
  props: ['market'],
  components: {
    lineView,
    dateList
  },
  data () {
    return {
      lineTitle: [this.$t('follow.l7')],
      lineTitle1: [this.$t('follow.l8')],
      cycle: 7,
      cycle1: 7,
      targetCycle: 7,
      targetIndex: 1,
      dateShow: false,
    }
  },
  watch: {
    market() {
      this.getExpertTradeListByDayGroup1()
      this.getExpertTradeListByDayGroup2()
    }
  },
  computed: {
    cycleText() {
      return {
        // '7': "近7天",
        // '30': "近一月",
        // '90': "近三月",
        // '180': "近半年",
        '7': this.$t('follow.l73'),
        '30': this.$t('follow.l74'),
        '90': this.$t('follow.l75'),
        '180': this.$t('follow.l76'),
      }
    }
  },
  created () {
    if (this.market) {
      this.getExpertTradeListByDayGroup1()
      this.getExpertTradeListByDayGroup2()
    }
  },
  methods: {
    selectBack(item) {
      this.dateShow = false
      if (this.targetIndex == 1) {
        if (this.cycle == item) {
          return
        }
        this.cycle = item
        this.getExpertTradeListByDayGroup1()
      }
      if (this.targetIndex == 2) {
        if (this.cycle1 == item) {
          return
        }
        this.cycle1 = item
        this.getExpertTradeListByDayGroup2()
      }
    },
    dateShowClick(index) {
      this.targetIndex = index
      this.targetCycle = (index == 1 ? this.cycle : this.cycle1)
      this.dateShow = true
    },
    getExpertTradeListByDayGroup1() {
      var time_start = new Date().getTime()
      var time_end = new Date()
      time_end = time_end.setDate(time_end.getDate()-this.cycle);
      getExpertTradeListByDay({
        eid: this.$route.params.id,
        time_start: time_end,
        time_end: time_start,
        market: this.market,
      }).then(res => {
        var list = (res.list || []).sort((a, b) => new Date(a.date.replace(/-/g, '/')).getTime() - new Date(b.date.replace(/-/g, '/')).getTime())
        var xData = []
        var yData = [[]]
        list.forEach(item => {
          xData.push(this.$parseTime(new Date(item.date.replace(/-/g, '/')), '{m}-{d}'))
          yData[0].push(item.balance ? (item.profit*100/item.balance).toFixed(2) : item.profit ? 100.00 : 0.00)
        })
        this.$nextTick(() => {
          this.$refs['line1'].setOption(xData, yData)
        })
      }).catch(() => {})
    },
    getExpertTradeListByDayGroup2() {
      var time_start = new Date().getTime()
      var time_end = new Date()
      time_end = time_end.setDate(time_end.getDate()-this.cycle1);
      getExpertTradeListByDay({
        eid: this.$route.params.id,
        time_start: time_end,
        time_end: time_start,
        market: this.market,
      }).then(res => {
        var list = (res.list || []).sort((a, b) => new Date(a.date.replace(/-/g, '/')).getTime() - new Date(b.date.replace(/-/g, '/')).getTime())
        var xData = []
        var yData = [[]]
        list.forEach(item => {
          xData.push(this.$parseTime(new Date(item.date.replace(/-/g, '/')), '{m}-{d}'))
          yData[0].push(item.profit)
        })
        this.$nextTick(() => {
          this.$refs['line2'].setOption(xData, yData)
        })
      }).catch(() => {})
    },
  }
}
</script>
<style lang="less" scoped>
.section {
  padding: 10px 16px;
}
.box {
  justify-content: space-between;
  .filter {
    font-size: 12px;
    margin-right: -2px;
  }
}
</style>