/*
 * @Author: your name
 * @Date: 2021-11-25 10:09:40
 * @LastEditTime: 2021-12-21 14:02:30
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \sdk\page-sdk\src\render\chart.ts
 */
import BaseComponentRender from "../component/BaseComponentRender";
import { genStyleList } from "../common/util";
import { BaseChart, createChart } from "bi-sdk";
import { merge } from "lodash";
export default class Chart extends BaseComponentRender {
  public caseEl: BaseChart | undefined;
  private bindAttribute() {
    let attribute = this.$options.attribute || {};
    Object.keys(attribute).forEach((key) => {
      (this.$el as any)[key] = attribute[key];
    });
  }
  private bindStyle() {
    let { style = {}, visible } = this.$options;

    !style.width ? (style.width = "300px") : "";
    !style.height ? (style.height = "300px") : "";

    let cssText = genStyleList(style);

    if (visible === false) {
      cssText.push("display: none");
    }

    this.$el!.style.cssText = cssText.join(";");
    this.caseEl?.$chart.resize();
  }
  // 默认组件数据
  private getChartOptions(typeList: string | Array<string>, props = {}) {
    const dataList = {
      dimensions: ["product", "data1", "data2", "data3"],
      source: {
        product: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"],
        data1: [823, 235, 1042, 988, 500, 788, 655, 900],
        data2: [623, 135, 842, 788, 400, 588, 455, 700],
        data3: [523, 35, 742, 688, 300, 488, 355, 600]
      }
    };
    if (!Array.isArray(typeList)) {
      typeList = [typeList];
    }
    // 根据series数量设置每个系列的dataset
    let dimensions: any[] = [];
    let source = {};
    let dataset = {};
    let legend: any[] = [];
    let extend = ["title", "xAxis", "yAxis", "tooltip", "grid"];
    Object.keys(dataList.source).map((item, index) => {
      if (index < typeList.length + 1) {
        const dimensionsItem = dataList.dimensions[index] as any;
        const sourceItem = (dataList.source as any)[item];
        dimensions.push(dimensionsItem);
        (source as any)[item] = sourceItem;
        if (index > 0) {
          legend.push(dimensionsItem);
        }
      }
    });
    dataset = {
      dimensions,
      source
    };
    let seriesList: any[] = [];

    typeList.map((type, index) => {
      let obj = {
        type: type,
        label: {}
      };
      if (type === "gauge") {
        dataset = {
          dimensions: ["name"],
          source: [[70]]
        } as any;
      }
      if (type === "pie") {
        obj.label = {
          formatter: "{b}",
          color: "#333333"
        };
        extend = ["title", "tooltip", "grid"];
      }
      seriesList.push(obj);
    });

    const options = {
      title: {
        text: "图表",
        top: "0",
        left: "0",
        textStyle: {
          fontSize: 14
        }
      },
      legend: {
        data: legend
      },
      grid: {
        top: "15%"
      },
      series: seriesList
    };
    const config = { extend: extend };
    return { dataset, options, config };
  }
  /**
   * 渲染
   */
  protected render(): void {
    this.bindAttribute();
    this.bindStyle();
  }

  /**
   * 创建元素
   * @param callback
   */
  protected create(callback: (el: HTMLElement) => void): void {
    let { props } = this.$options;
    callback(document.createElement(props.tag || "div"));
  }
  protected mounted(): void {
    const { type, chart } = this.$options.attribute || {};
    const { dataset, options, config } = this.getChartOptions(type);
    this.caseEl = createChart(merge(options, chart || {}), config || {});

    this.caseEl.dataSet(dataset);
    this.caseEl.amount(this.$el); // 等同init
  }
}