import { doubleRingChart, CATEGORIES } from '../../configuration/constants'
import { echartsBasicListen } from '../../feature/traits/common'
import { throttle } from '../../utils'
import { data } from 'jquery'

export default {
  name: doubleRingChart,
  viewTemplate() {
    return `
        <div data-gjs-type="${doubleRingChart}" class="${doubleRingChart}"></div>
        `
  },
  // 前面板html样式
  viewStyle() {
    return `
        <style>
            .${doubleRingChart} {
            position: absolute;
            border-radius: 5px;
            border-style: solid;
            border-width: 1px;
            border-color: transparent;
            padding: 10px;
            width: 600px;
            height: 400px;
            }
        </style>
        `
  },
  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      category: CATEGORIES.ECHARTS,
      label: '双环形图',
      attributes: { class: 'fa fa-circle-o-notch' }
    };
  },
  // 后面板显示属性配置
  spOptions() {
    return {
      label: '双环形图',
      icon: 'globe',
      docUrl: '',
      author: 'Alice',
      email: 'alice.ji@softtek.com',
      inPorts: [
        {
          uuid: 'in1',
          subType: 'json',
          description: {
            zh_CN: '输入1'
          }
        }],
      outPorts: [{
        uuid: 'out1',
        subType: 'json',
        description: {
          zh_CN: '输出1'
        }
      }]
    }
  },
  componentOptions() {
    return {
      name: doubleRingChart,
      resizable: true,
      dmode: 'absolute',
      droppable: false,
      traits: [
        {
          name: 'authorInfo',
          label: '开发者',
          type: 'authorInfo',
          author: 'Alice',
          email: 'alice.ji@softtek.com'
        },
        {
          type: "button",
          label: "使用说明",
          text: "查看",
          command: () => { window.open(`https://xuelangyun.yuque.com/suanpan_doc/public/nr7wep`) }
        },
        {
          name: 'title',
          label: '标题',
          changeProp: 1
        },
        {
          name: 'bgColor',
          label: '背景色',
          changeProp: 1,
          type: 'color'
        }
      ],
      "title": '',
      "bgColor": '#000'
    }
  },
  onModelScript() {
    const self = this;
    const _id = self.getAttribute('id');
    const eventName = `call-${_id}`;
    const myChart = window.echarts.init(self);
    const title = '{[ title ]}';
    const bgColor = '{[ bgColor ]}';
    function initChart() {
      myChart.clear();
      var num1 = 90;
      var num2 = 90;
      let option = {
        backgroundColor: bgColor,
        title: [{
          text: '',
          x: '50%',
          y: 30,
          textAlign: 'center',
          textStyle: {
            align: 'center',
            color: '#fff',
            fontSize: 30,
            fontWeight: '100',
          },
        }],
        series: [{
          type: 'pie',
          radius: ['60%', '70%'],
          center: ['50%', '50%'],
          z: 1,
          startAngle: 90,
          data: [{
            hoverOffset: 1,
            value: num1,
            name: '',
            itemStyle: {
              color: '#e7ba77',
            },
            label: {
              normal: {
                show: false,
                formatter: "{r|{c}%}",
                rich: {
                  r: {
                    color: 'rgba(255,255,255,1)',
                    fontWeight: 'bold',
                    fontSize: 18,
                  },
                },
                position: 'inside',
                color: '#FFF',
                textShadowBlur: 5,
                textShadowOffsetX: 1,
                textShadowOffsetY: 2,
                textShadowColor: 'rgba(0,0,0,0.3)',
              },

            },
            labelLine: {
              normal: {
                smooth: true,
                lineStyle: {
                  width: 0
                }
              }
            },
            hoverAnimation: false,
          },
          {
            label: {
              show: false
            },
            labelLine: {
              normal: {
                smooth: true,
                lineStyle: {
                  width: 0
                }
              }
            },
            value: 100 - num1,
            hoverAnimation: false,
            itemStyle: {
              color: 'rgba(0,0,0,0)',
            },
          }
          ]
        },
        {
          type: 'pie',
          radius: ['60%', '70%'],
          center: ['50%', '50%'],
          z: 0,
          data: [{
            hoverOffset: 1,
            value: num1,
            name: '',
            itemStyle: {
              color: '#d8d9d7',
            },
            label: {
              show: false
            },
            labelLine: {
              normal: {
                smooth: true,
                lineStyle: {
                  width: 0
                }
              }
            },
            hoverAnimation: false,
          },]
        },
        {
          type: 'pie',
          radius: ['80%', '90%'],
          center: ['50%', '50%'],
          z: 1,
          startAngle: 90,
          data: [{
            hoverOffset: 1,
            value: num2,
            name: '',
            itemStyle: {
              color: '#5c9bf8',
            },
            label: {
              normal: {
                show: false,
                formatter: "{r|{c}%}",
                rich: {
                  r: {
                    color: 'rgba(255,255,255,1)',
                    fontWeight: 'bold',
                    fontSize: 18,
                  },
                },
                position: 'inside',
                color: '#FFF',
                textShadowBlur: 5,
                textShadowOffsetX: 1,
                textShadowOffsetY: 2,
                textShadowColor: 'rgba(0,0,0,0.3)',
              },

            },
            labelLine: {
              normal: {
                smooth: true,
                lineStyle: {
                  width: 0
                }
              }
            },
            hoverAnimation: false,
          },
          {
            label: {
              show: false
            },
            labelLine: {
              normal: {
                smooth: true,
                lineStyle: {
                  width: 0
                }
              }
            },
            value: 100 - num2,
            hoverAnimation: false,
            itemStyle: {
              color: 'rgba(0,0,0,0)',
            },
          }
          ]
        },
        {
          type: 'pie',
          radius: ['80%', '90%'],
          center: ['50%', '50%'],
          z: 0,
          data: [{
            hoverOffset: 1,
            value: num1,
            name: '',
            itemStyle: {
              color: '#d8d9d7',
            },
            label: {
              show: false
            },
            labelLine: {
              normal: {
                smooth: true,
                lineStyle: {
                  width: 0
                }
              }
            },
            hoverAnimation: false,
          },]
        }
        ]
      };
      myChart.setOption(option);
    }
    initChart()
  },
  onViewInit() {
    this.updateScript();
    const evn = echartsBasicListen + ``
    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)));
  }
}