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

export default {

  // 组件名称
  name: cardStatus,

  // 前面板html模板
  viewTemplate() {
    return `
      <div data-gjs-type="${cardStatus}" class="${cardStatus}">
      </div>
    `
  },
  // 前面板html样式
  viewStyle() {
    return `
      <style>
        .${cardStatus} {
          display: flex;
          flex-wrap: wrap;
          border: 1px solid transparent;
          border-radius: 3px;
          width: 115px;
          height: 82px;
          overflow: auto;
        }
        .${cardStatus} > div {
          display: flex;
          align-items: center;
          flex: 1 1 auto;
          padding: 0 8px;
        }
        .${cardStatus} > div > i {
          display: inline-block;
          width: 12px;
          height: 12px;
          flex: 0 0 12px;
        }
        .${cardStatus} > div > span {
          display: inline-block;
          margin: 0 8px;
        }
        .${cardStatus}::-webkit-scrollbar {
          width: 8px;
          background-color: transparent;
        }
        .${cardStatus}::-webkit-scrollbar-thumb {
          border-radius: 8px;
          background-color: rgba(0, 0, 0, 0.2);
        }
        .${cardStatus}::-webkit-scrollbar-track {
          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
          border-radius: 8px;
        }
      </style>
    `
  },

  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      label: "状态卡片",
      attributes: { class: 'fa fa-list-alt' },
    };
  },

  // 后面板显示属性配置
  spOptions() {
    return {
      label: '状态卡片',
      icon: 'globe',
      docUrl: 'https://www.yuque.com/docs/share/13396053-0e7d-4861-96f6-64b18e8e8ad4#',
      author: '秋水',
      email: 'qiushui.smy@xuelangyun.com',
      inPorts: [
        {
          uuid: 'in1',
          subType: 'all',
          description: {
            zh_CN: 'json类型，例："{"name": "成功","value": "success"}"'
          }
        }
      ]
    }
  },

  // 组件属性
  componentOptions() {
    return {
      droppable: false,
      resizable: true,
      traits: [{
        name: 'columns',
        label: '列数',
        type: 'number',
        min: 1,
        step: 1,
        changeProp: 1
      }, {
        name: 'align',
        label: '对齐方式',
        changeProp: 1,
        type: 'select',
        options: [{ id: 'flex-start', name: '左对齐' }, { id: 'center', name: '居中对齐' }, { id: 'flex-end', name: '右对齐' }]
      }, {
        name: 'statusType',
        label: '状态类型',
        changeProp: 1
      }, {
        name: 'statusColors',
        label: '映射色值',
        changeProp: 1
      }, {
        name: 'potPosition',
        label: '圆点位置',
        changeProp: 1,
        type: 'select',
        options: [{id: 'left', name: '左'}, {id: 'right', name: '右'}]
      }, {
        name: 'potRadius',
        label: '圆点圆角',
        type: 'number',
        min: 0,
        step: 1,
        max: 10,
        changeProp: 1
      }, {
        name: 'fontSize',
        label: '字体大小',
        changeProp: 1,
        type: 'number',
        min: 12,
        max: 120,
        step: 1
      }, {
        type: 'color',
        name: 'fontColor',
        label: '字体颜色',
        changeProp: 1,
      }, {
        name: 'borderColor',
        label: '边框颜色',
        changeProp: 1,
        type: 'color'
      }, {
        name: 'bgColor',
        label: '背景颜色',
        changeProp: 1,
        type: 'color'
      }],
      "align": 'flex-start',
      "columns": 1,
      "statusType": "info,success,warning, danger",
      "statusColors": "#00c1de,#28a745, #ffc107,#dc3545",
      "potPosition": "left",
      "potRadius": 10,
      "bgColor": "none",
      "borderColor": "none",
      "fontSize": 14,
      "fontColor": "#333333",
    }
  },

  onModelScript() {
    const align = ('{[ align ]}').toString()
    const fontColor = ('{[ fontColor ]}').toString() + 'px';
    const fontSize = '{[ fontSize ]}';
    const bgColor = '{[ bgColor ]}';
    const borderColor = '{[ borderColor ]}';

    const columns = Number('{[ columns ]}');
    const statusType = ('{[ statusType ]}').toString();
    let statusColors = ('{[ statusColors ]}').toString();
    const potPosition = '{[ potPosition ]}';
    const potRadius = Number('{[ potRadius ]}');

    if (statusColors.indexOf(',') > 0) {
      statusColors = statusColors.split(',').map(item => item.trim())
    } else if (Boolean(statusColors)) {
      statusColors = [statusColors]
    } else {
      statusColors = ["#00c1de","#28a745", "#ffc107","#dc3545"]
    }
    const statusMap = {};
    if (statusType.indexOf(',') > 0) {
      statusType.split(',').map((item, index) => {
        const _i = index % statusColors.length;
        statusMap[item.trim()] = statusColors[_i];
      })
    } else if (Boolean(statusType)) {
      statusMap[statusType] = statusColors[0]
    }

    const flexBasis = 100 / columns;
    const defaultData = [{"name": "普通消息", "value": "info"}, {"name": "成功消息", "value": "success"}, {"name": "告警消息", "value": "warning"}, {"name": "注意危险", "value": "danger"}];

    const self = this;
    $(self).empty();

    $(self).css({"font-size": fontSize, "color": fontColor, "background-color": bgColor, "border-color": borderColor})
    const render = function(data) {
      if (data && data.length) {
        data.forEach(function(item) {
          const $circle = $('<i style="border-radius: ' + potRadius * 5 + '%; background-color: ' + statusMap[item.value] + ';"></i>')
          const $item = $('<div style="flex-basis: ' + flexBasis + '%; justify-content: ' + align + '"><span>'+ item.name +'</span></div>')
          if (potPosition == 'right') {
            $item.append($circle)
          } else {
            $item.prepend($circle)
          }
          $(self).append($item)
        })
      }
    }

    render(defaultData)

    var hasTransfer = false;
    if (window.spSocket) {
      var eventName = `call-` + self.getAttribute('id');
      window.spSocket.subscribe({
        eventName: eventName,
        callback: function (_data) {
          let value = _data.data.in1;
          if (value) {
            if (!hasTransfer) {
              $(self).html('');
              hasTransfer = true;
            }
            render(JSON.parse(value))
          }
        }
      });
    }
  },

  onViewInit() {
    const evn = "change:align change:fontSize change:fontColor change:bgColor change:borderColor change:columns change:statusType change:statusColors change:potPosition change:potRadius"
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  }
}
