<template>
  <div class="searchWindow">
    <el-input
      placeholder="请输入内容"
      v-model="searchTypeValue"
      class="input-with-select"
      @keyup.enter.native="search"
      style="
        width: 400px;
        margin-left: 860px;
        margin-top: -30px;
        margin-bottom: 20px;
      "
    >
      <el-select
        v-model="searchType"
        slot="prepend"
        placeholder="请选择"
        style="width: 120px"
      >
        <el-option label="全部文档" value=""></el-option>
        <el-option label="外部资源" value="s_type_kbase"></el-option>
        <el-option label="报刊" value="s_type_journal"></el-option>
        <el-option label="入库文档" value="s_type_digit"></el-option>
        <el-option label="分享文档" value="s_type_creation"></el-option>
      </el-select>
      <el-button
        slot="append"
        icon="el-icon-search"
        @click="search"
      ></el-button>
    </el-input>

    <el-table
      ref="compareTable"
      v-loading="tableLoading"
      @current-change="compareTableCurrentChange"
      :data="compareTableData"
      highlight-current-row
      border
      class="compareTableData"
      header-row-class-name="compareTableHeader"
      style="width: 100%"
    >
      <el-table-column type="index" align="center" width="50" label="行号">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="name" label="篇名">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="author" label="作者">
      </el-table-column>
      <el-table-column
        width="100"
        align="center"
        show-overflow-tooltip
        :formatter="docSTypeFormatter"
        prop="docSType"
        label="来源"
      >
      </el-table-column>
      <el-table-column
        align="center"
        width="150"
        prop="createTime"
        label="时间"
      >
      </el-table-column>
    </el-table>

    <el-pagination
      class="pagination"
      @current-change="handleCurrentChange"
      :current-page="page.index"
      :page-size="page.size"
      layout="total, prev, pager, next, jumper"
      :total="page.total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { search } from "@/api/home";

export default {
  name: "compareSearch",
  data() {
    return {
      tableLoading: false,
      searchType: "",
      searchTypeValue: "",
      page: {
        index: 1,
        size: 10,
        total: 0,
        count: 0,
      },
      compareTableData: [],
    };
  },
  watch: {
    "$parent.$parent.CompareSearch"(c, o) {
      if (c === false) {
        this.$refs["compareTable"].setCurrentRow();
      }
    },
  },
  methods: {
    compareTableCurrentChange(e) {
      this.$emit("changeRow", e);
    },
    handleCurrentChange(val) {
      this.page.index = val;
      this.search(false);
    },
    search(flag = true) {
      this.tableLoading = true;
      if (flag) {
        this.page.index = 1;
      }
      let p = {
        docSType: this.searchType,
        keyword: this.searchTypeValue,
        pageNo: this.page.index,
        pageSize: this.page.size,
      };
      search(p).then((res) => {
        if (res.code === 200) {
          this.compareTableData = res.result.records;
          this.tableLoading = false;
          this.page.total = parseInt(res.result.totalElements);
          this.page.count = parseInt(res.result.totalPages);
        }
      });
    },
    docSTypeFormatter(row) {
      switch (row.docSType) {
        case "s_type_kbase":
          return "外部资源";
        case "s_type_journal":
          return "报刊";
        case "s_type_digit":
          return "入库文档";
        case "s_type_creation":
          return "分享文档";
      }
    },
  },
  mounted() {
    this.search();
  },
};
</script>

<style lang="scss">
.compareTableData {
  .compareTableHeader {
    & > th {
      background-color: #f5f7fa !important;
      text-align: center !important;
    }
  }

  .current-row {
    & > td {
      background-color: #b5dbff !important;
    }
  }
}
</style>

<style lang="scss" scoped>
.pagination {
  margin: 30px 0 0 0;
  text-align: center;
}
</style>
