<!--校秤计量数据查询-->
<template>
  <div class="systemBase">
    <div>
      <div style="margin-top: 10px;  border-bottom: 1px solid #d5d5d5;">
              <el-form ref="searchData1" label-width="70px" :inline="true" :model="search" :rules="ruleValidateSearch">
                  <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="valueFlag" label="数据状态">
                     <el-select v-model="search.valueFlag" clearable filterable collapse-tags size="small" style="width:120px">
                        <el-option v-for="(item,index) in valueFlagItem" :key="index" :label="item.valueFlag"
                         :value="item.valueFlag">
                        </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item prop="strDate" label="开始时间">
                    <el-date-picker v-model="search.strDate" clearable type="date" style="width:160px" placeholder="选择日期" size="small"></el-date-picker>
                  </el-form-item>
                  <el-form-item prop="envDate" label="结束时间">
                     <el-date-picker v-model="search.envDate" clearable type="date" style="width:160px;" 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 style="border-right: 1px solid #d5d5d5">
               <div class="common-title-div">校秤计量数据
               </div>
               <div class="common-table-div">
                 <el-table 
                 v-loading="dataLoading" 
                 :row-class-name="tableRowClassName" 
                 ref="dataTable" 
                 highlight-current-row
                 border 
                 :height="tableHeight" 
                 :data="table.list"
                 @row-click="getDataList2"
                 :exchangeFilterMap="{'valueFlag':{'1':'校秤失败','2':'校秤成功', '3':'正在校秤'}}"
                 :icore-filter-flag="icoreFilterFlag">
                   <el-table-column type="index" label="序号" fixed="left" align="center"></el-table-column>
                   <!-- <el-table-column type="selection" width="55" fixed="left" align="center"></el-table-column> -->
                   <el-table-column sortable :show-overflow-tooltip="true" prop="calibrationMainNo" label="校秤编号" min-width="110" align="center"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" prop="baseSpotName" label="计量点" min-width="80" align="left"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" prop="calibrationTypeName" label="校秤类型" min-width="80" align="left"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" prop="calibrationNum" label="校秤有效次数" min-width="120" align="right"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" prop="calibrationActNum" label="实际有效次数" min-width="120" align="right"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" prop="valueFlag" label="状态" min-width="60" align="center">
                     <template slot-scope="scope">
                       <span v-if="scope.row.valueFlag == 1">校秤失败</span>
                       <span v-else-if="scope.row.valueFlag == 2">校秤成功</span>
                        <span v-else-if="scope.row.valueFlag == 3">正在校秤</span>
                     </template>
                   </el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" prop="baseContrastSpotName" min-width="200" label="校秤对比计量点" align="left"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" prop="baseSuccConSpotName" min-width="200" label="校秤成功对比点" align="left"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" prop="calibrationMainTime" min-width="160" label="校秤时间" 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>
               </div>
           </el-col>
       </el-row>
       <el-row>
           <el-col :span="24">
               <div class="common-title-div">校秤记录数据
               </div>
               <div class="common-table-div">
                 <el-table 
                 v-loading="dataLoading2" 
                 :row-class-name="tableRowClassName2" 
                 ref="dataTable2" 
                 highlight-current-row
                 border 
                 :height="tableHeight"
                 :data="table.list2"
                 :exchangeFilterMap="{'valueFlag':{'1':'成功','2':'失败'}}"
                 :icore-filter-flag="icoreFilterFlag"
                 @row-click="getImageList">
                   <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 :show-overflow-tooltip="true" prop="calibrationBranchNo" label="校秤计量编号" min-width="110" align="center"></el-table-column>
                   <el-table-column :show-overflow-tooltip="true" prop="calibrationMainNo" label="校秤编号" min-width="80" align="left"></el-table-column>
                   <el-table-column :show-overflow-tooltip="true" prop="baseSpotName" label="计量点" min-width="110" align="left"></el-table-column>
                   <el-table-column :show-overflow-tooltip="true" prop="spotTypeName" label="计量点类型" min-width="80" align="left"></el-table-column>
                   <el-table-column :show-overflow-tooltip="true" prop="calibrationTypeName" label="校秤类型" min-width="80" align="left"></el-table-column>
                   <el-table-column :show-overflow-tooltip="true" prop="calibrationWeight" label="校秤重量" min-width="80" align="right"></el-table-column>
                   <el-table-column :show-overflow-tooltip="true" prop="valueFlag" label="状态" min-width="60" align="center">
                     <template slot-scope="scope">
                       <span v-if="scope.row.valueFlag == 1">成功</span>
                       <span v-else-if="scope.row.valueFlag == 2">失败</span>
                     </template>
                   </el-table-column>
                   <el-table-column :show-overflow-tooltip="true" prop="calibrContrastBranchNo" label="对比校秤计量编号" min-width="120" align="left"></el-table-column>
                   <el-table-column :show-overflow-tooltip="true" prop="createManName" label="计量员" min-width="80" align="left"></el-table-column>
                   <el-table-column :show-overflow-tooltip="true" prop="createTime" label="计量时间" min-width="160" align="left"></el-table-column>
                 </el-table>
               </div>
               <div class="common-foot-style">
                 <el-pagination v-loading="dataLoading2" @size-change="pageSizeChange2" @current-change="pageCurrentChange2"
                   :current-page="page2.pageNum" :page-sizes="[100, 500, 1000]" :page-size="page2.pageSize" layout="total, sizes, prev, pager, next, jumper"
                   :total="page2.totalPage">
                 </el-pagination>
               </div>
           </el-col>
       </el-row>
       <el-row>
            <div id="getBigImage">
             <ul>
               <li v-for="(item,index) in urlImage" :key="index">
                 <img :src="item.image" width="97%" @click="imageChange"/> 
               </li>
             </ul>
            </div>
       </el-row>
    </div>
  </div>
