<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane name="byFile">
        <span slot="label"><i class="el-icon-document"></i> 按文件分类</span>
        <NoteByFile ref="NoteByFile" :content="content" />
      </el-tab-pane>
      <el-tab-pane name="byTag">
        <span slot="label"><i class="el-icon-price-tag"></i> 按标签分类</span>
        <NoteByTag ref="NoteByTag" :content="content" />
      </el-tab-pane>
    </el-tabs>
    <div class="input">
      <el-input
        v-model="content"
        @keyup.native.enter="handleSearch"
        clearable
        placeholder="请输入关键词搜索原文或者笔记"
        size="mini"
        suffix-icon="el-icon-search"
      ></el-input>
    </div>
  </div>
</template>
<script>
import NoteByFile from "./components/noteByFile.vue";
import NoteByTag from "./components/noteByTag.vue";
export default {
  components: {
    NoteByFile,
    NoteByTag,
  },
  data() {
    return {
      activeName: "byFile",
      content: "",
    };
  },
  watch: {
    activeName(value) {
      if (value == "byFile") {
        this.$refs.NoteByFile.loadLeftList();
      } else {
        this.$refs.NoteByTag.loadLeftList();
      }
    },
  },
  methods: {
    handleSearch() {
      if (this.activeName == "byFile") {
        this.$refs.NoteByFile.loadLeftList();
      } else {
        this.$refs.NoteByTag.loadLeftList();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.app-containter {
  position: relative;
}
::v-deep .el-tab-pane {
  height: calc(100vh - 180px);
}

.input {
  width: 400px;
  position: absolute;
  right: 20px;
  top: 20px;
}
</style>
