<!-- 说明书更新记录 -->
<template>
  <div class="specification-update-record">
    <div class="screening-condition">
      <Select 
        style="margin-right: 12px;"
        width="200"
        :isReadOnly="true" 
        tipPlace="top" 
        caption="事件类型："
        @change="changeTablePage(1)"
        v-model="incidentType" 
        :selectdata="incidentList" 
        :placeholder="'请选择'"
      />
      <el-date-picker
        v-model="timeVal"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="changeTime">
      </el-date-picker>
    </div>
    <el-table :data="tableData" style="margin-bottom: 19px">
      <el-table-column property="time" label="日期"></el-table-column>
      <el-table-column property="evenType" label="事项类型"></el-table-column>
      <el-table-column property="objid" label="编号"></el-table-column>
      <el-table-column property="content" label="更新内容"></el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="curPage"
        :page-size="pageSize"
        :total="tatol"
        @current-change="changeTablePage">
      </el-pagination>
    </div>
  </div>
  
</template>

<script>
import { getSpecificaltionData } from '../../api/specificationUpdateRecord';
import moment from 'moment';
import _ from 'lodash';
export default {
  data () {
    return {
      incidentList: [
        {id: 0, name: '专维'},
        {id: 1, name: '维保'},
        {id: 2, name: '第三方检测'},
        {id: 3, name: '重点关注'},
      ], // 事件列表
      incidentType: '', // 事件类型
      timeVal: '', // 时间
      tableData: [], // 表数据
      curPage: 1, // 当前页码
      pageSize: 10, // 每页条数
      tatol: 0, // 数据总量
      startTime: 20171027000000, // 开始时间
      endTime: 20171028000000, // 结束事件
    }
  },

  components: {},

  computed: {},

  mounted() {
    this.getTableData();
  },

  methods: {
    /**
     * 获取表数据
     */
    getTableData() {
      let param = {
        page: this.curPage,
        size: this.pageSize,
        plazaId: 1000423,
        // changeDateStartDate: 20171027000000,
        // changeDateEndDate: 20171028000000,
      }
      if (this.startTime !== '') {
        param.changeDateStartDate = this.startTime;
      }
      if (this.endTime !== '') {
        param.changeDateEndDate = this.endTime;
      }
      if (this.incidentType !== '') {
        param.objtype = this.incidentType;
      }
      getSpecificaltionData('/data/rpt_change_record/query', param).then((res) => {
        const { result, data, count } = res;
        if (result === 'success') {
          this.tatol = count;
          _.map(data, (item) => {
            let text = _.find(this.incidentList, (o) => {return o.id === item.objtype}).name
            item.evenType = text;
            item.time = moment.unix(item.changedate / 1000).format('YYYY.MM.DD')
            return
          })
          this.tableData = data;
        }
      })
    },
    /**
     * 切换页码
     */
    changeTablePage(page) {
      this.curPage = page;
      this.getTableData();
    },
    /**
     * 切换时间
     */
    changeTime() {
      this.curPage = 1;
      if (this.timeVal) {
        this.startTime = moment.unix(new Date(this.timeVal[0]).getTime() / 1000).format('YYYYMMDDHHmmss');
        this.endTime = moment.unix(new Date(this.timeVal[1]).getTime() / 1000).format('YYYYMMDDHHmmss');
      } else {
        this.startTime = 20171027000000;
        this.endTime = 20171028000000;
      }
      this.getTableData();
    }
  }
}
</script>

<style lang='less' scoped>
.specification-update-record{
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 12px;
  padding-bottom: 20px;
  background: #fff;
  height: 100%;
  width: 100%;
  .screening-condition{
    margin-bottom: 13px;
    display: flex;
  }
  .page{
    display: flex;
    justify-content: flex-end;
  }
}
</style>