</template>
<script>
import {formatDate} from '@/utils/util.js';
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
  export default {
    data () {
      return {
        dataLoading: false,
        dataLoading2: false,
        operateLoading: false,
        icoreFilterFlag: true,
        calibrationMain: "",
        page: {
          pageSize: 500,
          pageNum: 1,
          totalPage: 0
        },
        page2: {
          pageSize: 500,
          pageNum: 1,
          totalPage: 0
        },
        table: {
          list: [],
          list2: []
        },
        baseSpotNameItem: [],//计量点
        valueFlagItem: [
          {valueFlag:'校秤失败'},
          {valueFlag:'校秤成功'},
          {valueFlag:'正在校秤'}
        ],
        urlImage: [],
        multipleSelection: [],
        tableHeight: 0,
        search: {
          baseSpotNo: '',
          valueFlag: '',
          strDate: '',
          envDate: ''
        },
        ruleValidateSearch: {
           envDate: [{ 
             required: true, 
             validator: this.endTimeVerify, 
             trigger: 'blur' 
           }],
           strDate: [{
             required: true, 
             validator: this.strTimeVerify, 
             trigger: 'blur' 
           }]
        },
        activeMenu: ''
      }
    },
    components:{
      Viewer
    },
    created () {
      this.tableHeight = (window.innerHeight - 420)/2 > 200 ? (window.innerHeight - 420)/2 : 200
      this.activeMenu = window.top.localStorage.getItem('activeMenu')
    },
    mounted () {
      this.getDataList();
      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()
       }
     },
      handleSelectionChange (val) {
        this.multipleSelection = val;
      },
      pageSizeChange (size) {
        this.page.pageSize = size;
        this.getDataList();
      },
      pageCurrentChange (index) {
        this.page.pageNum = index;
        this.getDataList();
      },
      pageSizeChange2 (size) {
        this.page2.pageSize = size;
        this.getDataList2(this.calibrationMain);
      },
      pageCurrentChange2 (index) {
        this.page2.pageNum = index;
        this.getDataList2(this.calibrationMain);
      },
      searchDatas () {
        this.page.pageNum = 1;
        this.getDataList()
      },
      getDataList () {
        this.$refs['searchData1'].validate((valid) => {
          if (valid) {
              this.dataLoading = true;
              this.search.valueFlag1 = this.search.valueFlag === '校秤失败' ? 1: this.search.valueFlag === '校秤成功' ? 2 : this.search.valueFlag === '正在校秤' ? 3 :''
                 if(isNaN(this.search.strDate)&&!isNaN(Date.parse(this.search.strDate))){
              } else {
                this.search.strDate = formatDate (this.search.strDate, 'yyyy-MM-dd')
              }
              if(isNaN(this.search.envDate)&&!isNaN(Date.parse(this.search.envDate))) {
              } else {
                this.search.envDate = formatDate (this.search.envDate, 'yyyy-MM-dd')
              }
              this.axios.get('pass/systemBase/v1/meterworkcalibrationmains/' + '?pageNum=' + this.page.pageNum + '&pageSize=' + this.page.pageSize + '&baseSpotNo=' + this.search.baseSpotNo
               + '&valueFlag=' + this.search.valueFlag1 + '&calibrationMainTime1=' + this.search.strDate + '&calibrationMainTime2=' + this.search.envDate + '&spotTypeNo=001002003&spotTypeName=产线秤')
                .then(res => {
                  this.dataLoading = false;
                  this.table.list = res.data.list;
                  this.page.totalPage = res.data.total;
                  if (this.table.list.length > 0) {
                  this.$refs.dataTable.setCurrentRow(this.table.list[0])
                  this.getDataList2(this.table.list[0])  
                  }  
                }).catch(e => {
                  this.dataLoading = false;
                });
                }
           })
      },
      getDataList2 (row) {
        this.calibrationMain = row
         if (row === undefined || row === null) {
          this.urlImage = []
          return
        }
        this.dataLoading2 = true;
        this.axios.get('pass/systemBase/v1/meterworkcalibrationbranchs/getByMainNo' + '?pageNum=' + this.page2.pageNum + '&pageSize=' + this.page2.pageSize + '&calibrationMainNo=' + row.calibrationMainNo)
          .then(res => {
            this.dataLoading2 = false;
            this.table.list2 = res.data.list;
            this.page2.totalPage = res.data.total;
            if (this.table.list2.length > 0) {
                this.$refs.dataTable2.setCurrentRow(this.table.list2[0])
                this.getImageList(this.table.list[0])  
            }  
          }).catch(e => {
            this.dataLoading2 = false;
          });
      },
    imageChange(e){
            if (e.target.nodeName == 'IMG') {
                this.initImageTools();
            }
    },
    initImageTools() {
      const ViewerDom = document.getElementById('getBigImage');
      const viewer = new Viewer(ViewerDom, {
          url: 'src',  //设置大图片的 url
          show: function (){
              viewer.update();
          },
          hide:function(){ //在图片消失的时候销毁viewer
              viewer.destroy()
          }
      });
    },
      getImageList (row) {
        this.urlImage = []
        if (row === undefined || row === null) {
          this.urlImage = []
          return
        }
        this.axios.get('pass/systemBase/v1/meterworkimages/getUrl' + '?actualFirstNo=' + row.calibrationBranchNo)
        .then(res => {
          if (res.data !== null && res.data.length !== 0) {
             const imageList = res.data
             for (let i = 0; i < imageList.length; i++) {
              if (this.urlImage.length < res.data.length) {
               this.urlImage.push({image:''})
               }
               this.urlImage[i].image = '/weblib' + imageList[i]
             }
          }
        });
      },
      tableRowClassName ({
        row,
        rowIndex
      }) {
        if (row.validFlag !== '0') {
          return 'error-row2';
        }
        return '';
      },
      tableRowClassName2 ({
        row,
        rowIndex
      }) {},
      getBaseSpotNameItem () {
        this.axios.get('pass/systemBase/v1/meterbasespotinfos/noPage'+ '?validFlag=1')
          .then(res => {
            this.baseSpotNameItem = res.data;
          })
      }
    }
  }
</script>

<style scoped>

</style>