<template>
  <component
    :is="type"
    class="en-charts"
    :stack="stack"
    :store="store"
    @change="change"
  >
  </component>
</template>
<script>
import eCharts from "echarts";
import Store from "./model";
import barX from "./bar/bar-x";
import barY from "./bar/bar-y";
import barXLine from "./bar/bar-x-line";
import barXStack from "./bar/bar-x-stack";
import barXPercent from "./bar/bar-x-percent";
import barYLine from "./bar/bar-y-line";
import barYPercent from "./bar/bar-y-percent";
import barYStack from "./bar/bar-y-stack";
import lineX from "./line/line-x";
import lineXStack from "./line/line-x-stack";
import lineY from "./line/line-y";
import lineYStack from "./line/line-y-stack";
import pie from "./pie/pie";
import pieRing from "./pie/pie-ring";
import pieRose from "./pie/pie-rose";

export default {
  name: "EnCharts",
  components: {
    barX,
    barY,
    barXLine,
    barXStack,
    barXPercent,
    barYLine,
    barYPercent,
    barYStack,
    lineX,
    lineXStack,
    lineY,
    lineYStack,
    pie,
    pieRing,
    pieRose
  },
  props: {
    // 标题
    title: {
      type: String,
      default: ""
    },
    // x轴数据源
    xData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // y轴数据源
    yData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 柱状折线图数据承载字段
    lineData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 图表的类型
    chartsType: {
      type: String,
      default: ""
    },
    // 文本的字段名称
    dataLabel: {
      type: String,
      default: ""
    },
    // 数值的字段名称
    dataKey: {
      type: String,
      default: ""
    },
    // 图表颜色组
    colorList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 是否需要显示图例
    showLegend: {
      type: [Boolean, String],
      default: true,
      validator: function(value) {
        return value && value !== "false";
      }
    },
    // 指示器类型
    tipsType: {
      type: String,
      default: "shadow"
    },
    // 指示器触发范围
    trigger: {
      type: String,
      default: "item"
    },
    // 堆叠文本
    stack: {
      type: String,
      default: "堆叠图"
    },
    // 第一坐标系文本
    leftLabel: {
      type: String,
      default: ""
    },
    // 第二坐标系文本
    rightLabel: {
      type: String,
      default: ""
    },
    // 图标边距
    gridList: {
      type: String,
      default: ""
    },
    // 视图区域的类名
    scrollId: {
      type: String,
      default: ""
    },
    // X轴名称样式
    axisXLabelStyle: {
      type: Object,
      default: () => {
        return {
          color: "#636C78",
          interval: 0, // 轴信息全部显示
          rotate: 0 // 度角倾斜显示
        };
      }
    },
    // Y轴名称样式
    axisYLabelStyle: {
      type: Object,
      default: () => {
        return {
          color: "#636C78",
          interval: 0, // 轴信息全部显示
          rotate: 0 // 度角倾斜显示
        };
      }
    },
    // X轴线样式
    axisXLine: {
      type: Object,
      default: () => {
        return {
          show: true,
          lineStyle: {
            color: "#E8ECF2",
            width: 1
          }
        };
      }
    },
    // 与X轴平行的刻度线样式
    splitXLine: {
      type: Object,
      default: () => {
        return {
          show: true,
          lineStyle: {
            color: "#E8ECF2",
            width: 1
          }
        };
      }
    },
    // Y轴线样式
    axisYLine: {
      type: Object,
      default: () => {
        return {
          show: true,
          lineStyle: {
            color: "#E8ECF2",
            width: 1
          }
        };
      }
    },
    // 与Y轴平行的刻度线样式
    splitYLine: {
      type: Object,
      default: () => {
        return {
          show: false,
          lineStyle: {
            color: "#E8ECF2",
            width: 1
          }
        };
      }
    },
    // 坐标轴信息设置
    axisTick: {
      type: Object,
      default: () => {
        return {
          show: true,
          interval: 0 // 轴信息全部显示
        };
      }
    },
    // x坐标轴刻度
    axisTickX: {
      type: Boolean,
      default: false
    },
    // y坐标轴刻度
    axisTickY: {
      type: Boolean,
      default: false
    },
    // 柱子样式
    barStyle: {
      color: "",
      barBorderRadius: [5, 5, 0, 0]
    },
    // 百分比图是否显示原数值
    showOriginalValue: {
      type: Boolean,
      default: false
    },
    // 饼图/环图/玫瑰图连接线外是否显示数值
    needShowPieValue: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      store: {},
      type: null
    };
  },
  mounted() {
    window.$charts = eCharts;
    this.$nextTick(() => {
      this.initStoreInfo();
    });
  },
  methods: {
    change(val) {
      this.$emit("chartsItemClick", val);
    },
    /**
     * @description 初始化Store信息
     */
    initStoreInfo() {
      this.store = new Store();
      this.checkChartsType();
    },
    /**
     * @description 初始化图表的部分配置信息
     */
    initChartsConfigInfo(chartsType) {
      this.store.setDataLabel(this.dataLabel);
      this.store.setDataKey(this.dataKey);
      this.store.setLegendStatus(this.showLegend);
      this.store.setStackLabel(this.stack);
      this.store.setColorList(this.colorList);
      this.store.setAxisLabel(this.leftLabel, this.rightLabel);
      this.store.setXData(this.xData);
      this.store.setYData(this.yData);
      this.store.setLineData(this.lineData);
      this.store.setTitleInfo(this.title);
      this.store.setAxisXLabelStyle(this.axisXLabelStyle);
      this.store.setAxisYLabelStyle(this.axisYLabelStyle);
      this.store.setAxisXLineStyle(this.axisXLine, this.splitXLine);
      this.store.setAxisYLineStyle(this.axisYLine, this.splitYLine);
      this.store.setAxisTick(this.axisTickX, this.axisTickY);
      this.store.initChartsConfig(chartsType);
      this.store.setToolTip(this.tipsType, this.trigger);
      this.store.setBarStyle(this.barStyle);
      this.store.setOriginalShow(this.showOriginalValue);
      this.store.setNeedShowPieLineVue(this.needShowPieValue);
      if (this.scrollId && this.scrollId !== "") {
        this.store.setScrollId(this.scrollId);
      }
      if (this.gridList !== "") {
        this.store.setGridConfig(this.gridList);
      }
    },
    /**
     * @description 检查传递的图表类型是否支持显示
     */
    checkChartsType() {
      const chartsArr = [
        "barX",
        "barY",
        "barXLine",
        "barXStack",
        "barXPercent",
        "barYLine",
        "barYPercent",
        "barYStack",
        "lineX",
        "lineXStack",
        "lineY",
        "lineYStack",
        "pie",
        "pieRing",
        "pieRose"
      ];
      let flag = false;
      let str = "";
      chartsArr.forEach(item => {
        str = str + item + "、";
        if (this.chartsType === item) {
          flag = true;
        }
      });
      if (!flag) {
        console.error(
          "%c 目前不支持此图表类型:" + this.chartsType,
          "color:#ff0000;font-size:24px;"
        );
        console.log(
          "%c 来自Louis的贴心提示，仅支持：" + str + "等类型",
          "color:#3398DB;font-size: 20px;"
        );
        console.log(
          "%c *****************Split Line*****************************",
          "color:#ff0000;font-size:12px;"
        );
      } else {
        this.type = this.chartsType;
        this.initChartsConfigInfo(this.type);
      }
    }
  },
  watch: {
    chartsType(nVal) {
      this.type = nVal;
      this.initStoreInfo();
    },
    xData() {
      this.initStoreInfo();
    },
    yData() {
      this.initStoreInfo();
    },
    lineData() {
      this.initStoreInfo();
    },
    title() {
      this.initStoreInfo();
    }
  }
};
</script>

<style lang="scss">
  .en-charts {
    width: 600px;
    height: 400px;
  }
</style>
