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

export default {
  name: boxRef,
  viewTemplate() {
    return `
      <div class="${boxRef}" data-gjs-type="${boxRef}">
        <span>这是一个空盒子</span>
      </div>
    `;
  },
  viewStyle() {
    return `
      <style>
        .${boxRef} {
          padding: 10px;
          width: 200px;
        }
        .${boxRef}.shadow {
          box-shadow: 0 3px 8px rgba(0,0,0,0.2);
        }
      </style>
    `;
  },
  blockOptions() {
    return {
      label: `
        <svg class="gjs-block-svg" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" ><path d="M810.666667 213.333333v597.333334H213.333333V213.333333h597.333334z m0-85.333333H213.333333c-47.146667 0-85.333333 38.186667-85.333333 85.333333v597.333334c0 47.146667 38.186667 85.333333 85.333333 85.333333h597.333334c47.146667 0 85.333333-38.186667 85.333333-85.333333V213.333333c0-47.146667-38.186667-85.333333-85.333333-85.333333z"></path></svg>
        <div class="gjs-block-label">盒子</div>
      `,
    };
  },
  componentOptions() {
    return {
      resizable: true,
      dmode: "absolute",
      highlightable: false,
      name: "xly-box",
      traits: [
        {
          name: "authorInfo",
          label: "开发者",
          type: "authorInfo",
          author: "秋水",
          email: "qiushui.smy@xuelangyun.com",
        },
        {
          name: "docUrl",
          label: "文档",
          type: "link",
          href:
            "https://xuelangyun.yuque.com/docs/share/68cec72d-8d39-4551-bcc6-fbe0f47768c6?# 《盒子》",
        },
        {
          name: "shadow",
          label: "阴影",
          changeProp: 1,
          type: "checkbox",
        },
      ],
      shadow: false,
    };
  },
  onModelScript() {
    const shadow = "{[ shadow ]}";
    Boolean(shadow)
      ? $(this).addClass("shadow")
      : $(this).removeClass("shadow");
  },
  onViewInit() {
    const evn = "change:shadow";
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  },
};
