<template>
  <div class="wrap">
    <div class="forms">
      <div class="item">
        <span class="label">{{$t('column.patentClassification')}}：</span>
        <el-select v-model="form.patentClassId"
                   clearable
                   @change="initData"
                   :placeholder="$t('column.Pleaseselect')">
          <el-option v-for="item in patentClasses"
                     :key="item.id"
                     :label="item.name === '发明专利' ? $t('column.inventionpatent') : $t('column.practicalAppearance')"
                     :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="item">
        <span class="label">{{$t('column.applicationDate')}}：</span>
        <el-date-picker v-model="form.applicationDate"
                        type="date"
                        :placeholder="$t('column.applicationDate')"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        @change="initData">
        </el-date-picker>
      </div>
      <div class="search">
        <input type="text"
               :placeholder="$t('column.pleaseEnterPatentOfficer')"
               v-model="form.patentQueryKeyWord"
               clearable>
      </div>
    </div>

    <el-table :data="list"
              class="patent-table"
              ref="table"
              stripe
              header-align="center"
              @row-click="rowClick">
      <el-table-column prop="title"
                       :label="$t('column.patentName')"
                       align="center"
                       min-width="150"></el-table-column>
      <el-table-column :label="$t('column.patentClassification')"
                       align="center"
                       min-width="150">
        <template slot-scope="scope">
          {{ scope.row.patentClassId ? patentClasses.find(e => e.id == scope.row.patentClassId).name === '发明专利' ? $t('column.inventionpatent') : $t('column.practicalAppearance') : '' }}
        </template>
      </el-table-column>
      <el-table-column prop="applicationNumber"
                       :label="$t('column.ApplicationNumber')"
                       align="center"
                       min-width="150"></el-table-column>
      <el-table-column prop="applicationDate"
                       :label="$t('column.applicationDate')"
                       align="center"
                       min-width="150"></el-table-column>
      <el-table-column prop="dateOfAuthorization"
                       :label="$t('column.AuthorizationDate')"
                       align="center"
                       min-width="150"></el-table-column>
      <el-table-column prop="inventor"
                       :label="$t('column.inventor')"
                       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: {
        patentQueryKeyWord: '',
        patentClassId: '',
        applicationDate: ''
      },
      classifications: [],
      list: [],
      page: 1,
      pageSize: 10,
      total: 0,
    }
  },
  watch: {
    id () {
      this.id && this.initData()
    },
    'form.patentQueryKeyWord': function (val) {
      clearTimeout(this.searchTimer);
      this.searchTimer = setTimeout(() => {
        this.initData();
      }, 500);
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    // 查询文章列表
    getArticle () {
      this.id && this.$post(this.api.newlyPublishedArticles, Util.rsa({
        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()
    },
    // 单行点击回调
    rowClick (row) {
      this.$parent.toArtice(row)
    }
  }
};
</script>

<style lang="scss" scoped>
@import '../../styles/page/publication.scss';
/deep/.patent-table {
    thead tr,
    thead th {
        color: #fff;
        background-color: #1583ff;
    }
    .el-table__row {
        cursor: pointer;
    }
}
@media (max-width: 640px) {
    .forms {
        flex-direction: column;
        align-items: flex-start;
        .item {
            display: flex;
            margin-bottom: 20px;
            margin-right: 0;
        }
        .search {
            width: 100%;
        }
    }
}
</style>