<template>
  <div class="chart-container">
    <div class="tab-box">
      <el-tabs v-model="year">
        <el-tab-pane
          v-for="item of yearArr"
          :key="item"
          :label="item + ''"
          :name="item + ''"
        />
      </el-tabs>
    </div>
    <div
      ref="chart"
      :class="className"
      :style="{ height: height, width: width }"
    />
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

import { served_increase } from '@/api/dashboard'
import { getYears } from '../../utils'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart',
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '350px',
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    // chartData: {
    //   type: Object,
    //   required: true
    // }
  },
  data() {
    return {
      chart: null,
      year: new Date().getFullYear() + '',
      yearArr: getYears(),
    }
  },
  watch: {
    year: {
      deep: true,
      handler(val) {
        this.initChart(val)
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs['chart'], 'macarons')
      served_increase({
        year: this.year,
      }).then((res) => {
        console.log(res)
        this.setOptions(res.data)
      })
    },
    setOptions({ total, increase } = {}) {
      this.chart.setOption({
        xAxis: {
          name: '时间',
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月',
          ],
          boundaryGap: false,
          axisTick: {
            show: false,
          },
        },
        grid: {
          left: 10,
          right: 45,
          bottom: 20,
          top: 70,
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
          padding: [5, 10],
        },
        yAxis: {
          name: '数量',
          axisTick: {
            show: false,
          },
        },
        legend: {
          show: true,
          top: 15
          // data: ['总量', '增量']
        },
        series: [
          {
            name: '服务总量',
            itemStyle: {
              normal: {
                color: '#FF005A',
                lineStyle: {
                  color: '#FF005A',
                  width: 2,
                },
                // label: {
                //   show: true, // 开启显示
                //   position: 'top', // 在上方显示
                //   textStyle: { // 数值样式
                //     color: 'black',
                //     fontSize: 16
                //   }
                // }
              },
            },
            smooth: true,
            type: 'line',
            data: total,
            animationDuration: 2800,
            animationEasing: 'cubicInOut',
          },
          {
            name: '较上月',
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#3888fa',
                lineStyle: {
                  color: '#3888fa',
                  width: 2,
                },
                areaStyle: {
                  color: '#f3f8ff',
                },
              },
            },
            data: increase,
            animationDuration: 2800,
            animationEasing: 'quadraticOut',
          },
        ],
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.chart-container {
  position: relative;
}
.tab-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: 0 20px;
}
</style>
