<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" :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 lineView from "@/components/charts/line.vue";
import dateList from "./dateList.vue";
export default {
  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,
    }
  },
  computed: {
    cycleText() {
      return {
        '7': "近7天",
        '30': "近一月",
        '90': "近三月",
        '180': "近半年",
      }
    }
  },
  mounted () {
    this.setLine1Data()
  },
  methods: {
    selectBack(item) {
      this.dateShow = false
      if (this.targetIndex == 1) {
        if (this.cycle == item) {
          return
        }
        this.cycle = item
      }
      if (this.targetIndex == 2) {
        if (this.cycle1 == item) {
          return
        }
        this.cycle1 = item
      }
    },
    dateShowClick(index) {
      this.targetIndex = index
      this.targetCycle = (index == 1 ? this.cycle : this.cycle1)
      this.dateShow = true
    },
    setLine1Data() {
      var xData = ['03-03', '03-04', '03-05', '03-06', '03-07']
      var yData = [['12', '15', '16', '3', '40']]
      this.$refs['line1'].setOption(xData, yData)
      this.$refs['line2'].setOption(xData, yData)
    }
  }
}
</script>
<style lang="less" scoped>
.section {
  padding: 10px 16px;
}
.box {
  justify-content: space-between;
  .filter {
    font-size: 12px;
    margin-right: -2px;
  }
}
</style>