import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CommomService {

  constructor() { }

  //根据窗口大小设置图例的大小
  setEchartLegendSizeByWindows() {
    let width = document.body.clientWidth;
    let legendSize = [25, 14, 10]; //init
    /* 
      说明legendSize是一个长度为3的数组，其中index分别代表
      index=0  itemWidth  //图例标记的图形宽度。
      index=1  itemHeight  //图例标记的图形高度。
      index=2  itemGap  //图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
    */

    if (width <= 768) {
      legendSize = [4, 6, 6];
    } else if (width > 768 && width <= 992) {
      legendSize = [7, 7, 7];
    } else if (width > 992 && width <= 1200) {
      legendSize = [10, 10, 10];
    } else if (width > 1200 && width <= 1920) {
      legendSize = [12, 12, 10];
    } else if (width > 1920) {
      legendSize = [14, 14, 14];
    }
    return legendSize;
  }

  // 根据窗口大小设置visualmap(连续型 纵向)大小
  setEchartVisualmapVerticalSizeByWindows(): number[] {
    let width = document.body.clientWidth;
    let visualmapSize = [20, 140];
    /* 
      visualmapSize[0] : itemWidth
      visualmapSize[1] : itemHeight
    */
    if (width <= 768) {
      visualmapSize = [10, 70];
    } else if (width > 768 && width <= 992) {
      visualmapSize = [10, 70];
    } else if (width > 992 && width <= 1200) {
      visualmapSize = [20, 90];
    } else if (width > 1200 && width < 1920) {
      visualmapSize = [20, 100];
    } else if (width >= 1920) {
      visualmapSize = [20, 140];
    }
    return visualmapSize;
  }
  // 根据窗口大小判断显示 radio 或者 select
  changeType(): string {
    let width = document.body.clientWidth;
    let radioOrSelect = "0";

    if (width <= 768) {
      radioOrSelect = "0";
    } else if (width > 768 && width <= 992) {
      radioOrSelect = "0";
    } else if (width > 992 && width <= 1200) {
      radioOrSelect = "1";
    } else if (width > 1200 && width <= 1920) {
      radioOrSelect = "1";
    } else if (width > 2000) {
      radioOrSelect = "1";
    }
    return radioOrSelect;
  }

  // 根据窗口大小调整legend位置(简报用)
  changeLegendPosition() {
    let width = document.body.clientWidth;
    if (width <= 1748) {
      return "v";
    } else return "h";
  }
  // 根据窗口大小判断显示 字体大小、图的边距、工具栏图标大小
  changeFontSize() {
    let width = document.body.clientWidth;
    let echartsStyle = {
      fontSize: 12,
      yAxisLabelFontSize: 11,
      toolboxSize: 14,
      interval: {
        left: "40",
        right: "60",
        bottom: "30",
        top: "30",
        containLabel: true,
      },
      pyramidGrid: {
        left: "40",
        right: "60",
        bottom: "50",
        top: "30",
        containLabel: true,
      }
    };

    if (width <= 768) {
      echartsStyle.yAxisLabelFontSize = 5
      echartsStyle.fontSize = 6;
      echartsStyle.toolboxSize = 10;
      echartsStyle.interval = {
        left: "30",
        right: "50",
        bottom: "30",
        top: "30",
        containLabel: true,
      };
      echartsStyle.pyramidGrid = {
        left: "30",
        right: "50",
        bottom: "50",
        top: "30",
        containLabel: true,
      }
    } else if (width > 768 && width <= 992) {
      echartsStyle.yAxisLabelFontSize = 7;
      echartsStyle.fontSize = 8;
      echartsStyle.toolboxSize = 11;
      echartsStyle.interval = {
        left: "30",
        right: "50",
        bottom: "30",
        top: "30",
        containLabel: true,
      };
      echartsStyle.pyramidGrid = {
        left: "30",
        right: "50",
        bottom: "50",
        top: "30",
        containLabel: true,
      }
    } else if (width > 992 && width <= 1200) {
      echartsStyle.yAxisLabelFontSize = 9;
      echartsStyle.fontSize = 10;
      echartsStyle.toolboxSize = 12;
      echartsStyle.interval = {
        left: "30",
        right: "50",
        bottom: "30",
        top: "30",
        containLabel: true,
      };
      echartsStyle.pyramidGrid = {
        left: "30",
        right: "50",
        bottom: "50",
        top: "30",
        containLabel: true,
      }
    } else if (width > 1200 && width <= 1920) {
      echartsStyle.yAxisLabelFontSize = 11;
      echartsStyle.fontSize = 12;
      echartsStyle.toolboxSize = 14;
      echartsStyle.interval = {
        left: "30",
        right: "60",
        bottom: "30",
        top: "30",
        containLabel: true,
      };
      echartsStyle.pyramidGrid = {
        left: "30",
        right: "50",
        bottom: "50",
        top: "30",
        containLabel: true,
      }
    } else if (width > 1920) {
      echartsStyle.yAxisLabelFontSize = 11;
      echartsStyle.fontSize = 12;
      echartsStyle.toolboxSize = 14;
      echartsStyle.interval = {
        left: "40",
        right: "60",
        bottom: "30",
        top: "30",
        containLabel: true,
      };
      echartsStyle.pyramidGrid = {
        left: "30",
        right: "50",
        bottom: "50",
        top: "30",
        containLabel: true,
      }
    }
    return echartsStyle;
  }

  //根据窗口大小设置legend图例和toolbox的大小
  setLegendAndToolboxByWindows() {
    let width = document.body.clientWidth;
    let resSize = {
      legendSize: 10,//init
      legendfontSize: 12, //init
      toolboxSize: 12, //init
      tooltipSize: 12, //init
    }

    if (width <= 768) {
      resSize.legendSize = 6;
      resSize.toolboxSize = 6;
      resSize.legendfontSize = 6
      resSize.tooltipSize = 6
    } else if (width > 768 && width <= 992) {
      resSize.legendSize = 7;
      resSize.toolboxSize = 7;
      resSize.legendfontSize = 7
      resSize.tooltipSize = 7
    } else if (width > 992 && width <= 1200) {
      resSize.legendSize = 8;
      resSize.toolboxSize = 10;
      resSize.legendfontSize = 10
      resSize.tooltipSize = 10
    } else if (width > 1200 && width <= 1920) {
      resSize.legendSize = 10;
      resSize.toolboxSize = 12;
      resSize.legendfontSize = 12
      resSize.tooltipSize = 12
    } else if (width > 1920) {
      resSize.legendSize = 12;
      resSize.toolboxSize = 14;
      resSize.legendfontSize = 14
      resSize.tooltipSize = 14
    }
    return resSize;
  }
}