<!--计量实绩数据核查询-->
<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="productName" label="产品名称">
                    <el-input v-model="search.productName" clearable size="small" style="width:120px" placeholder="请输入"></el-input>
                  </el-form-item>
                  <el-form-item prop="gradeName" label="牌号">
                    <el-input v-model="search.gradeName" 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="batchNo" label="批号">
                    <el-input v-model="search.batchNo" 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="searchData" v-loading.fullscreen.lock="operateLoading" v-privilege="activeMenu + 'SEARCH'">查询</el-button>
                  </el-form-item>
                   <el-form-item label-width="20px">
                   <el-button size="mini" type="primary" icon="el-icon-check" @click="checkData"
                        v-loading.fullscreen.lock="operateLoading" v-privilege="activeMenu + 'CONFIRM'">确认</el-button>
                   </el-form-item>
                    <el-form-item label-width="20px">
                      <el-button size="mini" type="danger" plain icon="el-icon-remove-outline" @click="unCheckData"
                        v-loading.fullscreen.lock="operateLoading" v-privilege="activeMenu + 'CANCEL'">取消</el-button>
                    </el-form-item>
              </el-form>
       </div>
       <el-row>
           <el-col :span="4">
               <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>
           </el-col>
           <el-col :span="20">
               <div class="common-table-div">
                 <el-table 
                 v-loading="dataLoading" 
                 @row-click="getImageList" 
                 ref="dataTable" 
                 highlight-current-row
                   border 
                   :height="tableHeight" 
                   @current-change = 'getCurrentData'
                   :icore-filter-flag="icoreFilterFlag"
                   :data="table.list"
                   :exchangeFilterMap="{'weightType':{'0':'单重','1':'组重'},
                   'valueFlag':{'0':'无效','1':'未组','2':'已组'}}">
                   <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" min-width="120px" prop="actualNo" label="计量编号" align="center"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="productName" label="产品名称" align="left"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="gradeName" label="牌号" align="left"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="standardName" label="标准" align="left"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="batchNo" label="批号" align="left"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="packageNo" label="包号" align="left"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="blockNum" label="块数" align="right"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="productDate" label="生产日期" align="left"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="sealNo" label="铅封号" align="left"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="actualWeight" label="主秤重量" align="left"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="referWeight" label="副秤重量" align="left"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="grossWeight" label="毛重" align="left"></el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="weightType" label="重量类型" align="left">
                     <template slot-scope="scope">
                       <span v-if="scope.row.weightType == 0">单重</span>
                       <span v-else-if="scope.row.weightType == 1">组重</span>
                     </template>
                   </el-table-column>
                    <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="valueFlag" label="状态" align="left">
                     <template slot-scope="scope">
                       <span v-if="scope.row.valueFlag == 0">无效</span>
                       <span v-else-if="scope.row.valueFlag == 1">未组</span>
                       <span v-else-if="scope.row.valueFlag == 2">已组</span>
                     </template>
                   </el-table-column>
                   <el-table-column sortable :show-overflow-tooltip="true" min-width="120px" prop="memo" 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>
           </el-col>
       </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,
        operateLoading: false,
        icoreFilterFlag: true,
        table: {
          list: []
        },
        urlImage: [],
        page: {
          pageSize: 500,
          pageNum: 1,
          totalPage: 0
        },
        tableHeight: 0,
        currentRow: {},
        search: {
          productName: '',
          gradeName: '',
          packageNo: '',
          batchNo: '',
          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 - 220) > 400 ? window.innerHeight - 220 : 400
      this.activeMenu = window.top.localStorage.getItem('activeMenu')
    },
    mounted () {
      this.getDataList();
    },
    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()
        }
      },
      getCurrentData (val) {
        this.currentRow = val
      },
      pageSizeChange (size) {
        this.page.pageSize = size;
        this.getDataList();
      },
      pageCurrentChange (index) {
        this.page.pageNum = index;
        this.getDataList();
      },
      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 = []
        this.axios.get('pass/systemBase/v1/meterworkimages/getUrl' + '?actualFirstNo=' + row.actualNo)
        .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]
             }
          }
        })
      },
      checkData () {
        this.axios.post('pass/systemBase/v1/meterworkstorageactuals/audit', this.currentRow, {individualType: 'json'}).then(res=>{
           if (res.code == '0' || res.code == '200') {
              this.$message.success('确认成功');
              this.getDataList ();
           }  else {
            this.$message.error(res.message)
           }
           }).catch(e => {
            this.$message.error(e.message)
          })
      },
      unCheckData () {
        this.axios.post('pass/systemBase/v1/meterworkstorageactuals/unaudit', this.currentRow, {individualType: 'json'}).then(res=>{
           if (res.code == '0' || res.code == '200') {
              this.$message.success('取消成功');
              this.getDataList ();
           }  else {
            this.$message.error(res.message)
           }
           }).catch(e => {
            this.$message.error(e.message)
          })
      },
      getDataList () {
        this.dataLoading = true;
        this.axios.get('pass/systemBase/v1/meterworkstorageactuals/' + '?pageNum=' + this.page.pageNum + '&pageSize=' + this.page.pageSize)
          .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.getImageList(this.table.list[0])
            }  
          }).catch(e => {
            this.dataLoading = false;
          });
      },
      searchData () {
         this.$refs['searchData'].validate((valid) => {
           if (valid) {
               this.dataLoading = true;
               this.urlImage = []
               this.page.pageNum = 1;
               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/meterworkstorageactuals/selectView' + '?pageNum=' + this.page.pageNum + '&pageSize=' + this.page.pageSize + '&productName=' + this.search.productName
               + '&gradeName=' + this.search.gradeName + '&packageNo=' + this.search.packageNo + '&batchNo=' + this.search.batchNo
               + '&productDate1=' + this.search.strDate + '&productDate2=' + this.search.envDate)
                 .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.getImageList(this.table.list[0])
                   }  
                 }).catch(e => {
                   this.dataLoading = false;
                 });
             }
         })
      }
    }
  }
</script>

<style scoped>
.el-col{
    border: 1px solid transparent;
}
</style>
