<template>
  <div ref="enroll_stats" style="width:100%;height:100%;" />
</template>
<script>
import echarts from 'echarts'
import { getEnrollDataByQuarter } from '@/api/dashboard'
import { fontSize } from 'utils/fontsize'
const Count = 6
export default {
  props: {
    area: { type: String, default: '' }
  },
  data() {
    return {
      myChart: ''
    }
  },
  watch: {
    area() {
      const that = this
      this.$nextTick(function() {
        if (that.myChart) {
          that.myChart.resize()
        }
      })
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    initChart(xData, data) {
      const colorArray = [
        {
          top: '#C4E759',
          bottom: '#6DE195'
        },
        {
          top: '#8DE7FF',
          bottom: '#ABC7FF'
        },
        {
          top: '#41D8DD',
          bottom: '#5583EE'
        }
        // {
        //   top: '#DEB0DF',
        //   bottom: '#a16bfe'
        // },
        // {
        //   top: '#F8C390',
        //   bottom: '#D279EE'
        // }
        // {
        //   top: '#E16E93',
        //   bottom: '#9D2E7D'
        // }
      ]

      const option = {
        // backgroundColor: "#38445E",
        title: {
          text: 'Enrollments of Past 6 Months',
          x: '4%',
          top: 5,
          textStyle: {
            color: '#fff',
            fontSize: fontSize(0.16)
          }
        },
        tooltip: {
          show: true,
          formatter: '{b} : {c}'
        },
        xAxis: {
          type: 'value',
          show: false
        },
        yAxis: {
          type: 'category',
          axisTick: {
            show: false,
            alignWithLabel: false
          },
          inverse: 'true',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              fontSize: fontSize(0.14)
            }
          },
          axisLine: {
            show: false
          },
          data: xData
        },
        grid: {
          left: '80',
          top: '15%',
          bottom: 10
        },
        series: [
          {
            type: 'bar',
            barMaxWidth: fontSize(0.2),
            label: {
              normal: {
                show: true,
                position: 'right',
                textStyle: {
                  fontSize: fontSize(0.14)
                },
                formatter: '{c}',
                color: '#fff'
              }
            },
            data: data,
            barWidth: '70%',
            // barCategoryGap: '55%',
            itemStyle: {
              normal: {
                show: true,
                color: function(params) {
                  const num = colorArray.length
                  return {
                    type: 'linear',
                    colorStops: [
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top
                      },
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top
                      },
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top
                      },
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top
                      },
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top
                      }
                    ]
                  }
                },
                barBorderRadius: 10,
                borderWidth: 0,
                borderColor: '#333'
              }
            }
          }
        ]
      }
      if (this.$refs.enroll_stats) {
        this.myChart = echarts.init(this.$refs.enroll_stats)
        this.myChart.setOption(option)
      }
    },
    getData() {
      getEnrollDataByQuarter(0, Count).then(res => {
        if (res.IsSuccess) {
          if (res.Result) {
            const xData = []
            const data = []
            const result = res.Result
            for (let i = 0; i < result.length; i++) {
              xData.push(result[i].ViewStr)
              data.push(result[i].EnrollCount)
            }
            this.initChart(xData, data)
          }
        } else {
          this.$message({ message: res.ErrorMessage, type: 'error' })
        }
      })
      // .catch(error => {
      //   this.$message({ message: error, type: 'error' })
      // })
    }
  }
}
</script>
