<!--终端操作日志管理-->
<template>
  <div class="systemBase">
    <div>
      <div style="margin-top: 10px;  border-bottom: 1px solid #d5d5d5;">
             <el-form ref="searchData1" :inline="true" :model="search"  :rules="ruleValidateSearch">
                 <el-form-item  label-width="80px" >
                      <div style="font-size: 16px; padding: 0px 20px;">终端操作日志管理
                      </div>
                  </el-form-item>
                  <el-form-item prop="baseSpotNo" label="计量点">
                    <el-select v-model="search.baseSpotNo"  clearable filterable collapse-tags size="small" style="width:120px">
                        <el-option v-for="(item,index) in baseSpotNameItem" :key="index" :label="item.baseSpotName"
                         :value="item.baseSpotNo">
                        </el-option>
                    </el-select>
                  </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>
       </div>
       <el-row>
           <el-col :span="24">
               <div class="common-table-div">
                 <el-table 
                 v-loading="dataLoading" 
                 ref="dataTable" 
                 highlight-current-row
                 border :height="tableHeight" 
                 @selection-change="handleSelectionChange" 
                 :data="table.list"
                 :icore-filter-flag="icoreFilterFlag"
                 :exchangeFilterMap="{'meterNoteSource':{'0':'智能计量终端','1':'自助取码终端', '2':'计量监控终端','3':'微信小程序', '4':'远程计量终端'}}">
                  <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="noteNo" 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="operationContent" label="操作内容" min-width="300" 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-column sortable :show-overflow-tooltip="true" prop="carNo" label="车号" width="110" min-width="120" align="left"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" prop="meterManName" label="计量员" min-width="110" align="left"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" prop="meterNoteSource" label="日志来源" min-width="110" align="left">
                      <template slot-scope="scope">
                          <span v-if="scope.row.meterNoteSource == 0">智能计量终端</span>
                          <span v-else-if="scope.row.meterNoteSource == 1">自助取码终端</span>
                          <span v-else-if="scope.row.meterNoteSource == 2">计量监控终端</span>
                          <span v-else-if="scope.row.meterNoteSource == 3">微信小程序</span>
                          <span v-else-if="scope.row.meterNoteSource == 4">远程计量终端</span>
                      </template>
                   </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,
        baseSpotNameItem: [],
        page: {
          pageSize: 500,
          pageNum: 1,
          totalPage: 0
        },
        table: {
          list: []
        },
        multipleSelection: [],
        icoreFilterFlag:true,
        tableHeight: 0,
        search: {
          baseSpotNo: '',
          strDate: formatDate(new Date(), 'yyyy-MM-dd') + ' 00:00:00',
          envDate: formatDate(new Date(), 'yyyy-MM-dd') + ' 23:59:59'
        },
        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.getDataList();
      this.searchDatas();
      this.getBaseSpotNameItem()
    },
    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['searchData1'].validate((valid) => {
          if (valid) {
           this.dataLoading = true;
           this.axios.get('pass/systemBase/v1/metermonitornotes/selectView' + '?pageNum=' + this.page.pageNum + '&pageSize=' + this.page.pageSize + '&baseSpotNo=' + this.search.baseSpotNo
           + '&operationTime1=' + this.search.strDate + '&operationTime2=' + this.search.envDate + '&meterNoteSource=0' + '&spotTypeNo=001002001')
             .then(res => {
               this.dataLoading = false;
               this.table.list = res.data.list;
               this.page.totalPage = res.data.total;
             }).catch(e => {
               this.dataLoading = false;
             });
             }
        })
      },
      handleSelectionChange (val) {
        this.multipleSelection = val;
      },
      getTableHeight (dom) {
        return (window.innerHeight - dom.offsetTop);
      },
      pageSizeChange (size) {
        this.page.pageSize = size;
        this.searchData();
      },

      pageCurrentChange (index) {
        this.page.pageNum = index;
        this.searchData();
      },
      getDataList () {
        this.dataLoading = true;
        this.axios.get('pass/systemBase/v1/metermonitornotes/selectByType' + '?pageNum=' + this.page.pageNum + '&pageSize=' + this.page.pageSize + '&meterNoteSource=0' + '&spotTypeNo=001002001')
          .then(res => {
            this.dataLoading = false;
            this.table.list = res.data.list;
            this.page.totalPage = res.data.total;
          }).catch(e => {
            this.dataLoading = false;
          });
      },
      // tableRowClassName ({
      //   row,
      //   rowIndex
      // }) {
      //   if (row.validFlag !== '0') {
      //     return 'error-row2';
      //   }
      //   return '';
      // },
      getBaseSpotNameItem () {
        this.axios.get('pass/systemBase/v1/meterbasespotinfos/noPage'+ '?validFlag=1')
          .then(res => {
            this.baseSpotNameItem = res.data;
          })
      }
    }
  }
</script>
<style scoped>
</style>