import { relativeLink, CATEGORIES, globalEventName, GLOBALEVENTS } from "../../configuration/constants";

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

  // 前面板html模板
  viewTemplate() {
    return `
      <button data-gjs-type="${relativeLink}" class="${relativeLink}">页面跳转</button>
    `;
  },
  // 前面板html样式
  viewStyle() {
    return `
      <style>
        .${relativeLink} {
          position: relative;
          padding: 8px 16px;
          border: 1px solid rgba(0,0,0,0.3);
          border-radius: 3px;
          text-align: center;
          box-shadow: 0 1px 3px rgba(0,0,0,0.2);
          overflow: hidden;
        }
        .${relativeLink}::after {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          background-color: rgba(255,255,255,0.2);
          opacity: 0;
          transform: scale(0.1);
          transition: all 0.4s ease;
        }
        .${relativeLink}:not([disabled]):hover::after {
          transform: scale(1);
          opacity: 1;
        }
        .${relativeLink}:not([disabled]):focus {
          transform: scale(1);
          opacity: 1;
          outline: none;
          box-shadow: inset 0 2px 3px rgba(0,0,0,0.3);
        }
        .${relativeLink} > span {
          font-size: inherit;
        }
        .${relativeLink} > .fa {
          margin-right: 8px;
          font-size: inherit;
          line-height: 1;
        }
      </style>
    `;
  },

  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      label: "页面跳转",
      attributes: { class: 'fa fa-window-restore' },
    };
  },

  spOptions() {
    return {
      label: '页面跳转',
      icon: 'globe',
      author: '宗介',
      email: 'zongjie.wxt@xuelangyun.com',
      docUrl: "https://xuelangyun.yuque.com/docs/share/ef6606a5-d531-4869-8727-3ee282f11d36?# 《页面跳转》",
      inPorts: [
        {
          uuid: 'in1',
          type: 'data',
          subType: 'all',
          description: {
            zh_CN: '输入1'
          }
        }
      ]
    }
  },

  // 组件属性
  componentOptions() {
    return {
      droppable: false,
      resizable: true,
      dmode: "absolute",
      traits: [
        {
          type: "button",
          label: "使用说明",
          text: "查看",
          command: () => { window.open(`https://xuelangyun.yuque.com/suanpan_doc/public/wg6h2f`) }
        },
        {
          label: "显示文本",
          changeProp: 1,
          name: "content",
        },
        {
          label: "目标网页",
          changeProp: 1,
          name: "rlTargetId",
        },
        {
          type: "checkbox",
          label: "新开标签页",
          changeProp: 1,
          name: "isNewWindow",
        },
      ],
      docUrl: 'https://xuelangyun.yuque.com/suanpan_doc/public/wg6h2f',
      rlTargetId: null,
      isNewWindow: false
    };
  },

  onModelScript() {
    const content = "{[ content ]}".toString() || '页面跳转';
    const rlTargetId = "{[ rlTargetId ]}".toString() || '#';
    const isNewWindow = Boolean("{[ isNewWindow ]}");
    let linkToGo = "#";

    const nav = function (url, isNewWindow) {
      if (isNewWindow) {
        window.open(url, '_blank');
      } else {
        window.location.href = url;
      }
    }

    const handleClick = function (e) {
      if (window.appConfig) {
        let target = linkToGo;

        if (rlTargetId !== '#') {
          target = rlTargetId;
          if (!(rlTargetId.startsWith('http://') || rlTargetId.startsWith('https://'))) {
            target = `//${window.location.hostname}/dashboard/${window.appConfig.userId}/${window.appConfig.id}/${rlTargetId}`
          }
        }

        nav(target, isNewWindow);

        if (window.spSocket) {
          window.spSocket.send({
            eventName: globalEvents,
            data: {
              action: GLOBALEVENTS.NAVIGATE,
              data: {
                target,
                isNewWindow
              },
              sender: window.spSocket.socket.id
            }
          });
        }
      }
    };

    if (window.spSocket) {
      const eventName = `call-${this.getAttribute('id')}`;
      window.spSocket.subscribe({
        eventName: eventName,
        callback: function (data) {
          linkToGo = data.data.in1;
        }
      });
    }

    $(this).on("click", handleClick);
    $(this).text(content);
  },

  onViewInit() {
    const evn = "change:rlTargetId";
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  },
};
