<template>
  <div class="wrap">
    <div class="forms">
      <div class="item">
        <span class="label">出版时间：</span>
        <el-date-picker
          style="width: 300px"
          v-model="form.publicationTime"
          type="year"
          placeholder="请选择出版时间"
          format="yyyy"
          value-format="yyyy"
          clearable
          @change="initData">
        </el-date-picker>
      </div>
      <div class="search">
        <input type="text" placeholder="请输入著作名称/出版社名称/编写人员" v-model="form.monographQueryKeyWord" clearable>
      </div>
    </div>

    <el-table :data="list" class="patent-table" ref="table" stripe header-align="center">
      <el-table-column prop="title" label="著作名称" align="center" min-width="150"></el-table-column>
      <el-table-column prop="publishingHouse" label="出版社" align="center" min-width="150"></el-table-column>
      <el-table-column prop="writersAndEditors" label="编写人员" align="center" min-width="150"></el-table-column>
      <el-table-column prop="publicationYear" label="出版时间" align="center" min-width="150"></el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
import Util from '@/libs/util';
import ColumnConst from '@/const/column'
export default {
  props: ['id'],
  data() {
    return {
      patentClasses: ColumnConst.patentClasses,
      searchTimer: null,
      form: {
        monographQueryKeyWord: '',
        publicationTime: ''
      },
      classifications: [],
      list: [],
      page: 1,
      pageSize: 10,
      total: 0,
    }
  },
  watch: {
    id() {
      this.id && this.initData()
    },
    'form.monographQueryKeyWord': function (val) {
      clearTimeout(this.searchTimer);
      this.searchTimer = setTimeout(() => {
        this.initData();
      }, 500);
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    // 查询文章列表
    getArticle() {
      this.id && this.$post(this.api.newlyPublishedArticles, {
        siteId: this.$route.query.siteId || this.$store.state.content.site,
        columnIds: this.id,
        pageNum: this.page,
        pageSize: this.pageSize,
        ...this.form
      })
        .then(({ data }) => {
          this.list = Util.removeTag(data.records);
          this.total = +data.total;
        })
        .catch((res) => { });
    },
    initData() {
      this.page = 1
      this.getArticle()
    },
    currentChange(val) {
      this.page = val
      this.getData()
    },
  }
};
</script>

<style lang="scss" scoped>
@import "../../styles/page/publication.scss";
/deep/.patent-table {
  thead tr, thead th {
    color: #fff;
    background-color: #1583FF;
  }
}
</style>