<template>
    <div class="systemBase">
        <div style="margin-top: 10px;  border-bottom: 1px solid #d5d5d5;">
             <el-form :inline="true">
                  <el-form-item>
                      <div style="font-size: 16px; padding: 0px 20px;">业务二维码生成
                      </div>
                  </el-form-item>
                  <el-form-item label-width="20px">
                  <el-button icon="el-icon-printer" type="primary" size="mini"
                  @click="printQRCode" v-privilege="activeMenu + 'PRINT'">打印二维码</el-button>
                  </el-form-item>
                   <el-form-item label-width="20px">
                  <el-button icon="el-icon-picture" type="primary" size="mini"
                  @click="generateQRCode" v-privilege="activeMenu + 'GENERATE'">生成二维码</el-button>
                  </el-form-item>
             </el-form>
        </div>
        <el-row>
            <el-col :span="8">
               <div style="border-right: 1px solid #d5d5d5">
                 <div class="common-title-div">
                    <el-form :inline="true" :model="search"  @submit.native.prevent>
                      <el-form-item>
                          <div style="font-size: 16px; padding: 0px 20px;">物料信息
                          </div>
                      </el-form-item>
                      <el-form-item prop="matterName" label="物料名称">
                        <el-input v-model="search.matterName" clearable size="small"  style="width:150px" placeholder="请输入" @keyup.enter.native="getDataList"></el-input>
                      </el-form-item>
                      <el-form-item label-width="20px">
                         <el-button icon="el-icon-search" type="primary" size="mini" @click="getDataList" v-loading.fullscreen.lock="operateLoading"  v-privilege="activeMenu + 'SEARCH'">查询</el-button>
                       </el-form-item>
                    </el-form>
                 </div>
               </div>
                 <div class="common-table-div">
                    <el-table ref="dataTable"  
                      @selection-change="handleSelectionChange" 
                      @row-click="rowChange" 
                      border 
                      :height="tableHeight" 
                      highlight-current-row
                      :data="table.list"
                      :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" min-width="100px" prop="meterCode" label="计量码" align="center"></el-table-column>
                      <el-table-column sortable :show-overflow-tooltip="true" min-width="160px" prop="matterName" label="物料名称" align="center"></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-col :span="8">
               <div style="border-right: 1px solid #d5d5d5">
                 <div class="common-title-div">
                    <el-form :inline="true" :model="search"  @submit.native.prevent>
                      <el-form-item>
                          <div style="font-size: 16px; padding: 0px 20px;">发货单位
                          </div>
                      </el-form-item>
                      <el-form-item prop="loadPointName" label="发货单位">
                        <el-input v-model="search.loadPointName" clearable size="small"  style="width:150px" placeholder="请输入" @keyup.enter.native="getDataList2"></el-input>
                      </el-form-item>
                      <el-form-item label-width="20px">
                         <el-button icon="el-icon-search" type="primary" size="mini" @click="getDataList2" v-loading.fullscreen.lock="operateLoading"  v-privilege="activeMenu + 'SEARCH2'">查询</el-button>
                       </el-form-item>
                    </el-form>
                 </div>
               </div>
                 <div class="common-table-div">
                    <el-table ref="dataTable2"  
                      @selection-change="handleSelectionChange2" 
                      @row-click="rowChange2" 
                      border 
                      :height="tableHeight" 
                      highlight-current-row
                      :data="table.list2"
                      :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" min-width="160px" prop="meterCode" label="计量码" align="center"></el-table-column>
                      <el-table-column sortable :show-overflow-tooltip="true" min-width="160px" prop="loadPointName" label="发货单位名称" align="center"></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-col :span="8">
               <div style="border-right: 1px solid #d5d5d5">
                 <div class="common-title-div">
                    <el-form :inline="true" :model="search"  @submit.native.prevent>
                       <el-form-item>
                          <div style="font-size: 16px; padding: 0px 20px;">收货单位
                          </div>
                      </el-form-item>
                      <el-form-item prop="loadPointName2" label="收货单位">
                        <el-input v-model="search.loadPointName2" clearable size="small"  style="width:150px" placeholder="请输入" @keyup.enter.native="getDataList3"></el-input>
                      </el-form-item>
                      <el-form-item label-width="20px">
                         <el-button icon="el-icon-search" type="primary" size="mini" @click="getDataList3" v-loading.fullscreen.lock="operateLoading"  v-privilege="activeMenu + 'SEARCH3'">查询</el-button>
                       </el-form-item>
                    </el-form>
                 </div>
               </div>
                 <div class="common-table-div">
                    <el-table ref="dataTable3"  
                      @selection-change="handleSelectionChange3" 
                      @row-click="rowChange3" 
                      border 
                      :height="tableHeight" 
                      highlight-current-row
                      :data="table.list3"
                      :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" min-width="160px" prop="meterCode" label="计量码" align="center"></el-table-column>
                      <el-table-column sortable :show-overflow-tooltip="true" min-width="160px" prop="loadPointName" label="收货单位名称" align="center"></el-table-column>
                    </el-table>
                 </div>
                  <div class="common-foot-style">
                    <el-pagination v-loading="dataLoading3" @size-change="pageSizeChange3" @current-change="pageCurrentChange3"
                      :current-page="page3.pageNum" :page-sizes="[100, 500, 1000]" :page-size="page3.pageSize" layout="total, sizes, prev, pager, next, jumper"
                      :total="page3.totalPage">
                    </el-pagination>
                  </div>
            </el-col>
        </el-row>
        <div id="qrcode2" v-show="false" ref="qrcode2">
          <div id="printContent">
                <div style="text-align: center;margin:0 0 0px 0px;padding:10px;width:260px;height: 200px;display:flex;justify-content: center;align-items: center;" id='XQ'></div>
                <div style="text-align: center;margin:0 0 0px 0px;width:260px" >
                    <strong style="font-size: 13px">内倒计量码:{{qrCode}}</strong><br/>
                    <strong style="font-size: 13px">物料名称:{{matterRow.matterName}}</strong><br/>
                    <strong style="font-size: 13px">发货单位：{{forwardingUnit.loadPointName}}</strong><br/>
                    <strong style="font-size: 13px">收货单位：{{receivingUnit.loadPointName}}</strong>
                </div>
          </div>
        </div>
        <el-dialog
        :title="pageTitle"
        :visible.sync="dialogVisible"
        width="50%"
        height="500px"
        >
        <div id="qrcode3" ref="qrcode3">
          <div id="printContent2">
                <div style="text-align: center;margin:0 0 0px 0px;padding:10px;width:100%;height: 400px;display:flex;justify-content: center;align-items: center;" id='XQ2'></div>
                <div style="text-align: center;margin:20px 0 20px 0px;width:100%; color: black; font-size: 25px" >
                  <table style="width: 100%;">
                    <tr style="margin-bottom: 20px; height: 40px">
                      <td style="width: 45%;text-align: right">内倒计量码:</td>
                      <td style="width: 55%;text-align: left">{{qrCode}}</td>
                    </tr>
                     <tr style="margin-bottom: 20px; height: 40px">
                      <td style="width: 45%;text-align: right">物料名称:</td>
                      <td style="width: 55%;text-align: left">{{matterRow.matterName}}</td>
                    </tr>
                     <tr style="margin-bottom: 20px; height: 40px">
                      <td style="width: 45%;text-align: right">发货单位:</td>
                      <td style="width: 55%;text-align: left">{{forwardingUnit.loadPointName}}</td>
                    </tr>
                     <tr style="margin-bottom: 20px; height: 40px">
                      <td style="width: 45%;text-align: right">收货单位:</td>
                      <td style="width: 55%;text-align: left">{{receivingUnit.loadPointName}}</td>
                    </tr>
                  </table>
                    <!-- <strong style="font-size: 25px">内倒计量码:{{qrCode}}</strong><br/>
                    <strong style="font-size: 25px">物料名称:{{matterRow.matterName}}</strong><br/>
                    <strong style="font-size: 25px">发货单位：{{forwardingUnit.loadPointName}}</strong><br/>
                    <strong style="font-size: 25px">收货单位：{{receivingUnit.loadPointName}}</strong> -->
                </div>
          </div>
        </div>
        <!-- <div id="chartMain"  v-bind:style="{width:EchartsWidth,height: EchartsHeight}"></div> -->
       </el-dialog>
    </div>
