import { css } from "@linaria/core";
import "quill/dist/quill.snow.css";
import { defineComponent, onMounted, ref, watch } from "vue";

import Quill from "quill";
import { any } from "vue-types";
import { uploader } from "@/modules/objects";
import { message } from "ant-design-vue";

export default defineComponent({
  props: {
    content: any(),
  },
  emits: ["change"],
  setup(props, { emit }) {
    let editor = null as any;
    const once = ref(true);
    onMounted(() => {
      initEditor();
      initTitle();
    });
    watch(
      () => props.content,
      () => {
        if (props.content && once.value && editor) {
          let delta = JSON.parse(props.content);
          editor.updateContents(delta);
          once.value = false;
        }
      }
    );
    const initEditor = () => {
      editor = null;
      editor = new Quill("#editor", {
        theme: "snow",
        placeholder: "请在这里输入",
        modules: {
          history: {
            userOnly: true,
          },
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
              [{ header: [1, 2, 3, false] }], //几级标题
              [{ indent: "-1" }, { indent: "+1" }], // 缩进
              [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
              [{ align: [] }], //对齐方式
              [{ size: ["small", false, "large", "huge"] }],
              [{ color: [] }],
              [{ background: [] }],
              [{ font: [] }],
              ["clean"], //清除字体样式
              ["link", "image"], //上传图片
            ],
            handlers: {
              image: async (value: any) => {
                if (value) {
                  const [file] = await uploader.selectFile({
                    accept: "jpg,png,jpeg",
                  });
                  if (file.size > 5 * 1024 * 1024) {
                    message.warn("图片不能超过5M!");
                    return;
                  }
                  let url = uploader.createObjectURL(file);

                  console.log(url);
                  var range = editor.getSelection();
                  if (range) {
                    editor.insertEmbed(range.index, "image", url);
                    // editor.setSelection(range.index + 1);
                    // editor.update();
                  }
                } else {
                  // editor.value.format("link", false);
                }
              },
            },
          },
        },
      });
      editor.on("text-change", (data: any) => {
        once.value = false;
        emit("change", JSON.stringify(data));
      });
    };
    const initTitle = () => {
      const titleConfig: { [key: string]: any } = {
        "ql-bold": "加粗",
        "ql-color": "字体颜色",
        "ql-font": "字体",
        "ql-code": "插入代码",
        "ql-italic": "斜体",
        "ql-link": "添加链接",
        "ql-background": "背景颜色",
        "ql-size": "字体大小",
        "ql-strike": "删除线",
        "ql-underline": "下划线",
        "ql-header": "标题",
        "ql-indent": "缩进",
        "ql-list": "列表",
        "ql-align": "文本对齐",
        "ql-formula": "公式",
        "ql-image": "图片",
        "ql-video": "视频",
        "ql-clean": "清除字体样式",
      };
      const oToolBar = document.querySelector(".ql-toolbar");
      const aButton = oToolBar?.querySelectorAll("button");
      const aSelect = oToolBar?.querySelectorAll("select");
      aButton &&
        aButton.forEach(function (item: any) {
          if (item.className === "ql-indent") {
            item.value === "+1"
              ? (item.title = "向右缩进")
              : (item.title = "向左缩进");
          } else {
            item.title = titleConfig[item.classList[0]];
          }
        });
      aSelect?.forEach(function (item: any) {
        item.parentNode.title = titleConfig[item.classList[0]];
      });
    };
    return () => (
      <div class={EditorPage}>
        <div id="editor" class={"editor_content"}></div>
      </div>
    );
  },
});
const EditorPage = css`
  width: 100%;
  .editor_content {
    width: 100%;
    min-height: 400px;
  }
  .ql-snow {
    .ql-editor h1 {
      h1,
      .ql-size-huge {
        font-size: 1.8rem;
      }
    }
    .ql-tooltip {
      &::before {
        content: "访问链接:";
      }
      &[data-mode="link"]::before {
        content: "输入链接:";
      }
      a.ql-action::after {
        content: "编辑";
      }
      a.ql-remove::before {
        content: "删除";
      }
      &.ql-editing {
        a.ql-action::after {
          content: "保存";
        }
      }
    }

    .ql-picker {
      &.ql-header {
        .ql-picker-label {
          &::before {
            content: "正文";
          }
          &[data-value="1"]::before {
            content: "标题1";
          }
          &[data-value="2"]::before {
            content: "标题2";
          }
          &[data-value="3"]::before {
            content: "标题3";
          }
        }
        .ql-picker-item {
          &::before {
            content: "正文";
          }
          &[data-value="1"] {
            &::before {
              content: "标题1";
              font-size: 1.8em;
            }
          }
          &[data-value="2"] {
            &::before {
              content: "标题2";
            }
          }
          &[data-value="3"] {
            &::before {
              content: "标题3";
            }
          }
        }
      }
      &.ql-size {
        .ql-picker-label {
          &::before {
            content: "普通";
          }
          &[data-value="small"]::before {
            content: "小号";
          }
          &[data-value="large"]::before {
            content: "大号";
          }
          &[data-value="huge"]::before {
            content: "超大";
          }
        }
        .ql-picker-item {
          &::before {
            content: "普通";
          }
          &[data-value="small"] {
            &::before {
              content: "小号";
            }
          }
          &[data-value="large"] {
            &::before {
              content: "大号";
            }
          }
          &[data-value="huge"] {
            &::before {
              font-size: 1.8rem;
              content: "超大";
            }
          }
        }
      }
      &.ql-font {
        .ql-picker-label {
          &::before {
            content: "标准字体";
          }
          &[data-value="serif"]::before {
            content: "衬线字体";
          }
          &[data-value="monospace"]::before {
            content: "等宽字体";
          }
        }
        .ql-picker-item {
          &::before {
            content: "标准字体";
          }
          &[data-value="serif"] {
            &::before {
              content: "衬线字体";
            }
          }
          &[data-value="monospace"] {
            &::before {
              content: "等宽字体";
            }
          }
        }
      }
    }
  }
`;
