import blockquotes from "./Blockquotes.js";
const tabList = [
  {
    label: "标题",
    name: "titleList",
  },
  {
    label: "正文",
    name: "contentList",
  },
  // {
  //     label:'图片',
  //     name:'imageList'
  // },
  {
    label: "引导",
    name: "concernList",
  },
  // {
  //     label:'场景',
  //     name:'sceneList'
  // },
  {
    label: "布局",
    name: "layoutList",
  },
  {
    label: "分隔符",
    name: "separatorList",
  },
  // {
  //     label:'模板',
  //     name:'tempalteList'
  // }
];
const useTemplate = (domId) => {
  let dom = document.getElementById(domId);
  let doc = document.getElementById(domId + "-iframe").contentDocument;
  let hhHeight = document.getElementById(`${domId}container`).offsetHeight;
  dom.style.position = "relative";
  let width = 375;
  dom.style.marginLeft = width + "px";
  let section = document.createElement("section");
  section.id = `${domId}Template`;
  section.className = "rich-text-template";
  section.style.cssText = `width:${width}px;position:absolute;top:0;left:-${
    width + 1
  }px;border:1px solid #a0a0a0;`;
  dom.appendChild(section);
  let html = `<header style="display:flex;justify-content: space-around;width:100%;height:36px;">`;
  for (let i = 0; i < tabList.length; i++) {
    let item = tabList[i];
    html += `<div data-type="${item.name}" id="${
      item.name === "titleList" ? domId + "checkTab" : ""
    }" class="tab-${domId}" style="background-color:${
      item.name === "titleList" ? "#ffffff" : "rgb(0,0,0,.2)"
    };flex-basis:20%;height:100%;line-height:36px;text-align:center;">${
      item.label
    }</div>`;
  }
  html += "</header>";
  html += `<div style="height:${hhHeight - 68}px;overflow:auto;padding:15px;">`;
  html += `<content id="${domId}tabContent" style="width:calc(100% - 40px);">`;
  for (let i = 0; i < blockquotes.titleList.length; i++) {
    let item = blockquotes.titleList[i];
    html += `<article class="${domId}templateArticle" style="margin-bottom:10px;">`;
    html += item;
    html += `</article>`;
  }
  html += "</content>";
  html += "</div>";
  document.getElementById(`${domId}Template`).innerHTML = html;

  let tabEleList = document.getElementsByClassName(`tab-${domId}`);

  let clickTemplate = () => {
    let temList = document.getElementsByClassName(`${domId}templateArticle`);
    for (let i = 0; i < temList.length; i++) {
      let item = temList[i];
      item.onclick = (e) => {
        //console.log("e", e.target.parentNode);
        let el = e.target;
        while (el.className.indexOf(`${domId}templateArticle`) === -1) {
          el = el.parentNode;
        }
        doc.body.focus();
        doc.execCommand("insertHTML", false, el.innerHTML + "<br/>");
      };
    }
  };
  clickTemplate();
  for (let i = 0; i < tabEleList.length; i++) {
    let item = tabEleList[i];
    item.onclick = (e) => {
      let el = e.target;
      let type = el.dataset.type;
      if (el.style.backgroundColor !== "#ffffff") {
        let checkDom = document.getElementById(`${domId}checkTab`);
        checkDom.style.backgroundColor = "rgb(0,0,0,.2)";
        checkDom.id = "";
        el.style.backgroundColor = "#ffffff";
        el.id = `${domId}checkTab`;
        let checkHtml = "";
        let checkList = blockquotes[type];
        for (let j = 0; j < checkList.length; j++) {
          checkHtml += `<article class="${domId}templateArticle"  style="margin-bottom:10px;">`;
          checkHtml += checkList[j];
          checkHtml += `</article>`;
        }
        document.getElementById(`${domId}tabContent`).innerHTML = checkHtml;
        setTimeout(() => {
          clickTemplate();
        }, 30);
      }
    };
  }
};
export default useTemplate;