<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-26 15:07:33
 * @LastEditTime: 2019-10-16 09:28:01
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="zte-echarts">
    <div v-if="title" class="title-wrapper">
      <h2>{{ title }}</h2>
      <div>
        <slot></slot>
      </div>
    </div>
    <chart
      ref="chart"
      autoresize
      class="chart"
      theme="ovilia-green"
      :options="chartOptions"
    />
  </div>
</template>

<script>
export default {
  props: {
    // 设置
    set: {
      type: Object,
      required: true,
    },
    // 数据
    data: {
      type: Array,
    },
    // 完整配置
    options: {
      type: Object,
      default: () => ({}),
    },
    // 横向图
    horizontal: Boolean,
    // 标题
    title: {
      type: String,
    },
    zoom: {
      type: Object,
    },
  },
  data() {
    return {
      chartOptions: {},
    };
  },
  created() {
    this.createOptions();
  },
  mounted() {
    this.createEvents();
  },
  watch: {
    data(val) {
      this.data = val;
      this.createOptions();
    },
    options: {
      deep: true,
      handler() {
        this.createOptions();
      },
    },
  },
  methods: {
    createOptions() {
      const { set, data, options } = this;

      // 初始化x轴
      const xAxis = {
        type: 'category',
        axisLine: { show: false },
        axisTick: {
          show: false,
        },
        data: data.map(row => row[set.xAxis]),
        ...(options.xAxis || {}),
      };

      // 初始化y轴
      const yAxis = options.yAxis || [
        {
          type: 'value',
        },
      ].concat(set.series.some(serie => serie.yAxisIndex) ? [{ type: 'value' }] : []); // 存在多轴情况

      // 初始化系列列表
      const series = options.series || set.series.map(serie => ({
        yAxisIndex: serie.yAxisIndex || 0,
        radius: serie.type === 'pie' && ['50%', '70%'],
        label: {
          normal: {
            show: true,
            position: 'top',
          },
        },
        data: data.map(row => row[serie.code]),
        ...serie,
      }));

      // 初始化图例
      const legend = {
        left: '2%',
        bottom: '2%',
        data: set.series.map(serie => serie.name),
        ...(options.legend || {}),
      };

      const chartOptions = {
        xAxis: this.horizontal ? yAxis : xAxis,
        yAxis: this.horizontal ? xAxis : yAxis,
        legend,
        series,
      };
      this.chartOptions = Object.assign({}, this.options, chartOptions);
    },
    createEvents() {
      const EVENTS = [
        'legendselectchanged',
        'legendselected',
        'legendunselected',
        'legendunscroll',
        'datazoom',
        'datarangeselected',
        'timelinechanged',
        'timelineplaychanged',
        'restore',
        'dataviewchanged',
        'magictypechanged',
        'geoselectchanged',
        'geoselected',
        'geounselected',
        'pieselectchanged',
        'pieselected',
        'pieunselected',
        'mapselectchanged',
        'mapselected',
        'mapunselected',
        'axisareaselected',
        'focusnodeadjacency',
        'unfocusnodeadjacency',
        'brush',
        'brushselected',
        'rendered',
        'finished',
        'click',
        'dblclick',
        'mouseover',
        'mouseout',
        'mousemove',
        'mousedown',
        'mouseup',
        'globalout',
        'contextmenu',
      ];
      EVENTS.forEach((event) => {
        this.$refs.chart.$on(event, (params) => {
          this.$emit(event, params);
        });
      });
    },
  },
};
</script>

<style lang="scss">
.zte-echarts {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  .title-wrapper {
    display: flex;
    flex: 0 0 36px;
    line-height: 36px;
    border-bottom: 1px solid #ebebeb;
    padding: 0 16px 0 16px;
    h2 {
      flex: 1;
      display: inline-block;
      font-size: 18px;
      color: #111;
      min-width: 120px;
      font-weight: 500;
    }
  }
  .chart {
    flex: 1 1 auto;
    width: 100%;
  }
  .tips {
    height: 36px;
    // background: #f99;
    display: flex;
    padding-left: 16px;
    .tips-item {
      .dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background: #f99;
        box-shadow: 0 0 2px #f99;
        margin: 0 8px 0 10px;
      }
      .text {
        font-size: 12px;
      }
    }
  }
}
</style>