<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="searchValue"
        clearable
      ></el-input>
      <el-select
        v-model="tagModelValue"
        placeholder="请选择标签"
        size="mini"
        class="select"
        clearable
      >
        <el-option
          v-for="item in tagList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <!-- {{ noteList }} -->
    <div class="total">共{{ noteList.length }}条数据</div>
    <div class="note-list">
      <el-card
        class="note-item"
        v-for="(item, index) in noteList"
        :key="index"
        shadow="hover"
      >
        <div class="tag">
          <el-tag type="warning">{{ item.tag }}</el-tag>

          <el-dropdown>
            <el-link>更多</el-link>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(dropItem, i) in dropdownList"
                @click.native="handleClickDropdown(dropItem.value, item)"
                >{{ dropItem.label }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="origin oneRow">
          <i class="el-icon-document"></i>
          原文：{{ item.bookmarkContent }}
        </div>
        <div class="note twoRow">
          <i class="el-icon-edit"></i>
          笔记：{{ item.noteContent }}
        </div>
        <div class="buttons">
          <el-button
            type="primary"
            size="mini"
            @click="handleInsertNote(item.noteContent)"
            >引入笔记</el-button
          >
          <el-button
            type="primary"
            size="mini"
            plain
            @click="handleInsertOrigin(item.bookmarkContent)"
            >引入原文</el-button
          >
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { noteList, tagList } from "./mockData";
import { getBookMarkList } from "@/api/doc/bookMark";
export default {
  data() {
    return {
      //当前选中的标签
      tagModelValue: "",
      //笔记搜索
      searchValue: "",
      loading: false,
      dropdownList: [
        {
          label: "查看原文",
          value: "view",
        },
        {
          label: "编辑笔记",
          value: "edit",
        },
        {
          label: "删除笔记",
          value: "delete",
        },
      ],
      noteList,
      tagList,
      // noteList: [], //笔记列表
      // tagList: [],
    };
  },
  mounted() {
    // this.loadData()
  },
  methods: {
    async loadData() {
      this.loading = true;
      let res = await getBookMarkList();
      this.loading = false;
      if (res.code == 200) {
        this.noteList = 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":
          break;
        case "edit":
          this.handleOpenAddUpdateDialog(item)
          break;
        case "delete":
          break;
      }
    },
    
    // 打开编辑笔记对话框
    handleOpenAddUpdateDialog(item){
      this.$emit('handleOpenAddUpdateDialog',item)
    }
  },
};
</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-style: 14px;
  color: #999;
}
.note-list {
  height: calc(100vh - 200px);
  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;
      }
    }
  }
}
</style>
