<template>
  <div class="wrapper" v-loading="loading">
    <div :span="5" class="left">
      <div class="search">
        <el-input
          placeholder="搜索标签"
          suffix-icon="el-icon-search"
          clearable
          size="mini"
          v-model="keyword"
          @keyup.native.enter="handleSearch"
        ></el-input>
        <el-button
          plain
          size="mini"
          icon="el-icon-refresh-right"
          style="margin-left: 4px"
          @click.native="handleReset"
          >重置</el-button
        >
      </div>

      <div class="total">共计{{ tagList.total }}条数据</div>
      <el-row class="list">
        <el-col
          v-for="(item, index) in tagList.records"
          :key="index"
          @click.native="handleClickArticle(item)"
        >
          <div
            v-if="item"
            :class="{ item: true, active: currentTagId == item.id }"
          >
            <div class="item-left" :title="item.fileName">
              •
              <span>{{ item.tagName }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-pagination
        background
        @size-change="handleSizeChangeFile"
        @current-change="handleCurrentChangeFile"
        :current-page.sync="tagList.currentPage"
        :page-size="tagList.pageCount"
        layout="prev, pager, next"
        :total="tagList.total"
      >
      </el-pagination>
    </div>
    <div :span="19" class="right">
      <div class="note-container">
        <div class="card-group" v-if="noteList.records.length > 0">
          <el-card
            class="card-item"
            shadow="hover"
            v-for="(item, index) in noteList.records"
            :key="index"
          >
            <div class="card-head">
              <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="oprations">
                <el-link
                  type="primary"
                  icon="el-icon-document-copy"
                  @click="handleNoteOperation('copyOrigin', item)"
                  >复制原文</el-link
                >
                <el-link
                  type="primary"
                  icon="el-icon-document-copy"
                  @click="handleNoteOperation('copyNote', item)"
                  >复制笔记</el-link
                >
                <el-dropdown>
                  <el-link type="primary" icon="el-icon-more">更多</el-link>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      @click.native="handleNoteOperation('view', item)"
                      >查看原文</el-dropdown-item
                    >
                    <el-dropdown-item
                      @click.native="handleNoteOperation('edit', item)"
                      >编辑笔记</el-dropdown-item
                    >
                    <el-dropdown-item
                      @click.native="handleNoteOperation('delete', item)"
                      >删除笔记</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
            <div class="bookmark">
              <span>
                <svg-icon icon-class="origin" /> {{ getNoteText(item.type) }}
              </span>
              <span>
                <span class="label"> 原文：</span>{{ item.bookmarkContent }}
              </span>
            </div>
            <div class="bookmark">
              <span>
                <svg-icon icon-class="icon-note" style="color: #e6a23c" />
                {{ getNoteText(item.type) }}
              </span>
              <span>
                <span class="label"> 笔记：</span>{{ item.noteContent }}</span
              >
            </div>
            <div class="source">来源：《{{ item.docName }}》</div>
          </el-card>
          <div class="page">
            <el-pagination
              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>
          </div>
        </div>
        <div class="card-group" v-else>
          <el-empty></el-empty>
        </div>
      </div>
    </div>
    <AddOrUpdateNoteDialog
      :formData="form"
      ref="AddOrUpdateNoteDialog"
      @update="handleUpdateNoteList"
    />
  </div>
</template>
<script>
import { getNoteAllTagList, getNoteByTag } from "@/api/doc/index";
import noteOperationMixins from "./noteOperationMixins";
export default {
  mixins: [noteOperationMixins],
  data() {
    return {
      keyword: "", //标签名关键词，搜索文件时使用
      currentTagId: "", //文件id 搜索笔记时使用
      //文件列表
      tagList: {
        records: [],
        current: 1,
        size: 20,
        total: 0,
      },
      //笔记列表
      noteList: {
        records: [],
        current: 1,
        size: 20,
        total: 0,
      },
      loading: false,
    };
  },
  computed: {
    getFileIcon(row) {
      return (row) => {
        const { extendName } = row;
        if (["doc", "docx", "word"].includes(row.extendName)) {
          return "word";
        } else if (["pdf"].includes(row.extendName)) {
          return "pdf-color";
        } else {
          return "unknownfile";
        }
      };
    },
    getNoteText(type) {
      return () => {
        switch (type) {
          case "underline":
            return "下划线";
          case "highlight":
            return "高亮";
          case "note":
            return "笔记";
        }
      };
    },
    getNoteTypeIcon(type) {
      return (type) => {
        return type ? type : "icon-note";
      };
    },
  },
  mounted() {
    this.loadLeftList();
  },
  methods: {
    //加载文件列表
    async loadLeftList() {
      this.loading = true;
      const { current, size } = this.tagList;
      const params = {
        currentPage: current,
        pageCount: size,
        tagName: this.keyword,
      };
      let res = await getNoteAllTagList(params);
      this.loading = false;
      if (res.data) {
        this.tagList = res.data;
        this.loadNoteList();
      }
    },

    //加载笔记列表
    async loadNoteList() {
      this.loading = true;
      const { current, size } = this.noteList;
      const params = {
        currentPage: current,
        pageCount: size,
        id: this.currentTagId,
      };
      let res = await getNoteByTag(params);
      this.loading = false;
      if (res.data) {
        this.noteList = res.data;
      }
    },
    // 点击文章
    handleClickArticle(item) {
      if (this.currentTagId == item.id) {
        this.currentTagId = "";
      } else {
        this.currentTagId = item.id;
      }
      this.noteList.currentPage = 1;
      this.noteList.pageCount = 10;
      this.loadNoteList();
    },

    // 文件名搜索
    handleSearch() {
      // 重置分页
      this.tagList.current = 1;
      this.tagList.size = 20;
      // 重置当前选中的文件
      this.currentTagId = "";
      this.loadLeftList();
    },

    handleReset() {
      // 重置分页
      this.tagList.current = 1;
      this.tagList.size = 20;
      // 重置查询参数
      this.currentTagId = "";
      this.keyword = "";
      this.loadLeftList();
    },

    // 文件列表size
    handleSizeChangeFile(value) {
      this.tagList.pageCount = value;
      this.loadLeftList();
    },

    // 文件列表current
    handleCurrentChangeFile(value) {
      this.tagList.currentPage = value;
      this.loadLeftList();
    },

    // 文件列表current
    handleSizeChangeNote(value) {
      this.tagList.pageCount = value;
      this.loadNoteList();
    },

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

    // 更新右侧获取笔记
    handleUpdateNoteList() {
      this.loadNoteList();
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper,
.left,
.right {
  height: 100%;
}
.wrapper,
.search {
  display: flex;
}

.left {
  width: 300px;
  border-right: #e6ebf5 1px solid;
  height: 100%;
  overflow: auto;
  padding: 20px 20px 0px 0;
  position: relative;

  .total {
    color: #999;
    padding: 12px 0 10px;
    font-size: 14px;
    display: flex;
    justify-content: flex-end;
  }
  .list {
    font-size: 14px;
    height: calc(100vh - 270px);
    overflow: auto;
    padding-bottom: 16px;
    .item {
      cursor: pointer;
      padding: 12px 20px;
      color: #333;
      display: flex;
      border-radius: 6px;
      .item-left {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      &:hover {
        background-color: #e5ecfc;
        color: $theme-blue;
      }
    }
    .active {
      background-color: #e5ecfc;
      color: $theme-blue;
    }
  }
}
.right {
  flex: 1;
  padding: 20px 0 16px 32px;
  // 单篇文章
  .note-container {
    //文章基本信息
    .info {
      padding: 12px 16px 4px;
      margin-bottom: 8px;
      background-color: #eef0f4;
      // border-bottom: 1px solid #333; 
      border-radius: 4px;
      .info-title {
        color: #333;
        font-size: 18px;
        font-weight: bold;
      }
      .info-detail {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #666;
        .note-total {
          margin: 8px 0;
        }
      }
    }
    .card-group {
      height: calc(100vh - 190px);
      overflow: auto;
      .card-item {
        font-size: 14px;
        margin-bottom: 16px;
        .card-head {
          margin-bottom: 16px;
          height: 24px;
          // display: flex;
          // justify-content: space-between;
          .tag {
            float: left;
          }
          .oprations {
            float: right;
            // display: flex;
            // justify-content: flex-end;
            margin-bottom: 8px;

            .el-link {
              margin-right: 16px;
            }
          }
        }

        .bookmark {
          margin-bottom: 16px;
          font-size: 16px;
          color: #333;
          .label {
            font-weight: bold;
          }

          .svg-icon {
            color: $theme-blue;
          }
        }
        .source {
          color: #999;
        }
      }
    }
  }
}

.el-pagination {
  padding: 10px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  // width: 100%;
  display: flex;
  justify-content: center;
}

.page {
  display: flex;
  justify-content: center;
}

::v-deep .el-tabs__header {
  margin: 0;
}
</style>
