<template>
  <!-- 插入笔记 -->
  <div class="add-note" v-loading="loading">
    <div class="search">
      <el-input
        class="input"
        size="mini"
        placeholder="输入关键词搜索原文或笔记"
        suffix-icon="el-icon-search"
        v-model="searchParams.content"
        @keyup.enter.native="handleSearch"
        clearable
      ></el-input>
      <el-select
        size="mini"
        v-model="searchParams.tagId"
        filterable
        remote
        clearable
        default-first-option
        placeholder="标签（可搜索）"
        :remote-method="remoteMethod"
        :loading="loading"
        @change="handleSearch"
      >
        <el-option
          v-for="item in tagList.records"
          :key="item.id"
          :label="item.tagName"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <div class="total">共{{ noteList.records.length }}条数据</div>
    <div class="note-list">
      <el-card
        class="note-item"
        v-for="(item, index) in noteList.records"
        :key="index"
        shadow="hover"
      >
        <div class="card-header">
          <div class="tag" v-if="item.tagName && item.tagName.length > 0">
            <el-tag
              style="margin-right: 8px"
              type="warning"
              v-for="(v, i) in item.tagName.split(',')"
              :key="i"
              >{{ v }}
            </el-tag>
          </div>
          <div class="operations">
            <el-dropdown>
              <el-link>更多</el-link>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(dropItem, i) in dropdownList"
                  :key="i"
                  @click.native="handleNoteOperation(dropItem.value, item)"
                  >{{ dropItem.label }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div class="origin oneRow">
          <svg-icon
            icon-class="origin"
            style="color: #1a5eff; margin-right: 6px"
          />
          <!-- <i class="el-icon-document"></i> -->
          <span>原文：</span>
          <span
            v-if="oldContent"
            v-html="brightenKeyword(item.bookmarkContent, oldContent)"
          ></span>
          <span v-else> {{ item.bookmarkContent }}</span>
        </div>
        <div class="note twoRow">
          <svg-icon
            icon-class="icon-note"
            style="color: #e6a23c; margin-right: 6px"
          />
          <!-- <i class="el-icon-edit"></i> -->
          <span>笔记：</span>
          <span
            v-if="oldContent"
            v-html="brightenKeyword(item.noteContent, oldContent)"
          ></span>
          <span v-else> {{ item.noteContent }}</span>
        </div>
        <div class="buttons">
          <el-button
            type="primary"
            size="mini"
            @click="handleInsertOrigin(item.bookmarkContent)"
            >引入原文</el-button
          >
          <el-button
            type="primary"
            size="mini"
            plain
            @click="handleInsertNote(item.noteContent)"
            >引入笔记</el-button
          >
        </div>
      </el-card>
    </div>
    <div class="page">
      <el-pagination
        size="mini"
        class="note-page"
        background
        @size-change="handleSizeChangeNote"
        @current-change="handleCurrentChangeNote"
        :current-page.sync="noteList.current"
        :page-size="noteList.size"
        layout="prev, pager, next"
        :total="tagList.total"
      >
      </el-pagination>
      <AddOrUpdateNoteDialog
        :formData="form"
        ref="AddOrUpdateNoteDialog"
        @update="loadNoteList"
      />
    </div>
  </div>
</template>

<script>
// import { noteList, tagList } from "./mockData";
import { getNoteByTag, getNoteAllTagList } from "@/api/doc/index";
import noteOperationMixins from "@/views/mine/myNote/components/noteOperationMixins";
export default {
  //noteOperationMixins主要混入属性form、handleNoteOperation方法、AddOrUpdateNoteDialog组件
  mixins: [noteOperationMixins],
  data() {
    return {
      searchParams: {
        //标签名搜索
        tagId: "",
        //从原文和笔记中搜索
        content: "",
      },
      oldContent: "", //用于记录上一次搜索的关键词，以至于不会被实时影响关键词着色效果
      loading: false,
      dropdownList: [
        {
          label: "查看原文",
          value: "view",
        },
        {
          label: "编辑笔记",
          value: "edit",
        },
        {
          label: "删除笔记",
          value: "delete",
        },
      ],
      noteList: {
        records: [],
        current: 1,
        size: 20,
        total: 0,
      }, //笔记列表
      tagList: {
        records: [],
        current: 1,
        size: 20,
        total: 0,
      },
    };
  },
  mounted() {
    this.loadNoteList();
  },
  methods: {
    // 加载笔记列表
    async loadNoteList() {
      this.loading = true;
      const { current, size } = this.noteList;
      const { content, tagId } = this.searchParams;
      const params = {
        currentPage: current,
        pageCount: size,
        id: tagId,
        content,
      };
      let res = await getNoteByTag(params);
      this.oldContent = content;
      this.loading = false;
      if (res.code == 200) {
        this.noteList = res.data;
        this.loadTagList();
      }
    },
    // 搜索
    handleSearch() {
      this.loadNoteList();
    },
    // 加载标签
    async loadTagList() {
      // 首次加载时只加载最多10个供用户下拉选择
      this.remoteMethod("", 10);
    },
    // 远程搜索标签 默认搜索时pageCount 为100
    remoteMethod(keyword, pageCount = 100) {
      this.loading = true;
      const params = {
        keyword,
        currentPage: 1,
        pageCount,
      };
      getNoteAllTagList(params).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.tagList = res.data;
        }
      });
    },
    // 插入笔记
    handleInsertNote(value) {
      this.$emit("insertText", value);
    },
    // 插入原文
    handleInsertOrigin(value) {
      this.$emit("insertText", value);
    },
    // 点击更多的下拉框
    handleClickDropdown(type, item) {
      console.log(type, item);
      switch (type) {
        case "view":
          this.$file.handleFileNameClickNew(item);
          break;
        case "edit":
          this.handleOpenAddUpdateDialog(item);
          break;
        case "delete":
          break;
      }
    },
    // 打开编辑笔记对话框
    handleOpenAddUpdateDialog(item) {
      this.$emit("handleOpenAddUpdateDialog", item);
    },
    //获取需要标红的文字
    getRedWords(contentText, keyword) {
      let keywordArray = keyword.split("");
      let wordsArray = [];
      for (let key of keywordArray) {
        if (contentText.includes(key)) {
          wordsArray.push(key);
        }
      }
      return wordsArray;
    },
    //将文字标红
    brightenKeyword(contentText, keyword) {
      let wordsArray = this.getRedWords(contentText, keyword);
      let res = contentText; //res的初始值是不带任何红色格式的
      //遍历相同字数组，
      for (let word of wordsArray) {
        const Reg = new RegExp(word, "i");
        //替换每一个相同字
        res = res.replace(Reg, `<span style="color: red;">${word}</span>`);
      }
      return res; //此时的res里已经将需要标红的字体带上了格式（<span style="color:red"></span>）
    },
    // 文件列表current
    handleSizeChangeNote(value) {
      this.tagList.pageCount = value;
      this.loadNoteList();
    },

    // 文件列表current
    handleCurrentChangeNote(value) {
      this.tagList.currentPage = value;
      this.loadNoteList();
    },
  },
};
</script>

<style lang="scss" scoped>
.total,
.note-list,
.search {
  padding: 0 20px;
}
.search {
  width: 100%;
  display: flex;
  .input {
    margin-right: 8px;
  }
}
.total {
  margin: 20px 0 4px;
  display: flex;
  justify-content: flex-end;
  font-size: 14px;
  color: #999;
}
.note-list {
  height: calc(100vh - 270px);
  overflow: auto;
  .note-item {
    margin-bottom: 16px;
    font-size: 14px;
    .tag {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    .origin,
    .note {
      margin-bottom: 8px;
    }
    .buttons {
      margin-top: 16px;
      display: flex;
      .el-button {
        flex: 1;
      }
    }
  }
  .card-header {
    height: 30px;
    .tag {
      float: left;
    }
    .operations {
      float: right;
    }
  }
}
</style>
