import { heatmapChart, CATEGORIES } from '../../configuration/constants'
import { throttle } from '../../utils'

export default {

  // 组件名称
  name: heatmapChart,

  // 前面板html模板
  viewTemplate() {
    return `
      <div data-gjs-type="${heatmapChart}" class="${heatmapChart}"></div>
    `
  },
  // 前面板html样式
  viewStyle() {
    return `
      <style>
        .${heatmapChart} {
          position: absolute;
          border-radius: 5px;
          border-style: solid;
          border-width: 1px;
          border-color: transparent;
          padding: 10px;
          width: 500px;
          height: 300px;
        }
      </style>
    `
  },

  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      label:  `
      <svg class="gjs-block-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" ><path d="M192 832V128H149.333333v746.666667h746.666667v-42.666667z"  p-id="3264"></path><path d="M298.666667 234.666667m-42.666667 0a42.666667 42.666667 0 1 0 85.333333 0 42.666667 42.666667 0 1 0-85.333333 0Z"  p-id="3265"></path><path d="M682.666667 234.666667m-42.666667 0a42.666667 42.666667 0 1 0 85.333333 0 42.666667 42.666667 0 1 0-85.333333 0Z"  p-id="3266"></path><path d="M832 234.666667m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z"  p-id="3267"></path><path d="M490.666667 234.666667m-85.333334 0a85.333333 85.333333 0 1 0 170.666667 0 85.333333 85.333333 0 1 0-170.666667 0Z"  p-id="3268"></path><path d="M298.666667 704m-42.666667 0a42.666667 42.666667 0 1 0 85.333333 0 42.666667 42.666667 0 1 0-85.333333 0Z"  p-id="3269"></path><path d="M640 704m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z"  p-id="3270"></path><path d="M469.333333 704m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z"  p-id="3271"></path><path d="M810.666667 704m-85.333334 0a85.333333 85.333333 0 1 0 170.666667 0 85.333333 85.333333 0 1 0-170.666667 0Z"  p-id="3272"></path><path d="M298.666667 469.333333m-42.666667 0a42.666667 42.666667 0 1 0 85.333333 0 42.666667 42.666667 0 1 0-85.333333 0Z"  p-id="3273"></path><path d="M832 469.333333m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z"  p-id="3274"></path><path d="M682.666667 469.333333m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z"   p-id="3275"></path></svg>
        <div class="gjs-block-label">热力图<br/>直角坐标系</div>
      `,
    };
  },

  // 后面板显示属性配置
  spOptions() {
    return {
      label: '热力图',
      icon: 'globe',
      docUrl: 'https://xuelangyun.yuque.com/docs/share/761969da-7a72-43a4-bcae-a63924e20533?# 《热力图直角坐标系》',
      author: '秋水',
      email: 'qiushui.smy@xuelangyun.com',
      inPorts: [
        {
          uuid: 'in1',
          subType: 'json',
          description: {
            zh_CN: '输入1'
          }
        }
      ],
      outPorts: [
        {
          uuid: 'out1',
          subType: 'json',
          description: {
            zh_CN: '选中波形'
          }
        }
      ]
    }
  },

  // 组件属性
  componentOptions() {
    return {
      name: heatmapChart,
      resizable: true,
      dmode: 'absolute',
      droppable: false,
      traits: [
        {
          type: 'color',
          name: 'fontColor',
          label: '字体颜色',
          changeProp: 1,
        }, {
          type: 'number',
          name: 'fontSize',
          label: '字号',
          changeProp: 1,
          min: 10,
          step: 1
        }, {
          name: 'colors',
          label: '图表色系',
          changeProp: 1,
        }, {
          name: 'gridPadding',
          label: '容器边距(左,上,右,下)',
          changeProp: 1
        }, {
          name: 'xAxisName',
          label: 'X轴名称',
          changeProp: 1
        }, {
          name: 'yAxisName',
          label: 'Y轴名称',
          changeProp: 1
        }, {
          name: 'xAxisType',
          label: 'X轴类型',
          changeProp: 1,
          type: 'select',
          options: ['category', 'value', 'time']
        }, {
          name: 'yAxisType',
          label: 'Y轴类型',
          changeProp: 1,
          type: 'select',
          options: ['category', 'value', 'time']
        }, {
          name: 'axisColor',
          label: '坐标轴颜色',
          changeProp: 1,
          type: 'color'
        }, {
          name: 'xSplitArea',
          label: 'X轴区域分隔',
          changeProp: 1,
          type: 'checkbox'
        }, {
          name: 'ySplitArea',
          label: 'Y轴区域分隔',
          changeProp: 1,
          type: 'checkbox'
        }, {
          name: 'splitAreaColor',
          label: '分隔区颜色',
          changeProp: 1,
          type: 'color'
        }, {
          name: 'splitAreaOpacity',
          label: '分隔区透明度',
          changeProp: 1,
          type: 'number',
          min: 0,
          max: 100,
          step: 1
        }, {
          name: 'xLabelRotate',
          label: 'X轴标签旋转',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'xDimension',
          label: 'X轴维度',
          changeProp: 1,
          type: 'number',
          min: 0,
          step: 1,
        }, {
          name: 'yDimension',
          label: 'Y轴维度',
          changeProp: 1,
          type: 'number',
          min: 0,
          step: 1,
        }, {
          name: 'valueDimension',
          label: '值维度',
          changeProp: 1,
          type: 'number',
          min: 0,
          step: 1,
        }, {
          name: 'xMin',
          label: 'X轴最小值',
          changeProp: 1,
          type: 'checkbox',
        }, {
          name: 'xMax',
          label: 'X轴最大值',
          changeProp: 1,
          type: 'checkbox',
        }, {
          name: 'yMin',
          label: 'Y轴最小值',
          changeProp: 1,
          type: 'checkbox',
        }, {
          name: 'yMax',
          label: 'Y轴最大值',
          changeProp: 1,
          type: 'checkbox',
        }, {
          name: 'showLabel',
          label: '显示标签',
          type: 'checkbox',
          changeProp: 1
        }, {
          name: 'labelColor',
          label: '标签颜色',
          type: 'color',
          changeProp: 1
        }, {
          name: 'visualPosition',
          label: '视觉映射',
          changeProp: 1,
          type: 'key-value',
          maxLength: 2
        }, {
          name: 'visual_orient',
          label: '视觉映射朝向',
          type: 'select',
          changeProp: 1,
          options: [{id: 'horizontal', name: '水平'}, {id: 'vertical', name: '垂直'}]
        }, {
          name: 'progressive',
          label: '视觉映射动画时长',
          type: 'number',
          changeProp: 1
        }, {
          name: 'colorAlpha',
          label: '颜色透明度',
          changeProp: 1,
        }, {
          name: 'colorLightness',
          label: '颜色明暗度',
          changeProp: 1,
        }, {
          name: 'colorSaturation',
          label: '颜色饱和度',
          changeProp: 1,
        }, {
          name: 'colorHue',
          label: '颜色色调',
          changeProp: 1,
        }, {
          name: 'inRangeColor',
          label: '范围内颜色',
          changeProp: 1
        }, {
          name: 'outRangeColor',
          label: '范围外颜色',
          changeProp: 1,
          type: 'color'
        }, {
          name: 'zoomStart',
          label: '放大镜开始(%)',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'zoomEnd',
          label: '放大镜结束(%)',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'csv',
          label: '示例数据',
          changeProp: 1,
          type: 'csvDownload',
          preFileName: '热力图直角坐标系',
          datas: [
            ['day', 'hour', 'Punch Card'],
            ['Saturday', '12a', 5],
            ['Saturday', '1a', 1],
            ['Saturday', '11a', 2],
            ['Saturday', '12p', 4],
            ['Saturday', '1p', 1],
            ['Saturday', '2p', 1],
            ['Saturday', '3p', 3],
            ['Saturday', '4p', 4],
            ['Saturday', '5p', 6],
            ['Saturday', '6p', 4],
            ['Saturday', '7p', 4],
            ['Saturday', '8p', 3],
            ['Saturday', '9p', 3],
            ['Saturday', '10p', 2],
            ['Saturday', '11p', 5],
            ['Friday', '12a', 7],
            ['Friday', '10a', 5],
            ['Friday', '11a', 2],
            ['Friday', '12p', 2],
            ['Friday', '1p', 6],
            ['Friday', '2p', 9],
            ['Friday', '3p', 11],
            ['Friday', '4p', 6],
            ['Friday', '5p', 7],
            ['Friday', '6p', 8],
            ['Friday', '7p', 12],
            ['Friday', '8p', 5],
            ['Friday', '9p', 5],
            ['Friday', '10p', 7],
            ['Friday', '11p', 2],
            ['Thursday', '12a', 1],
            ['Thursday', '1a', 1],
            ['Thursday', '10a', 3],
            ['Thursday', '11a', 2],
            ['Thursday', '12p', 1],
            ['Thursday', '1p', 9],
            ['Thursday', '2p', 8],
            ['Thursday', '3p', 10],
            ['Thursday', '4p', 6],
            ['Thursday', '5p', 5],
            ['Thursday', '6p', 5],
            ['Thursday', '7p', 5],
            ['Thursday', '8p', 7],
            ['Thursday', '9p', 4],
            ['Thursday', '10p', 2],
            ['Thursday', '11p', 4],
            ['Wednesday', '12a', 7],
            ['Wednesday', '1a', 3],
            ['Wednesday', '8a', 1],
            ['Wednesday', '10a', 5],
            ['Wednesday', '11a', 4],
            ['Wednesday', '12p', 7],
            ['Wednesday', '1p', 14],
            ['Wednesday', '2p', 13],
            ['Wednesday', '3p', 12],
            ['Wednesday', '4p', 9],
            ['Wednesday', '5p', 5],
            ['Wednesday', '6p', 5],
            ['Wednesday', '7p', 10],
            ['Wednesday', '8p', 6],
            ['Wednesday', '9p', 4],
            ['Wednesday', '10p', 4],
            ['Wednesday', '11p', 1],
            ['Tuesday', '12a', 1],
            ['Tuesday', '1a', 3],
            ['Tuesday', '5a', 1],
            ['Tuesday', '9a', 2],
            ['Tuesday', '10a', 4],
            ['Tuesday', '11a', 4],
            ['Tuesday', '12p', 2],
            ['Tuesday', '1p', 4],
            ['Tuesday', '2p', 4],
            ['Tuesday', '3p', 14],
            ['Tuesday', '4p', 12],
            ['Tuesday', '5p', 1],
            ['Tuesday', '6p', 8],
            ['Tuesday', '7p', 5],
            ['Tuesday', '8p', 3],
            ['Tuesday', '9p', 7],
            ['Tuesday', '10p', 3],
            ['Monday', '12a', 2],
            ['Monday', '1a', 1],
            ['Monday', '3a', 3],
            ['Monday', '8a', 2],
            ['Monday', '10a', 4],
            ['Monday', '11a', 1],
            ['Monday', '12p', 5],
            ['Monday', '1p', 10],
            ['Monday', '2p', 5],
            ['Monday', '3p', 7],
            ['Monday', '4p', 11],
            ['Monday', '5p', 6],
            ['Monday', '7p', 5],
            ['Monday', '8p', 3],
            ['Monday', '9p', 4],
            ['Monday', '10p', 2],
            ['Sunday', '12a', 1],
            ['Sunday', '10a', 1],
            ['Sunday', '12p', 2],
            ['Sunday', '1p', 1],
            ['Sunday', '2p', 3],
            ['Sunday', '3p', 4],
            ['Sunday', '8p', 1],
            ['Sunday', '9p', 2],
            ['Sunday', '10p', 2],
            ['Sunday', '11p', 6]
          ]
        }, {
          name: 'defaultData',
          changeProp: 1,
          type: 'hide'
        }
      ],
      defaultData:JSON.stringify([
        ['day', 'hour', 'Punch Card'],
        ['Saturday', '12a', 5],
        ['Saturday', '1a', -1],
        ['Saturday', '11a', 2],
        ['Saturday', '12p', 4],
        ['Saturday', '1p', -1],
        ['Saturday', '2p', 1],
        ['Saturday', '3p', 3],
        ['Saturday', '4p', 4],
        ['Saturday', '5p', 6],
        ['Saturday', '6p', 4],
        ['Saturday', '7p', 4],
        ['Saturday', '8p', 3],
        ['Saturday', '9p', 3],
        ['Saturday', '10p', 2],
        ['Saturday', '11p', 5],
        ['Friday', '12a', 7],
        ['Friday', '10a', 5],
        ['Friday', '11a', 2],
        ['Friday', '12p', 2],
        ['Friday', '1p', 6],
        ['Friday', '2p', 9],
        ['Friday', '3p', 11],
        ['Friday', '4p', 6],
        ['Friday', '5p', 7],
        ['Friday', '6p', 8],
        ['Friday', '7p', 12],
        ['Friday', '8p', 5],
        ['Friday', '9p', 5],
        ['Friday', '10p', 7],
        ['Friday', '11p', 2],
        ['Thursday', '12a', 1],
        ['Thursday', '1a', 1],
        ['Thursday', '10a', 3],
        ['Thursday', '11a', 2],
        ['Thursday', '12p', 1],
        ['Thursday', '1p', 9],
        ['Thursday', '2p', 8],
        ['Thursday', '3p', 10],
        ['Thursday', '4p', 6],
        ['Thursday', '5p', 5],
        ['Thursday', '6p', 5],
        ['Thursday', '7p', 5],
        ['Thursday', '8p', 7],
        ['Thursday', '9p', 4],
        ['Thursday', '10p', 2],
        ['Thursday', '11p', 4],
        ['Wednesday', '12a', 7],
        ['Wednesday', '1a', 3],
        ['Wednesday', '8a', 1],
        ['Wednesday', '10a', 5],
        ['Wednesday', '11a', 4],
        ['Wednesday', '12p', 7],
        ['Wednesday', '1p', 14],
        ['Wednesday', '2p', 13],
        ['Wednesday', '3p', 12],
        ['Wednesday', '4p', 9],
        ['Wednesday', '5p', 5],
        ['Wednesday', '6p', 5],
        ['Wednesday', '7p', 10],
        ['Wednesday', '8p', 6],
        ['Wednesday', '9p', 4],
        ['Wednesday', '10p', 4],
        ['Wednesday', '11p', 1],
        ['Tuesday', '12a', 1],
        ['Tuesday', '1a', 3],
        ['Tuesday', '5a', 1],
        ['Tuesday', '9a', 2],
        ['Tuesday', '10a', 4],
        ['Tuesday', '11a', 4],
        ['Tuesday', '12p', 2],
        ['Tuesday', '1p', 4],
        ['Tuesday', '2p', 4],
        ['Tuesday', '3p', 14],
        ['Tuesday', '4p', 12],
        ['Tuesday', '5p', 1],
        ['Tuesday', '6p', 8],
        ['Tuesday', '7p', 5],
        ['Tuesday', '8p', 3],
        ['Tuesday', '9p', 7],
        ['Tuesday', '10p', 3],
        ['Monday', '12a', 2],
        ['Monday', '1a', 1],
        ['Monday', '3a', 3],
        ['Monday', '8a', 2],
        ['Monday', '10a', 4],
        ['Monday', '11a', 1],
        ['Monday', '12p', 5],
        ['Monday', '1p', 10],
        ['Monday', '2p', 5],
        ['Monday', '3p', 7],
        ['Monday', '4p', 11],
        ['Monday', '5p', 6],
        ['Monday', '7p', 5],
        ['Monday', '8p', 3],
        ['Monday', '9p', 4],
        ['Monday', '10p', 2],
        ['Sunday', '12a', 1],
        ['Sunday', '10a', 1],
        ['Sunday', '12p', 2],
        ['Sunday', '1p', 1],
        ['Sunday', '2p', 3],
        ['Sunday', '3p', 4],
        ['Sunday', '8p', 1],
        ['Sunday', '9p', 2],
        ['Sunday', '10p', 2],
        ['Sunday', '11p', 6]
      ]).replace(/\"/g, "\\\""),
      'fontSize': 12,
      'fontColor': '#333',
      'gridPadding': '10,40,6%,60',
      'xAxisName': null,
      'yAxisName': null,
      'xAxisType': 'category',
      'yAxisType': 'category',
      'axisColor': '#333333',
      'xSplitArea': true,
      'ySplitArea': true,
      'splitAreaColor': null,
      'splitAreaOpacity': 100,
      'showLabel': true,
      'labelColor': '#fff',
      'xLabelRotate': null,
      'xDimension': 1,
      'yDimension': 0,
      'valueDimension': 2,
      'visualPosition': "left: center, top: bottom",
      'visual_orient': 'horizontal',
      'colorAlpha': '0, 1',
      'colorLightness': null,
      'colorSaturation': null,
      'colorHue': null,
      'inRangeColor': '#0084ff',
      'outRangeColor': 'rgba(0,0,0,0.2)',
      'zoomStart': -1,
      'zoomEnd': 100,
      'progressive': 1000
    }
  },
  
  onModelScript() {
    const fontColor = '{[ fontColor ]}';
    const fontSize = '{[ fontSize ]}';
    let colors = '{[ colors ]}';
    const showLabel = Boolean('{[ showLabel ]}');
    const labelColor = '{[ labelColor ]}';
    const xAxisName = '{[ xAxisName ]}';
    const yAxisName = '{[ yAxisName ]}';
    const xAxisType = '{[ xAxisType ]}';
    const yAxisType = '{[ yAxisType ]}';
    const axisColor = '{[ axisColor ]}';
    const xSplitArea = Boolean('{[ xSplitArea ]}');
    const ySplitArea = Boolean('{[ ySplitArea ]}');
    let splitAreaColor = '{[ splitAreaColor ]}';
    let splitAreaOpacity = Number('{[ splitAreaOpacity ]}');
    let gridPadding = '{[ gridPadding ]}';
    const xLabelRotate = '{[ xLabelRotate ]}';
    const xMin = '{[ xMin ]}';
    const xMax = '{[ xMax ]}';
    const yMin = '{[ yMin ]}';
    const yMax = '{[ yMax ]}';
    const xDimension = Number('{[ xDimension ]}');
    const yDimension = Number('{[ yDimension ]}');
    const valueDimension = Number('{[ valueDimension ]}');
    const progressive = Number('{[ progressive ]}');
    let visualPosition = ('{[ visualPosition ]}').toString();
    const visual_orient = ('{[ visual_orient ]}').toString();
    const colorAlpha = '{[ colorAlpha ]}';
    const colorLightness = '{[ colorLightness ]}';
    const colorSaturation = '{[ colorSaturation ]}';
    const colorHue = '{[ colorHue ]}';
    const inRangeColor = '{[ inRangeColor ]}';
    const outRangeColor = '{[ outRangeColor ]}';
    const zoomStart = Number('{[ zoomStart ]}');
    const zoomEnd = Number('{[ zoomEnd ]}');
    const defaultData = JSON.parse('{[ defaultData ]}'.replace(/\\\"/g, "\""));
    const eventName = `call-` + this.getAttribute('id');
    
    if (colors.indexOf(',') > -1) {
      colors = colors.split(',').map(item => item.trim())
    } else if (Boolean(colors)) {
      colors = [colors]
    }
    
    const transferColorToRgba = function (color, alpha=1) {
      if (typeof color !== 'string' && !(color instanceof String)) return console.error("请输入16进制字符串形式的颜色值");
      color = color.charAt(0) === '#' ? color.substring(1) : color;
      if (color.length !== 6 && color.length !== 3) return console.error("请输入正确的颜色值")
      if (color.length === 3) {
          color = color.replace(/(\w)(\w)(\w)/, '$1$1$2$2$3$3')
      }
      var reg = /\w{2}/g;
      var colors = color.match(reg);
      for (var i = 0; i < colors.length; i++) {
          colors[i] = parseInt(colors[i], 16).toString();
      }
      return 'rgba(' + colors.join() + ',' + alpha + ')';
    }

    const grid = {
      containLabel: true
    };
    if (gridPadding.indexOf(',') > -1) {
      gridPadding = gridPadding.split(',').map(item => item.trim());
      grid.left = gridPadding[0];
      grid.top = gridPadding[1];
      grid.right = gridPadding[2] || gridPadding[0];
      grid.bottom = gridPadding[3] || gridPadding[1];
    } else if (Boolean(gridPadding)) {
      grid.left = gridPadding;
      grid.top = gridPadding;
      grid.right = gridPadding;
      grid.bottom = gridPadding;
    }

    const xAxis = {
      type: xAxisType,
      name: xAxisName,
      scale: xAxisType == 'value',
      splitArea: {
        show: xSplitArea,
        areaStyle: {
          opacity: splitAreaOpacity ? splitAreaOpacity/100 : 0
        }
      },
      axisLine: {
        lineStyle: {
          color: axisColor
        }
      },
      axisLabel: {
        color: fontColor,
        fontSize: fontSize,
        rotate: xLabelRotate,
      }
    };
    if (Boolean(xMin)) xAxis.min = 'dataMin';
    if (Boolean(xMax)) xAxis.max = 'dataMax';
    const yAxis = {
      type: yAxisType,
      name: yAxisName,
      scale: yAxisType == 'value',
      splitArea: {
        show: ySplitArea,
        areaStyle: {
          opacity: splitAreaOpacity ? splitAreaOpacity/100 : 0
        }
      },
      axisLine: {
        lineStyle: {
          color: axisColor
        }
      },
      axisLabel: {
        color: fontColor,
        fontSize: fontSize
      },
    };
    if (Boolean(yMin)) yAxis.min = 'dataMin';
    if (Boolean(yMax)) yAxis.max = 'dataMax';

    if (Boolean(splitAreaColor)) {
      const areaStyleColor_1 = transferColorToRgba(splitAreaColor, 0.3);
      const areaStyleColor_2 = transferColorToRgba(splitAreaColor, 0.1);
      xAxis.splitArea.areaStyle.color = [areaStyleColor_1, areaStyleColor_2];
      yAxis.splitArea.areaStyle.color = [areaStyleColor_1, areaStyleColor_2];
    }

    const tooltip = {
      show: true,
      textStyle: {
        fontSize: fontSize
      }
    };

    const serieTemp = {
      type: 'heatmap',
      label: {
        show: showLabel,
        color: labelColor
      },
      encode: {
        x: xDimension,
        y: yDimension
      },
      progressive: progressive
    };
    
    const visualMap = {
      show: true,
      type: 'continuous',
      orient: visual_orient,
      calculable: true,
      inRange: {
      },
      outOfRange: {
      },
      controller: {},
      textStyle: {
        color: fontColor,
        fontSize: fontSize
      }
    }
    if (valueDimension) {
      serieTemp.encode.seriesName = valueDimension;
      serieTemp.encode.value = valueDimension;
      visualMap.dimension = valueDimension;
    }
    if (Boolean(inRangeColor)) {
      const _inRangeColor = inRangeColor.indexOf(',') > 0 ? inRangeColor.split(',').map(function(color) { return  color.trim() }) : [inRangeColor];
      visualMap.color = _inRangeColor;
      visualMap.inRange.color = _inRangeColor;
      visualMap.controller.inRange = {
          color: _inRangeColor
      }
    }
    if (Boolean(outRangeColor)) {
      visualMap.outOfRange.color = [outRangeColor];
      visualMap.controller.outOfRange = { color: [outRangeColor] };
    }
    if (Boolean(colorAlpha)) {
      const _colorAlpha = colorAlpha.indexOf(',') > 0 ? colorAlpha.split(',').map(function(color) { return  Number(color.trim()) }) : [Number(colorAlpha)];
      visualMap.inRange.colorAlpha = _colorAlpha;
    }
    if (Boolean(colorLightness)) {
      const _colorLightness = colorLightness.indexOf(',') > 0 ? colorLightness.split(',').map(function(color) { return  Number(color.trim()) }) : [Number(colorLightness)];
      visualMap.inRange.colorLightness = _colorLightness;
    }
    if (Boolean(colorSaturation)) {
      const _colorSaturation = colorSaturation.indexOf(',') > 0 ? colorSaturation.split(',').map(function(color) { return  Number(color.trim()) }) : [Number(colorSaturation)];
      visualMap.inRange.colorSaturation = _colorSaturation;
    }
    if (Boolean(colorHue) && colorHue.indexOf(',') > 0) {
      const _colorHue = colorHue.split(',').map(function(color) { return  Number(color.trim()) });
      visualMap.inRange.colorHue = _colorHue;
    }

    if (Boolean(visualPosition)) {
      visualPosition.split(',').forEach((item, i) => {
        if (item.indexOf(':') > 0) {
          const key = item.split(':')[0].trim();
          const value = item.split(':')[1].trim();
          visualMap[`${key}`] = value;
        } else {
          visualMap[`${i ? 'top' : 'left'}`] = item.trim();
        }
      });
    }

    const dataZoom = [
      {
        show: false,
        start: zoomStart,
        end: zoomEnd
      }, {
        type: 'inside',
        start: zoomStart,
        end: zoomEnd
      }
    ];
    if (zoomStart < 0 || zoomEnd < 100) {
      dataZoom[1].disabled = true
    } else {
      dataZoom[1].disabled = false
    }
    
    const myChart = window.echarts.init(this);
    myChart.on('click', function(params) {
      let values = {};
      params.dimensionNames.forEach(function(dimensionName, index) {
        values[dimensionName] = params.data[index];
      });

      console.log(values);

      if (window.spSocket) {
        window.spSocket.send({
          eventName,
          data: {
            success: true,
            out1: values
          }
        })
      }
    })

    function initChart(source) {
      myChart.clear();
      const data = source.slice(1).map(item => item[valueDimension]);
      const visualMin = data.reduce((prev, curr)=>Math.min(prev, curr));
      const visualMax = data.reduce((prev, curr)=>Math.max(prev, curr));
      const option = {
        tooltip: tooltip,
        grid: grid,
        xAxis: xAxis,
        yAxis: yAxis,
        dataset: {
          source: source
        },
        visualMap: Object.assign(visualMap, {
          min: visualMin,
          max: visualMax,
        }),
        dataZoom: dataZoom,
        series: serieTemp
      };

      if (Boolean(colors)) option.color = colors;
      myChart.setOption(option);
      myChart.resize();
    }

    initChart(defaultData);

    window.addEventListener('resize', function () {
      myChart.resize();
    }, false)
    let hasTransfer = false;
    // 有 dashboardHost 说明是运行模式
    if (window.spSocket) {
      window.spSocket.subscribe({
        eventName: eventName,
        callback: function (_data) {
          let _in1Str = _data.data.in1;
          if (_in1Str) {
            const source = JSON.parse(_in1Str);

            if (!hasTransfer) {
              initChart(source);
              hasTransfer = true
            } else {
              const data = source.slice(1).map(item => item[valueDimension]);
              const visualMin = data.reduce((prev, curr)=>Math.min(prev, curr));
              const visualMax = data.reduce((prev, curr)=>Math.max(prev, curr));
              myChart.setOption({
                visualMap: Object.assign(visualMap, {
                  min: visualMin,
                  max: visualMax,
                }),
                dataset: {
                  source: source
                }
              })
            }
          }
        }
      });
    }
  },

  onViewInit() {
    this.updateScript();
    const evn = `
      change:fontSize
      change:fontColor
      change:colors
      change:defaultData
      change:xAxisName
      change:yAxisName
      change:xAxisType
      change:yAxisType
      change:axisColor
      change:xSplitArea
      change:ySplitArea
      change:splitAreaColor
      change:splitAreaOpacity
      change:gridPadding
      change:showLabel
      change:labelColor
      change:xLabelRotate
      change:xDimension
      change:yDimension
      change:xMin
      change:xMax
      change:yMin
      change:yMax
      change:valueDimension
      change:visualPosition
      change:visual_orient
      change:colorAlpha
      change:colorLightness
      change:colorSaturation
      change:colorHue
      change:inRangeColor
      change:outRangeColor
      change:zoomStart
      change:zoomEnd
    `;
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
    this.listenTo(this.em, 'update:component:style:height update:component:style:width', throttle.bind(this, this.updateScript.bind(this)));
  }
}
