<!--计量终端操作日志-->
<template>
  <div class="systemBase">
    <div>
      <div class="common-title-div">查询区
      </div>
      <div style="margin-top: 10px;  border-bottom: 1px solid #d5d5d5;">
              <el-form ref="searchData" :inline="true" :model="search"  :rules="ruleValidateSearch">
                  <el-form-item label-width="70px" prop="baseSpotName" label="计量点名称">
                    <el-input v-model="search.baseSpotName" clearable size="small" style="width:120px" placeholder="请输入"></el-input>
                  </el-form-item>
                  <el-form-item prop="packageNo" label="包号">
                    <el-input v-model="search.packageNo" clearable size="small" style="width:120px" placeholder="请输入"></el-input>
                  </el-form-item>
                  <el-form-item prop="strDate" label="开始时间">
                    <el-date-picker v-model="search.strDate" clearable type="datetime" style="width:180px" placeholder="选择日期" size="small"></el-date-picker>
                  </el-form-item>
                  <el-form-item prop="envDate" label="结束时间">
                     <el-date-picker v-model="search.envDate" clearable type="datetime" style="width:180px;" placeholder="选择日期" size="small"></el-date-picker>
                  </el-form-item>
                  <el-form-item label-width="20px">
                  <el-button icon="el-icon-search" type="primary" size="mini" @click="searchDatas" v-loading.fullscreen.lock="operateLoading" v-privilege="activeMenu + 'SEARCH'">查询</el-button>
                  </el-form-item>
                  <el-form-item label-width="20px">
                  <el-button icon="el-icon-search" type="primary" size="mini" @click="searchHistoryData" v-loading.fullscreen.lock="operateLoading" v-privilege="activeMenu + 'HISTORYSEARCH'">历史查询</el-button>
                  </el-form-item>
              </el-form>
       </div>
       <el-row>
           <el-col :span="24">
               <div class="common-title-div">操作明细
               </div>
               <div class="common-table-div">
                 <el-table 
                   v-loading="dataLoading"
                   ref="dataTable" 
                   highlight-current-row
                   border 
                   :height="tableHeight" 
                   :icore-filter-flag="icoreFilterFlag"
                   :data="table.list">
                   <el-table-column type="index" label="序号" fixed="left" align="center"></el-table-column>
                   <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                   <el-table-column sortable :show-overflow-tooltip="true" prop="baseSpotNo" label="计量点编号" min-width="110" align="center"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" prop="baseSpotName" label="计量点名称" min-width="110" align="left"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" prop="packageNo" label="包号" min-width="110" align="left"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" prop="operationContent" label="操作信息" min-width="160" align="left"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" prop="operationTime" label="操作时间" min-width="160" align="left"></el-table-column>
                 </el-table>
               </div>
               <div class="common-foot-style">
                 <el-pagination v-loading="dataLoading" @size-change="pageSizeChange" @current-change="pageCurrentChange"
                   :current-page="page.pageNum" :page-sizes="[100, 500, 1000]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
                   :total="page.totalPage">
                 </el-pagination>
               </div>
           </el-col>
       </el-row>
    </div>
  </div>
</template>
<script>
import {formatDate} from '@/utils/util.js';
  export default {
    data () {
      return {
        dataLoading: false,
        operateLoading: false,
        icoreFilterFlag: true,
         page: {
          pageSize: 500,
          pageNum: 1,
          totalPage: 0
        },
        tableHeight: 0,
        table: {
          list: []
        },
        search: {
          baseSpotName: '',
          packageNo: '',
          strDate: '',
          envDate: ''
        },
        ruleValidateSearch: {
          envDate: [{ 
             required: true, 
             validator: this.endTimeVerify, 
             trigger: 'blur' 
           }],
           strDate: [{
             required: true, 
             validator: this.strTimeVerify, 
             trigger: 'blur' 
           }]
        },
        activeMenu: ''
      }
    },
    created () {
      this.tableHeight = (window.innerHeight - 220) > 400 ? window.innerHeight - 220 : 400
      this.activeMenu = window.top.localStorage.getItem('activeMenu')
    },
    mounted () {
      this.searchData();
    },
    methods: {
       endTimeVerify (rule, value, callback) {
         if (this.search.strDate && !this.search.envDate) {
          callback(new Error('结束时间不能为空！'));
        } else if(this.search.envDate){
	          if(Date.parse(this.search.envDate) > Date.parse(this.search.strDate)){
	            callback();
	          }else{
	            callback(new Error('结束时间不得早于开始时间！'));
	          }
	        }else{
	          callback();
          }
      },
      strTimeVerify (rule, value, callback) {
        if (this.search.envDate && !this.search.strDate) {
          callback(new Error('开始时间不能为空！'));
        } else {
          callback()
        }
      },
      searchDatas () {
        this.page.pageNum = 1;
        this.searchData()
      },
      searchData () {
        this.$refs['searchData'].validate((valid) => {
           if (valid) {
               this.dataLoading = true;
               this.search.strDate = formatDate (this.search.strDate, 'yyyy-MM-dd HH:mm:ss')
               this.search.envDate = formatDate (this.search.envDate, 'yyyy-MM-dd HH:mm:ss')
               this.axios.get('pass/systemBase/v1/meterstoragemonitornotes/' + '?pageNum=' + this.page.pageNum + '&pageSize=' + this.page.pageSize + '&baseSpotName=' + this.search.baseSpotName
               + '&packageNo=' + this.search.packageNo
               + '&operationTime1=' + this.search.strDate + '&operationTime2=' + this.search.envDate)
                 .then(res => {
                   this.dataLoading = false;
                   this.table.list = res.data.list;
                   this.page.totalPage = res.data.total;
                 }).catch(e => {
                   this.dataLoading = false;
                 });
             }
         })
      },
      searchHistoryData () {
         this.$refs['searchData'].validate((valid) => {
           if (valid) {
               this.dataLoading = true;
               this.search.strDate = formatDate (this.search.strDate, 'yyyy-MM-dd HH:mm:ss')
               this.search.envDate = formatDate (this.search.envDate, 'yyyy-MM-dd HH:mm:ss')
               this.axios.get('pass/systemBase/v1/meterstoragemonitornotes/selectView' + '?pageNum=' + this.page.pageNum + '&pageSize=' + this.page.pageSize + '&baseSpotName=' + this.search.baseSpotName
               + '&packageNo=' + this.search.packageNo
               + '&operationTime1=' + this.search.strDate + '&operationTime2=' + this.search.envDate)
                 .then(res => {
                   this.dataLoading = false;
                   this.table.list = res.data.list;
                   this.page.totalPage = res.data.total;
                 }).catch(e => {
                   this.dataLoading = false;
                 });
             }
         })
      },
      pageSizeChange (size) {
        this.page.pageSize = size;
        this.searchData();
      },
      pageCurrentChange (index) {
        this.page.pageNum = index;
        this.searchData();
      }
    }
  }
</script>

<style scoped>

</style>