<template>
  <div class="price-analysis" v-if="showChart">
    <m-chart :config="config" :data="data"/>
    <Select :value="type" class="custom-select" multiple :max-tag-count="3" @on-change="handleChange" size="small" transfer>
      <Option v-for="item in options" :key="item.name" :disabled="item.disabled" :value="item.name">{{item.name}}</Option>
    </Select>
  </div>
</template>

<script>
const mock = [
  {type: '青鱼', date: '2020.08', value: 22},
  {type: '青鱼', date: '2020.09', value: 23},
  {type: '青鱼', date: '2020.10', value: 22},
  {type: '青鱼', date: '2020.11', value: 22},
  {type: '青鱼', date: '2020.12', value: 22},
  {type: '草鱼', date: '2020.08', value: 11},
  {type: '草鱼', date: '2020.09', value: 10},
  {type: '草鱼', date: '2020.10', value: 16},
  {type: '草鱼', date: '2020.11', value: 12},
  {type: '草鱼', date: '2020.12', value: 12},
  {type: '鲢', date: '2020.08', value: 7},
  {type: '鲢', date: '2020.09', value: 8},
  {type: '鲢', date: '2020.10', value: 7},
  {type: '鲢', date: '2020.11', value: 6},
  {type: '鲢', date: '2020.12', value: 6},
  {type: '鳙', date: '2020.08', value: 10},
  {type: '鳙', date: '2020.09', value: 15},
  {type: '鳙', date: '2020.10', value: 10},
  {type: '鳙', date: '2020.11', value: 14},
  {type: '鳙', date: '2020.12', value: 14},
  {type: '南美白对虾', date: '2020.08', value: 51},
  {type: '南美白对虾', date: '2020.09', value: 47},
  {type: '南美白对虾', date: '2020.10', value: 97},
  {type: '南美白对虾', date: '2020.11', value: 89},
  {type: '南美白对虾', date: '2020.12', value: 89},
  {type: '中华绒螯蟹', date: '2020.08', value: 162},
  {type: '中华绒螯蟹', date: '2020.09', value: 168},
  {type: '中华绒螯蟹', date: '2020.10', value: 145},
  {type: '中华绒螯蟹', date: '2020.11', value: 162},
  {type: '中华绒螯蟹', date: '2020.12', value: 162},
  {type: '克氏原螯虾', date: '2020.08', value: 33},
  {type: '克氏原螯虾', date: '2020.09', value: 31},
  {type: '克氏原螯虾', date: '2020.10', value: 43},
  {type: '克氏原螯虾', date: '2020.11', value: 37},
  {type: '克氏原螯虾', date: '2020.12', value: 37},
]
export default {
  name: 'PriceAnalysis',
  data() {
    return {
      type: ['青鱼', '草鱼', '鳙'],
      options: [
        {name: '青鱼', disabled: false},
        {name: '草鱼', disabled: false},
        {name: '鲢', disabled: false},
        {name: '鳙', disabled: false},
        {name: '南美白对虾', disabled: false},
        {name: '中华绒螯蟹', disabled: false},
        {name: '克氏原螯虾', disabled: false},
      ],
      showChart: false,
      config: {
        colors: ['#eeb514', '#5eec67', '#01adfe'],
        legend: {align: 'right'},
        shape: [
          // {key: 'value', type: 'line'},
          // {key: 'fish2', name: '鲫鱼', type: 'line'},
          // {key: 'fish3', name: '南美白对虾', type: 'line'},
        ],
        yAxis: {
          name: '单位：元',
          // max: 50,
        },
        xAxis: {
          key: 'date',
        }
      },
      data: [
        // {date: '2020.3', fish1: 10, fish2: 15, fish3: 25},
        // {date: '2020.4', fish1: 10, fish2: 18, fish3: 28},
        // {date: '2020.5', fish1: 20, fish2: 25, fish3: 27},
        // {date: '2020.6', fish1: 15, fish2: 15, fish3: 29},
        // {date: '2020.7', fish1: 10, fish2: 12, fish3: 31},
        // {date: '2020.8', fish1: 11, fish2: 18, fish3: 24},
        // {date: '2020.9', fish1: 12, fish2: 11, fish3: 29},
      ],
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true, 0)
    this.setChartData(this.type)
  },
  methods: {
    handleChange(type) {
      this.type = type
      this.setChartData(type)
      this.options.forEach(item => item.disabled = (type.length >= 3 && type.indexOf(item.name) < 0))
    },
    setChartData(type) {
      let result = []
      const totalNumbers = []
      this.config.shape = type.map((item, i) => {
        if (result.length === 0) {
          result = mock.filter(e => e.type === item).map(e => {
            totalNumbers.push(e.value)
            return {date: e.date, [`fish${i+1}`]: e.value, }
          })
        } else {
          const list = mock.filter(e => e.type === item)
          result.forEach(e => {
            const {value} = list.find(f => f.date === e.date)
            totalNumbers.push(value || 0)
            e[`fish${i+1}`] = value || 0
          })
        }
        return {key: `fish${i+1}`, name: item, type: 'line'}
      })
      // this.config.yAxis.max = Math.max(...totalNumbers) + 1
      this.config.yAxis.min = Math.min(...totalNumbers) - 1
      this.data = result
    },
  }
}
</script>

<style lang="stylus" scoped>
.price-analysis
  width 100%
  height 100%
  overflow hidden
</style>
