<template>
  <!--添加笔记窗口-->
  <el-dialog
    title="笔记填写"
    :modal-append-to-body="false"
    :visible.sync="dialogFlag"
    :before-close="beforeClose"
    custom-class="noteBox"
    v-dialog-drag
  >
    <div class="autocompleteDiv">
      <div class="left">
        <span>当前标签：</span>
        <span v-if="tags.length === 0">暂无</span>
        <div class="myTags">
          <el-tag
            closable
            style="margin-left: 4px; margin-bottom: 4px"
            :key="i"
            v-for="(item, i) in tags"
            @close="removeTag(item)"
          >
            {{ item.tagName }}
          </el-tag>
        </div>
      </div>

      <div class="right">
        <span>新增标签：</span>
        <el-autocomplete
          clearable
          class="inline-input"
          v-model="noteType"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          @input="getSuggest"
          @change="handleSelect"
          @select="handleSelect"
        >
          <el-button slot="append" icon="el-icon-plus"></el-button>
        </el-autocomplete>
      </div>
    </div>
    <div id="wangeditor"></div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="beforeClose">取 消</el-button>
      <el-button type="primary" @click="addNode">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import E from "wangeditor";
import { tagSuggest } from "@/api/doc/tag";

export default {
  name: "NoteWindow",
  props: ["dialogVisible"],
  watch: {
    dialogVisible(c, o) {
      this.dialogFlag = c;
    },
    nodeText(c, o) {
      this.$parent.node.text = c;
    },
    tags(c, o) {
      let res = [];
      c.forEach((item) => {
        res.push(item.tagName);
      });
      this.$parent.node.tags = res.join(",");
    },
  },
  data() {
    return {
      tags: [],
      dialogFlag: this.dialogVisible,
      nodeText: undefined,
      noteType: undefined,
      restaurants: [],
    };
  },
  methods: {
    opened() {
      alert(1);
      debugger;
    },
    async getSuggest(e) {
      let p = {
        keyword: e,
      };
      await tagSuggest(p).then((res) => {
        if (res.code === 200) {
          this.restaurants = res.result.map((item) => {
            let model = {
              value: item.tagName,
            };
            return model;
          });
        }
      });
    },
    async querySearch(queryString, cb) {
      await this.getSuggest();
      let restaurants = this.restaurants;
      let results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !==
          -1
        );
      };
    },
    handleSelect(e) {
      this.addTag(e.value || e);
      this.noteType = "";
    },
    addTag(e) {
      for (let i = 0; i < this.tags.length; i++) {
        let item = this.tags[i];
        if (item.tagName === e) {
          this.$message.error("当前标签已存在，不能重复添加");
          return;
        }
      }
      let tag = {
        tagName: e,
      };
      this.tags.push(tag);
    },
    removeTag(e) {
      this.tags.splice(this.tags.indexOf(e), 1);
    },
    beforeClose() {
      document.querySelector(".v-modal").remove();
      this.$parent.dialogVisible = false;
    },
    addNode() {
      this.$emit("addNode");
      this.dialogFlag = false;
    },
  },
  mounted() {
    this.$nextTick(() => {
      const editor = new E("#wangeditor");
      editor.config.excludeMenus = ["video", "image", "table", "todo"];
      // 配置 onchange 回调函数，将数据同步到 vue 中
      editor.config.onchange = (newHtml) => {
        this.nodeText = newHtml;
      };
      editor.create();
      editor.txt.html(this.$parent.node.text);
    });
  },
};
</script>

<style lang="scss">
.el-autocomplete-suggestion {
  /*z-index: 1991 !important;*/
}

#wangeditor {
  p {
    font-size: 26px !important;
  }
}

.noteBox {
  z-index: 1000 !important;

  .el-dialog__title {
    font-size: 24px !important;
    font-weight: bold;
  }
}
</style>

<style lang="scss" scoped>
#wangeditor {
  border: 1px solid;
  font-size: 20px !important;

  p {
    font-size: 20px !important;
  }
}

.autocompleteDiv {
  font-size: 20px;
  width: 100%;
  min-height: 36px;
  margin: -20px 0 20px 0px;

  & > div {
    display: inline-block;
  }

  & > .left {
    width: 500px;

    .myTags {
      width: 430px;
      margin-top: -28px;
      margin-left: 90px;

      .el-tag {
        font-size: 16px;
      }
    }
  }

  & > .right {
    margin-top: -6px;
    float: right;

    .inline-input {
      width: 200px;
    }
  }
}
</style>