</template>
<script>
export default {
     data () {
      return {
          dataLoading: false,
          dataLoading2: false,
          dataLoading3: false,
          icoreFilterFlag: true,
          dialogVisible: false,
          pageTitle: '',
          page: {
            pageSize: 500,
            pageNum: 1,
            totalPage: 0
          },
          page2: {
            pageSize: 500,
            pageNum: 1,
            totalPage: 0
          },
          page3: {
            pageSize: 500,
            pageNum: 1,
            totalPage: 0
          },
          table: {
            list: [],
            list2: [],
            list3: []
          },
          tableHeight: 0,
          matterRow: {},
          forwardingUnit: {},
          receivingUnit: {},
          multipleSelection: [],
          multipleSelection2: [],
          multipleSelection3: [],
          activeMenu: '',
          qrCode: '',
          search: {
            matterName: '',
            loadPointName: '',
            loadPointName2: ''
          }
      }
    },
    created(){
      this.tableHeight = (window.innerHeight - 150) > 400 ? window.innerHeight - 150 : 400;
      this.activeMenu = window.top.localStorage.getItem('activeMenu')
    },
    mounted () {
        this.getDataList (),
        this.getDataList2 (),
        this.getDataList3 ()
    },
    methods: {
        getDataList () {
             this.dataLoading = true;
             let obj = {
               pageNum: this.page.pageNum,
               pageSize: this.page.pageSize,
               matterName: this.search.matterName
             }
             this.axios.post('pass/systemBase/v1/meterbasematterinfos/listMeterCode',obj, {individualType: 'json'})
               .then(res => {
                 this.dataLoading = false;
                 this.table.list = res.data.list;
                 this.page.totalPage = res.data.total;
               }).catch(e => {
                 this.dataLoading = false;
               });
         },
        getDataList2 () {
             this.dataLoading2 = true;
             this.axios.get('pass/systemBase/v1/meterbaseloadpoints/like/' + '?pageNum=' + this.page2.pageNum + '&pageSize=' + this.page2.pageSize + '&validFlag=1' + '&loadPointName=' + this.search.loadPointName)
               .then(res => {
                 this.dataLoading2 = false;
                 this.table.list2 = res.data.list;
                 this.page2.totalPage = res.data.total;
               }).catch(e => {
                 this.dataLoading2 = false;
               });
         },
        getDataList3 () {
             this.dataLoading3 = true;
             this.axios.get('pass/systemBase/v1/meterbaseloadpoints/like/' + '?pageNum=' + this.page3.pageNum + '&pageSize=' + this.page3.pageSize + '&validFlag=1' + '&loadPointName=' + this.search.loadPointName2)
               .then(res => {
                 this.dataLoading3 = false;
                 this.table.list3 = res.data.list;
                 this.page3.totalPage = res.data.total;
               }).catch(e => {
                 this.dataLoading3 = false;
               });
         },
        //  getMatterNameList () {},
        //  getLoadPointNameList () {},
        //  getLoadPointNameList2 () {},
        handleSelectionChange (val) {
          this.multipleSelection = val
            // this.matterRow = val
          if (val.length > 0) {
           this.$refs.dataTable.setCurrentRow(this.multipleSelection[val.length-1])
          }
        },
        handleSelectionChange2 (val) {
          this.multipleSelection2 = val
            // this.forwardingUnit = val
          if (val.length > 0) {
           this.$refs.dataTable2.setCurrentRow(this.multipleSelection2[val.length-1])
          }
        },
        handleSelectionChange3 (val) {
          this.multipleSelection3 = val
            // this.receivingUnit = val
          if (val.length > 0) {
           this.$refs.dataTable3.setCurrentRow(this.multipleSelection3[val.length-1])
          }
        }, 
        rowChange (val){
          this.$refs.dataTable.toggleRowSelection(val,true)
        },
        rowChange2 (val){
          this.$refs.dataTable2.toggleRowSelection(val,true)
        },
        rowChange3 (val){
          this.$refs.dataTable3.toggleRowSelection(val,true)
        },
        printQRCode () {
             if (this.multipleSelection.length !== 1) {
                this.$message.warning('请勾选一条物料信息数据')
                return
             }
             if (this.multipleSelection2.length !== 1) {
                this.$message.warning('请勾选一条发货单位信息数据')
                return
             }
            if (this.multipleSelection3.length !== 1) {
                this.$message.warning('请勾选一条收货单位信息数据')
                return
             }
             this.matterRow = this.multipleSelection[0]
             this.forwardingUnit = this.multipleSelection2[0]
             this.receivingUnit = this.multipleSelection3[0]
             let qrCode = this.matterRow.meterCode + this.forwardingUnit.meterCode + this.receivingUnit.meterCode;
             this.qrCode = qrCode;
             setTimeout(() => {
                  document.getElementById("XQ").innerHTML = ""; //置空
                  new QRCode(document.getElementById("XQ"), {
                      text: qrCode,
                      width: 180,
                      height: 180,
                      colorDark: "#000000",
                      colorLight: "#ffffff",
                  })
             setTimeout(() =>{
                  this.printPage('printContent');
                   },500)
              }, 100)
        },
        generateQRCode () {
            if (this.multipleSelection.length !== 1) {
                this.$message.warning('请勾选一条物料信息数据')
                return
             }
             if (this.multipleSelection2.length !== 1) {
                this.$message.warning('请勾选一条发货单位信息数据')
                return
             }
            if (this.multipleSelection3.length !== 1) {
                this.$message.warning('请勾选一条收货单位信息数据')
                return
             }
             this.matterRow = this.multipleSelection[0]
             this.forwardingUnit = this.multipleSelection2[0]
             this.receivingUnit = this.multipleSelection3[0]
             let qrCode = this.matterRow.meterCode + this.forwardingUnit.meterCode + this.receivingUnit.meterCode;
             this.qrCode = qrCode;
             this.dialogVisible = true
             setTimeout(() => {
                  document.getElementById("XQ2").innerHTML = ""; //置空
                  let XQ2 = document.getElementById("XQ2")
                  new QRCode(XQ2, {
                      text: qrCode,
                      width: 380,
                      height: 380,
                      colorDark: "#000000",
                      colorLight: "#ffffff",
                  })
              }, 100)
        },
        pageSizeChange (size) {
            this.page.pageSize = size;
            this.getDataList();
        },
        pageCurrentChange (index) {
            this.page.pageNum = index;
            this.getDataList();
        },
        pageSizeChange2 (size) {
            this.page2.pageSize = size;
            this.getDataList2();
        },
        pageCurrentChange2 (index) {
            this.page2.pageNum = index;
            this.getDataList2();
        },
        pageSizeChange3 (size) {
            this.page3.pageSize = size;
            this.getDataList3();
        },
        pageCurrentChange3 (index) {
            this.page3.pageNum = index;
            this.getDataList3();
        },
    }
}
</script>
<style scoped>
 .el-table__body tr.current-row>td{
     background-color: #ff784a !important;
     color: #fff;
  }
</style>