import { rankingList, CATEGORIES } from '../../configuration/constants'

export default {
  // 组件名称
  name: rankingList,

  // 前面板html模板
  viewTemplate() {
    return `
      <div data-gjs-type="${rankingList}" class="${rankingList}">
      </div>
    `
  },
  // 前面板html样式
  viewStyle() {
    return `
      <style>
      .${rankingList} {
        display: flex;
        width: 1368px;
        height: 592px;
      }

      .${rankingList} .left {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .${rankingList} .left .arrow-down{
        transform: rotate(-90deg);
      }

      .${rankingList} .left .arrow-up{
        transform: rotate(90deg);
      }

      .${rankingList} .ruler {
        width: 8px;
        height: 100%;
        background-image: repeating-linear-gradient(0deg, #333 0, #333 4px, transparent 0, transparent 100px), repeating-linear-gradient(0deg, #e8e8e8 0, #e8e8e8 2px, transparent 0, transparent 10px);
        background-position: 0 -50px, 0 0;
        background-repeat: no-repeat;
      }

      .${rankingList} .top-list {
        flex: 1;
        display: flex;
        flex-direction: column;
        width: 100%;
      }

      .${rankingList} .top-list .top {
        height: 11.8%;
        display: flex;
        justify-content: flex-end;
      }

      .${rankingList} .top-list .top1 {
        height: 14.4%
      }

      .${rankingList} .top-list .content {
        width: 70%;
        height: 100%;
      }

      .${rankingList} .container {
        padding: 5px;
      }

      .${rankingList} .top1 {
        diplay: flex;
      }

      .${rankingList} .top1 .container {
        flex: 1;
      }

      .${rankingList} .top .content {
        display: flex;
        align-items: center;
      }

      .${rankingList} .top .content .value {
        flex: 1;
        text-align: right;
      }

      .${rankingList} .top .content .number {
        margin: 0 5%;
      }

      .${rankingList} .top1 .content {
        width: 100%;
        padding: 5px;
      }

      .${rankingList} .top1 .arc{
        height: 90%;
        border-radius: 50% 0 0 50%;
        border: 3px solid rgba(0,0,0,0);
        margin-top: 4px;
      }
      
      </style>
    `
  },

  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      category: CATEGORIES.FORM,
      label: `
        <svg viewBox="0 0 1024 1024" width="30" height="30">
          <path d="M224 800v160c0 35.3-28.7 64-64 64H8c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h136c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16H8c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h136c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16H8c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h152c35.3 0 64 28.7 64 64zM160 64v216c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V80c0-8.8-7.2-16-16-16H40c-4.4 0-8-3.6-8-8V8c0-4.4 3.6-8 8-8h56c35.3 0 64 28.7 64 64zM64 560v16c0 8.8 7.2 16 16 16h136c4.4 0 8 3.6 8 8v48c0 4.4-3.6 8-8 8H64c-35.3 0-64-28.7-64-64v-48c0-35.3 28.7-64 64-64h80c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16H8c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h152c35.3 0 64 28.7 64 64v48c0 35.3-28.7 64-64 64H80c-8.8 0-16 7.2-16 16zM992 176H320c-17.7 0-32-14.3-32-32s14.3-32 32-32h672c17.7 0 32 14.3 32 32s-14.3 32-32 32zM992 544H320c-17.7 0-32-14.3-32-32s14.3-32 32-32h672c17.7 0 32 14.3 32 32s-14.3 32-32 32zM992 912H320c-17.7 0-32-14.3-32-32s14.3-32 32-32h672c17.7 0 32 14.3 32 32s-14.3 32-32 32z" p-id="2986" fill="#1890ff">
          </path>
        </svg>
        <div class="gjs-block-label">排名</div>
      `
    };
  },

  // 后面板显示属性配置
  spOptions() {
    return {
      label: '排名',
      icon: 'globe',
      docUrl: '',
      inPorts: [
        {
          uuid: 'in1',
          subType: 'all',
          description: {
            zh_CN: '输入1'
          }
        }
      ],
    }
  },

  // 组件属性
  componentOptions() {
    return {
      name: rankingList,
      resizable: true,
      dmode: 'absolute',
      editable: true,
      disableChildEdit: false,
      traits: [
        {
          name: 'borderColor',
          label: '线条色调',
          changeProp: 1,
          type: 'color',
        },
        {
          name: 'bgColor',
          label: '背景色',
          changeProp: 1,
        },
        {
          name: 'iconWidth',
          label: '图标区域长度',
          changeProp: 1,
          type: 'number'
        },
        {
          name: 'topBgColor',
          label: 'N0.1背景色',
          changeProp: 1,
        },
        {
          name: 'numberFontSize',
          label: 'NO.字体大小',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'numberFontColor',
          label: 'NO.字体颜色',
          changeProp: 1,
          type: 'color'
        }, {
          name: 'nameFontSize',
          label: '名称字体大小',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'nameFontColor',
          label: '名称字体颜色',
          changeProp: 1,
          type: 'color'
        }, {
          name: 'valueFontSize',
          label: '数值字体大小',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'valueFontColor',
          label: '数值字体颜色',
          changeProp: 1,
          type: 'color'
        }, {
          name: 'valueTopFontColor',
          label: 'N0.1数值字体颜色',
          changeProp: 1,
          type: 'color'
        }, {
          name: 'unit',
          label: '数据单位',
          changeProp: 1
        }, {
          name: 'unitFontSize',
          label: '数据单位字体大小',
          changeProp: 1
        }, {
          name: 'unitFontColor',
          label: '数据单位字体颜色',
          changeProp: 1
        }, {
          name: 'csv',
          label: '示例数据',
          changeProp: 1,
          type: 'csvDownload',
          preFileName: '排名',
          datas: [["name", "value",], ["one", 3454], ["two", 3454], ["three", 3454], ["four", 3454], ["five", 3454]]
        }, {
          name: 'defaultData',
          changeProp: 1,
          type: 'hide'
        }
      ],
      iconWidth: 0,
      borderColor: '#333',
      bgColor: 'rgba(0, 0, 0, 0.3)|rgba(0, 0, 255, 0.01)',
      topBgColor: 'rgba(31, 203, 255, 0.3)|rgba(31, 203, 255, 0.3)',
      numberFontSize: 36,
      numberFontColor: 'rgba(0,0,0,0.7)',
      nameFontSize: 36,
      nameFontColor: '#333',
      valueFontSize: 36,
      valueFontColor: '#333',
      valueTopFontColor: '#1fcbff',
      unitFontSize: 24,
      unitFontColor: 'rgba(0,0,0,0.7)',
      unit: '个',
      defaultData:JSON.stringify([["name", "value",], ["one", 3454], ["two", 3454], ["three", 3454], ["four", 3454], ["five", 3454]]).replace(/\"/g, "\\\""),
    }
  },

  onModelScript() {
    const iconWidth = Number('{[ iconWidth ]}');
    const borderColor = '{[ borderColor ]}';
    const bgColor = stringToArray('{[ bgColor ]}', '|');
    const topBgColor = stringToArray('{[ topBgColor ]}', '|');
    const numberFontSize = '{[ numberFontSize ]}';
    const numberFontColor = '{[ numberFontColor ]}';
    const nameFontSize = '{[ nameFontSize ]}';
    const nameFontColor = '{[ nameFontColor ]}';
    const valueFontSize = '{[ valueFontSize ]}';
    const valueFontColor = '{[ valueFontColor ]}';
    const valueTopFontColor = '{[ valueTopFontColor ]}';
    const unitFontSize = '{[ unitFontSize ]}';
    const unitFontColor = '{[ unitFontColor ]}';
    const unit = '{[ unit ]}';
    let defaultData = JSON.parse('{[ defaultData ]}'.replace(/\\\"/g, "\""));
    let categories = new Array();
    let values = new Array();
    defaultData.map((data, index) => {
      if (index !== 0) {
        categories.push(data[0]);
        values.push(data[1]);
      }
    });

    const self = this;
    const height = $(self).height();
    $(self).empty();
    $(self).append(`
      <div class="left">
        <svg class="arrow-down" viewBox="0 0 1267 1024" width="16" height="16"><path d="M1170.529524 73.094095L97.304381 499.809524 1170.529524 926.524952 978.236952 499.809524z" fill="${borderColor}" p-id="20236"></path></svg>
        <div class="ruler"></div>
        <svg class="arrow-up" viewBox="0 0 1267 1024" width="16" height="16"><path d="M1170.529524 73.094095L97.304381 499.809524 1170.529524 926.524952 978.236952 499.809524z" fill="${borderColor}" p-id="20236"></path></svg>
      </div>
    `);
    $(self).find('.ruler').css('background-image',`repeating-linear-gradient(0deg, ${borderColor} 0, ${borderColor} 4px, transparent 0, transparent ${height / 5}px), repeating-linear-gradient(0deg, ${transferColorToRgba(borderColor, 0.3)} 0, ${transferColorToRgba(borderColor, 0.3)} 2px, transparent 0, transparent 10px)`)
    $(self).append(`
    `);
    $(self).append(`<div class="top-list"></div>`);
    categories.map((category, index) => {
      if (index === 0) {
        $(self).find('.top-list').append(`
          <div class="top top1">
            <div style="width: 18%;height:2px;background-image: linear-gradient(-90deg, ${borderColor} 0%, ${transferColorToRgba(borderColor, 0.2)} 100%);"></div>
            <div class="arc"></div>
            <div class="container">
              <div class="content">
                <div class="icon"></div>
                <div class="number">NO.${index + 1}</div>
                <div class="name">${category}</div>
                <div class="value">${values[index]}</div>
                <div class="unit">${unit}</div>
              </div>
            </div>
          </div>
        `);
      } else {
        $(self).find('.top-list').append(`
          <div class="top top${index + 1}">
            <div class="content">
             <div class="number">NO.${index + 1}</div>
             <div class="name">${category}</div>
             <div class="value">${values[index]}</div>
             <div class="unit">${unit}</div>
            </div>
          </div>
        `);
      }
    });

    $(self).find('.icon').css({ width: `${iconWidth}px` });
    $(self).find('.number').css({ fontSize: `${numberFontSize}px`, color: numberFontColor });
    $(self).find('.name').css({ fontSize: `${nameFontSize}px`, color: nameFontColor });
    $(self).find('.value').css({ fontSize: `${valueFontSize}px`, color: valueFontColor });
    $(self).find('.top1').find('.value').css({ color: valueTopFontColor });
    $(self).find('.unit').css({ fontSize: `${unitFontSize}px`, color: unitFontColor, marginLeft: 10 });

    $(self).find('.content').css('background-image', `linear-gradient(90deg, ${bgColor[0]} 0%, ${bgColor[1]} 100%)`);
    $(self).find('.top1').find('.content').css('background-image', `linear-gradient(90deg, ${topBgColor[0]} 0%, ${topBgColor[1]} 100%)`);
    $(self).find('.top').css('margin-bottom', `${height / 5 - height * 0.118}px`);
    $(self).find('.top1').css({ marginTop: '16px', alignItems: 'center' });
    $(self).find('.top1').find('.arc').css({ 'width': `${height * 0.144 / 2}px`, 'border-left-color': borderColor });
    $(self).find('.top1').find('.container').css({
      borderRadius: `${height * 0.144 / 2}px 0 0 ${height * 0.144 / 2}px`,
      marginLeft: `-${height * 0.144 / 2 - 1}px`,
      border: `1px solid ${transferColorToRgba(borderColor, 0.2)}`,
      borderRight: 'none',
    });
    $(self).find('.top').find('.content').css({ borderRadius: `${height * 0.144 / 2}px 0 0 ${height * 0.144 / 2}px` });

    function stringToArray(string, spliter) {
      if (string.indexOf(spliter) > -1) {
        string = string.split(spliter).map(item => item.trim())
      } else if (Boolean(string)) {
        string = [string, string]
      }
      return string;
    }

    function transferColorToRgba(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 + ')';
    }

    if (window.spSocket) {
      window.spSocket.subscribe({
        eventName: eventName,
        callback: function (_data) {
          const value = _data.data.in1;
          if (value) {
            defaultData = JSON.parse(JSON.stringify(value));
          }
        }
      });
    }
  },

  onViewInit() {
    const evn = `
      change:borderColor
      change:unit
      change:bgColor
      change:topBgColor
      change:numberFontSize
      change:numberFontColor
      change:nameFontSize
      change:nameFontColor
      change:valueFontSize
      change:valueFontColor
      change:valueTopFontColor
      change:unitFontSize
      change:unitFontColor
      change:unit
      change:defaultData
      change:iconWidth
    `
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  }
}
