<template>
  <div class="h-chart" style="height: 350px;"></div>
</template>
<script>
// APP出图模块, 多一个转字符方法
import echarts from "echarts";
import "zrender/lib/svg/svg";
import { setTimeout } from 'timers';
import myMixin from '../../mixin'

export default {
  name: "cube-echart",
  // componentName: "CubeEchart",
  mixins:[myMixin],
  data() {
    return { box: { myChartDom: null, event: null } };
  },
  watch: {
    dataBody() {
      if (this.dataBody.length > 0) {
        this.init();
      }
    }
  },
  mounted() {
    // setTimeout(() => {    //数据回来的太慢， 导致params = 默认值{}
      if (typeof this.proxy_params === 'string') {
        this.init();
      } else {
        console.log('不是字符串', this.proxy_params);
      }
    // }, 100)
  },
  methods: {
    init() {
      let setwidth = sessionStorage.getItem("setwidth");
      this.$el.style.width = setwidth + "px";

      let option = this.loads(this.proxy_params);
      const charts_type =
        option.series.length === 1 && option.series[0].type === "pie" ? "pie" : ""; //是否为饼图
      const original = this.dataHeaders.map((h, idx) => {
        // 合并数据
        return this.merge(
          option.original[idx] || {}, // 默认绑定
          {
            name: h,
            data: this.dataBody.map(i => ({ name: h, value: i[idx] }))
          }
        ); // 数据覆盖
      });
      option = this.loads(this.proxy_params, { original }); // 加载方法到对象, 并增加处理方法
      option.original = original;
      option = this.init_option(option, charts_type, original);
      this.reset(option);
    },
    init_option(option, charts_type, original) {
      let series = [];
      let xAxis = {};
      let legend = {};
      let yAxis = [];
      let tooltip = {};
      if (charts_type !== "pie") {
        // 坐标图
        series = option.original.filter(
          item => !(item.type === "custom" || item.type === "axis")
        );
        xAxis = { show: true, data: this.dataBody.map(row => row[0]) }; // 第一行作为x轴
        const legend_data = series.map(item => {
          return { name: item.name, icon: "" };
        });
        legend = { data: series.map(item => ({ name: item.name, icon: "" })) }; // 图例注入
        yAxis = option.yAxis.map(item => this.merge(item, { show: true }));
        tooltip = { trigger: "axis" };
      } else {
        // 饼图
        const pie_data = this.dataBody.map(item => ({
          name: item[0],
          value: item[1]
        }));
        series = [
          this.merge(option.series[0], { type: "pie", data: pie_data })
        ];
        xAxis = { show: false };
        legend = { data: pie_data };
        yAxis = option.yAxis.map(item => this.merge(item, { show: false }));
        tooltip = { trigger: "item" };
      }
      // // 更新进入
      // console.log(series);
      this.merge(option, {
        // 更新数据
        series,
        xAxis, // 配置, 数据系列, 轴选项
        legend,
        yAxis,
        tooltip
      });
      return option;
    },
    loads(string, _option) {
      return JSON.parse(string, function (k, v) {
        if ([null, undefined].indexOf(v) === -1) {
          if (v.indexOf && v.indexOf("function") > -1) {
            if (_option) {
              return eval(`(${v})`);
            }
          }
          return v;
        }
      });
    },
    merge_object(state, value, propName, ignoreNull) {
      if (
        Object.prototype.toString.call(value) === "[object Object]" &&
        (propName == null || state.hasOwnProperty(propName))
      ) {
        const o = propName == null ? state : state[propName];
        for (var prop in value) {
          this.merge_object(o, value[prop], prop, ignoreNull);
        }
        return;
      }
      if (!ignoreNull || value !== null) this.$set(state, propName, value);
    },

    merge() {
      // 合并多个对象(数组)
      const default_object = arguments[0]; // 默认对象
      const object_list = [];
      for (const index in arguments) {
        if (index !== "0") {
          object_list.push(arguments[index]);
        }
      }

      object_list.forEach(item => {
        this.merge_object(default_object, item);
      });
      return default_object;
    },
    reset(option) {
      // console.log("kaishi ", option.series);
      if (this.box.myChartDom) this.box.myChartDom.dispose();
      this.box.myChartDom = echarts.init(this.$el);
      this.box.myChartDom.resize(); //暂时
      this.box.myChartDom.setOption(option);
    }
  }
};
</script>


