<template>
  <section class="AiDvPlot">
    <ai-select class="plotPicker" v-model="current" :select-list="charts" @change="handleChangeChart"/>
    <div class="plotChart" ref="DvPlot"/>
  </section>
</template>
<script>

import {DvCompData} from "../../../packages/bigscreen/designer/config";

export default {
  name: "AiDvPlot",
  props: {
    options: {default: () => []},
    instance: Function
  },
  data() {
    return {
      current: 0,
      chart: null
    }
  },
  computed: {
    charts: v => v.options.map((e, id) => ({id, label: e.title})),
    plot: v => v.options[v.current],
    tpl: v => v.$echartTpls[v.plot.chart]
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.DvPlot)
      this.handleChangeChart()
    },
    handleChangeChart() {
      const series = this.tpl.series || Array(this.plot.dimensions.length - 1).fill(this.tpl.daemon)
      this.chart.clear()
      this.chart.setOption({
        tooltip: {},
        xAxis: {
          type: 'category', nameGap: 20, axisTick: false,
          axisLabel: {
            color: '#C3C4C4',
            interval: 0,
          },
          axisLine: {
            lineStyle: {
              width: 1
            }
          }
        },
        // 声明一个 Y 轴，数值轴。
        yAxis: {
          nameGap: 23, minInterval: 1,
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLabel: {color: '#C3C4C4'},
          axisLine: {
            lineStyle: {
              color: '#C3C4C4'
            }
          }
        },
        grid: {
          left: '0%',
          right: '0%',
          bottom: '0%',
          top: '26px',
          containLabel: true
        }, series, ...this.tpl
      })
      this.getChartData()
    },
    getChartData() {
      return new DvCompData(this.plot.dataType, this.plot, this.instance).getData().then(source => {
        if (this.tpl.series?.type == 'pie') {
          let data
          if (source?.length == 1) {
            data = this.plot.dimensions.filter(Boolean).map(name => ({name, value: source[0][name]}))
          } else {
            const ds = this.plot.dimensions.filter(Boolean)
            data = source.map(e => ({name: e[ds[0]], value: e[ds[1]]}))
          }
          this.chart.setOption({series: {data}})
        } else {
          const dataset = {source}
          dataset.dimensions = this.plot.dimensions.filter(Boolean) || []
          this.chart.setOption({dataset})
        }
      })
    }
  },
  mounted() {
    this.$nextTick(this.initChart)
  }
}
</script>
<style scoped lang="scss">
.AiDvPlot {
  position: relative;
  height: 100%;

  :deep(.plotPicker) {
    position: absolute;
    right: 12px;
    top: -10px;
    z-index: 9;

    .el-select {
      .el-input__inner {
        background: #218ffd1a;
        border: 1px solid #1F66AD;
        color: #2FC5FF;
      }

      .el-input__suffix {
        color: #2FC5FF !important;
      }
    }
  }

  .plotChart {
    height: 100%;
  }
}
</style>
