import { iframeRef, CATEGORIES } from "../../configuration/constants";

export default {
  name: iframeRef,
  viewTemplate() {
    return `
      <div data-gjs-type="${iframeRef}" class="${iframeRef}">
      </div>
    `;
  },
  viewStyle() {
    return `
      <style>
        #wrapper .${iframeRef} {
          background-color: rgba(0,0,0,0.3);
        }
        .${iframeRef} > iframe {
          width: 100%;
          height: 100%;
        }
      </style>
    `;
  },
  blockOptions() {
    return {
      label: `
        <svg class="gjs-block-svg" viewBox="0 0 1024 1024"xmlns="http://www.w3.org/2000/svg"><path d="M819.2 351.573333h-146.773333V204.8c0-34.133333-27.306667-61.44-61.44-61.44H204.8C170.666667 146.773333 146.773333 170.666667 146.773333 204.8v409.6c0 34.133333 27.306667 61.44 61.44 61.44h146.773334V819.2c0 34.133333 27.306667 61.44 61.44 61.44h409.6c34.133333 0 61.44-27.306667 61.44-61.44V409.6c-6.826667-34.133333-34.133333-58.026667-68.266667-58.026667zM351.573333 409.6v215.04H204.8c-3.413333 0-10.24-3.413333-10.24-10.24V204.8c0-3.413333 3.413333-10.24 10.24-10.24h409.6c3.413333 0 10.24 3.413333 10.24 10.24v146.773333H409.6c-34.133333 0-58.026667 23.893333-58.026667 58.026667z m273.066667-6.826667V614.4c0 3.413333-3.413333 10.24-10.24 10.24h-215.04V409.6c0-3.413333 3.413333-10.24 10.24-10.24h215.04z m204.8 416.426667c0 3.413333-3.413333 10.24-10.24 10.24H409.6c-3.413333 0-10.24-3.413333-10.24-10.24v-146.773333H614.4c34.133333 0 61.44-27.306667 61.44-61.44v-215.04H819.2c3.413333 0 10.24 3.413333 10.24 10.24V819.2z" ></path></svg>
        <div class="gjs-block-label">页面嵌入(iframe)</div>
      `,
    };
  },
  componentOptions() {
    return {
      resizable: true,
      dmode: "absolute",
      draggable: true,
      selectable: true,
      highlightable: true,
      droppable: false,
      style: { width: "600px", height: "400px" },
      traits: [
        {
          name: "authorInfo",
          label: "开发者",
          type: "authorInfo",
          author: "秋水",
          email: "qiushui.smy@xuelangyun.com",
        },
        {
          name: "docUrl",
          label: "文档",
          type: "link",
          href:
            "https://xuelangyun.yuque.com/docs/share/6f7a1e8a-e544-43ba-a476-51b4b0d9fac5?# 《ifame》",
        },
        {
          name: "url",
          label: "URL",
          changeProp: 1,
        },
        {
          name: "nodeId",
          label: "节点Id",
          changeProp: 1,
        },
        {
          name: "propName",
          label: "Name",
          changeProp: 1,
        },
      ],
      url: "",
      propName: "myIframe",
    };
  },
  onModelScript() {
    const url = "{[ url ]}";
    const propName = "{[ propName ]}";
    const nodeId = "{[ nodeId ]}";
    
    const pathnames = location.pathname.split('/');

    const protocol = window.appConfig && window.appConfig.protocol || location.protocol;
    const host = window.appConfig && window.appConfig.predictHost || location.host;
    const userId = window.appConfig && window.appConfig.userId || pathnames.slice(-2)[0];
    const appId = window.appConfig && window.appConfig.appId || pathnames.slice(-1)[0];
    const ctx = {
      "{{protocol}}": protocol,
      "{{host}}": host,
      "{{userId}}": userId,
      "{{appId}}": appId,
      "{{nodeId}}": nodeId
    }
    
    let src = url;
    if (url.indexOf('{{') > -1) {
      Object.keys(ctx).forEach(key => {
        src = src.replace(key, ctx[key])
      })
    }
    if (window.spSocket) {
      const $iframe = $("<iframe></iframe>").attr({
        src: src,
        name: propName,
        frameborder: 0,
      });
      $(this).append($iframe);
    }
  },
  onViewInit() {
    const evn = "change:width change:height change:url change:propName change:nodeId";
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  },
};
