<template>
  <div :id="id" style="width: 100%">
  </div>
</template>

<script>
import {uuid} from '@tinymce/tinymce-vue/lib/es2015/main/ts/Utils'

export default {
  props: {
    type: {
      type: String
    },
    tableInstance: {
      type: Object,
    },
    tableColumns: {
      type: Array
    },
    tableData: {
      type: Array
    },
    rowFieldKeys: {
      type: Array,
      default: ()=> {
        return []
      }
    },
    title: {
      type: String,
    },
    subTitle: {
      type: String,
    },
    //柱状图 x轴为数值
    xValue: {
      type: Boolean,
      default: false
    },
    //是否有行号列
    lineNo: {
      type: Boolean,
      default: false
    },
    //图表的类型
    dataType: {
      type: Array,
      default: ()=> {
        return []
      }
    }
  },
  data() {
    return {
      id: uuid('chart'),
    }
  },
  watch: {
    type() {
      this.init()
    },
    tableData() {
      this.init()
    },
  },
  methods: {
    /**
     * @desc   : 获取列信息
     * @author : 洪旭东
     * @date   : 2023-04-14 15:36
     */
    getColumn() {
      //表格全部列
      let colList = []
      if (this.tableInstance) {
        colList = JSON.parse(JSON.stringify(this.tableInstance.$refs.table.getColumns()))
      } else {
        colList = JSON.parse(JSON.stringify(this.tableColumns))
      }
      //去除行号列
      if (this.lineNo) {
        colList.splice(0, 1)
      }
      return colList
    },
    /**
     * @desc   : 获取表格数据
     * @author : 洪旭东
     * @date   : 2023-04-18 08:43
     */
    getData() {
      if (this.tableInstance) {
        return this.tableInstance.$refs.table.getTableData().tableData
      } else {
        return this.tableData?.copy() || []
      }
    },
    /**
     * @desc   : 柱状图
     * @author : 洪旭东
     * @date   : 2023-04-14 16:46
     */
    bar() {
      let tableData = this.getData()
      //表格全部列
      let colList = this.getColumn()
      //行
      let xCol = colList.filter(f => this.rowFieldKeys.indexOf(f.field) !== -1)[0]
      //把行的列过滤掉，只保留值的列
      let data = colList.filter(f => this.rowFieldKeys.indexOf(f.field) === -1).map((c, i) => {
        return {
          name: c.title,
          data: tableData.map(m => m[c.field]),
          type: this.dataType.length ? this.dataType[i]:'bar',
          showBackground: true,
        }
      })
      let echarts = require('echarts')
      let chart = echarts.init(document.getElementById(this.id))
      chart.setOption(
        {
          tooltip: {
            trigger: this.xValue?'item':'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: this.xValue?{
            type: 'value',
          }:{
            type: 'category',
            data: tableData.map(m => m[xCol.field] || 0)
          },
          yAxis: this.xValue?{
            type: 'category',
            data: xCol ? tableData.map(m => m[xCol.field] || 0) : []
          }:{
            type: 'value',
          },
          series: data,
          title: [{
            text: this.title,
            x: 'center'
          },
            {
              subtext: this.subTitle,
              left: 'right',
              subtextStyle: { //设置字体样式
                fontSize: 12,
                fontFamily: 'sans-serif',
              }
            }
          ],
          legend: {
            // Try 'vertical'
            orient: 'horizontal',
            top: 30,
            // top: 'center'
          },
        }
      )
    },
    /**
     * @desc   : 折线图
     * @author : 洪旭东
     * @date   : 2023-04-17 17:04
     */
    line() {
      let tableData = this.getData()
      //表格全部列
      let colList = this.getColumn()
      //行
      let xCol = colList.filter(f => this.rowFieldKeys.indexOf(f.field) !== -1)[0]
      //把行的列过滤掉，只保留值的列
      let data = colList.filter(f => this.rowFieldKeys.indexOf(f.field) === -1).map(c => {
        return {
          name: c.title,
          data: tableData.map(m => m[c.field] || 0),
          type: 'line',
          showBackground: true,
          emphasis: {
            focus: 'series'
          },
          //面积图
          // areaStyle: {},
        }
      })

      let echarts = require('echarts')
      let chart = echarts.init(document.getElementById(this.id))
      chart.setOption(
        {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: {
            type: 'category',
            data: tableData.map(m => m[xCol.field])
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
          },
          series: data,
          title: [{
            text: this.title,
            x: 'center'
          },
            {
              subtext: this.subTitle,
              left: 'right',
              subtextStyle: { //设置字体样式
                fontSize: 12,
                fontFamily: 'sans-serif',
              }
            }
          ],
          legend: {
            // Try 'vertical'
            orient: 'horizontal',
            top: 30,
            // top: 'center'
          },
        }
      )
    },
    /**
     * @desc   : 饼状图
     * @author : 洪旭东
     * @date   : 2023-04-17 17:04
     */
    pie() {
      let tableData = this.getData()
      //表格全部列
      let colList = this.getColumn()
      //行 中第一个字段
      let keyField = colList.filter(f => this.rowFieldKeys.indexOf(f.field) !== -1)[0].field
      //值 中第一个字段
      let valueField = colList.filter(f => this.rowFieldKeys.indexOf(f.field) === -1)[0].field

      let echarts = require('echarts')
      let chart = echarts.init(document.getElementById(this.id))
      chart.setOption(
        {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              type: this.type,
              data: tableData.map(m => {
                return {
                  value: m[valueField],
                  name: m[keyField]
                }
              }),
            }
          ]
        }
      )
    },
    /**
     * @desc   : 画图
     * @author : 洪旭东
     * @date   : 2023-04-17 13:02
     */
    init() {
      this.dispose()
      this[this.type]()
    },
    /**
     * @desc   : 销毁实例
     * @author : 洪旭东
     * @date   : 2023-04-17 11:03
     */
    dispose() {
      let echarts = require('echarts')
      if(echarts && document.getElementById(this.id)){
        let chart = echarts.getInstanceByDom(document.getElementById(this.id))
        if (chart) chart.dispose();
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  beforeDestroy() {
    this.dispose()
  }
}
</script>

<style scoped>

</style>
