<template>
  <div class="add-note">
    <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="never"
      >
        <div class="tag">
          <el-tag type="warning">{{ item.tag }}</el-tag>
          <el-link>更多</el-link>
        </div>
        <div class="origin oneRow">
          <i class="el-icon-document"></i>
          原文：江湖一窗隔——读林青霞写自己的故事《窗里窗外》的原文
        </div>
        <div class="note twoRow">
          <i class="el-icon-edit"></i>
          笔记：{{ item.bookmarkContent }}
        </div>
        <div class="buttons">
          <el-button type="primary" size="mini">引入笔记</el-button>
          <el-button type="primary" size="mini" plain>引入原文</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { noteList, tagList } from "./mockData";
export default {
  data() {
    return {
      //当前选中的标签
      tagModelValue: "",
      //笔记搜索
      searchValue: "",
      noteList,
      tagList,
    };
  },
};
</script>

<style lang="scss">
// .add-note {
//   padding: 20px;
// }
.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>
