<style id='style1'>
.printManage .mimitBody {
  padding: 20px;
  background-color: #fff;
  margin: 10px 0 20px 0;
  display: table;
  width: 100%;
}
.printManage .tpEdit_header {
    padding: 18px;
    background: #fff;
    color: #606266;
    margin-bottom: 10px;
        display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
  }

.printManage .mimitList {
  margin-bottom: 15px;
  display: flex;
  flex-direction: row;
}

.printManage .mimitBody .el-tag {
  min-width: 120px;
  padding-right: 50px;
}

.printManage .el-button--small {
  padding: 9px 25px;
}
.printManage .print_item{
    border: 5px solid #000;
    padding: 10px;
   cursor: pointer;
   margin-bottom: 20px;
}
.printManage .print_item2{
    border: 5px solid #F56C6C;
    padding: 10px;
   cursor: pointer;
    margin-bottom: 20px;
}
.printManage .print_item_c_r_s{
    display: inline-block;
    width: 62px;
}
.printManage .xuanzhong_item{
  width: 360px;
  height: 360px;
 border: 1px solid #000;
 padding: 10px;

}
</style>
<template>
  <div class="printManage">
    <div class="tpEdit_header">
        <div>
             <span style="color:rgb(64, 158, 255);cursor:pointer;" @click="CommonJump('procurementMaage')">采购管理</span><span
        style="margin:0 9px;color:#C0C4CC">/</span><span>打印</span>
        </div>
        <el-button type="primary" size="small" @click="batchprint(1)">批量打印</el-button>
    </div>
    <div class="mimitBody">
        <div>
            <el-checkbox v-model="allchecked" @change="allcheckbtn">全选</el-checkbox>
            <span style='margin-left:10px'>入库批次</span>
            <el-select v-model="msg.StockInId" placeholder="请选择" size="small" clearable @change="allchecked = false,getList()">
              <el-option label="不限" :value="0" ></el-option>
                <el-option :label="item.StockInNum" :value="item.StockInId" v-for="(item,index2) in options" :key="index2"></el-option>
            </el-select>
        </div>
        <div style="margin-top:30px">
            <el-row :gutter="30">
                <el-col :span="6" v-for="(item,index) in dataList" :key="index" >
                    <div :class="item.Ischeck ==true? 'print_item2':'print_item'" @click="gocheke(index)">
                        <div>{{item.GoodsName}}</div>
                        <div>
                             <el-row :gutter="10">
                                <el-col :span="12">
                                    <img :src="domainManager().DomainUrl+item.QRImage" alt="" style="width:100%">
                                </el-col>
                                <el-col :span="12" style='font-size:12px;'>
                                    <div style='margin-top:20px'>
                                        <span class="print_item_c_r_s">入库人：</span>
                                        <span>{{item.EmName}}</span>
                                    </div>
                                    <div  style='margin-top:5px'>
                                        <span  class="print_item_c_r_s">入库时间：</span>
                                        <span>{{item.CreateDate}}</span>
                                    </div>
                                    <div  style='margin-top:5px'>
                                        <span  class="print_item_c_r_s">仓库名称：</span>
                                        <span>{{item.WareHouseName}}</span>
                                    </div>
                                      <div  style='margin-top:5px'>
                                        <span  class="print_item_c_r_s">商品规格：</span>
                                        <span v-for="(x,y) in item.SpecificationList" :key="y">{{x}} <span v-if="item.SpecificationList.length !== y+1"> , </span></span>
                                    </div>
                                    <div  style='margin-top:5px'>
                                        <span  class="print_item_c_r_s">成本价格：</span>
                                        <span>￥{{item.CostMoney}}</span>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div>
                             <img :src="domainManager().DomainUrl+item.TQRImage" alt="" >
                        </div>
                        <div style=" text-align: center;">
                            <span>{{item.TQRCode}}</span>
                        </div>
                       
                    </div>
                </el-col>
                
            </el-row>
        </div>
        <div class="xuanzhong"  id = 'xuanzhong'  style="display:none">
            <!-- <div  v-for="(item,index) in checkList" :key="index" class="xuanzhong_item" :id = "item.page" > -->
            <div  v-for="(item,index) in checkList" :key="index" :id = "item.page" style=" width: 283px; height: 283px;padding: 10px;display: flex;flex-direction: column; justify-content: space-around;">
                <div style=" width:100%; height:40px;text-overflow: ellipsis; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">
                  {{item.GoodsName}}
                </div>
                <div style=' width:100%; display: flex;flex-direction: row;align-items: center;margin-top:10px'>
                    <img :src="domainManager().DomainUrl+item.QRImage" alt="" style="width:180px;height: 180px">
                    <div style="display: flex;flex-direction: column;font-size:11px;width:150px">
                         <div>
                                <span style="  display: inline-block; width: 62px;">入库人：</span>
                                <span>{{item.EmName}}</span>
                            </div>
                            <div  style='margin-top:3px'>
                                <span  style="  display: inline-block; width: 62px;">入库时间：</span>
                                <span>{{item.CreateDate}}</span>
                            </div>
                            <div  style='margin-top:3px'>
                                <span   style="  display: inline-block; width: 62px;">仓库名称：</span>
                                <span>{{item.WareHouseName}}</span>
                            </div>
                              <div  style='margin-top:3px; width:150px; height:30px;text-overflow: ellipsis; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;'>
                                <span   style="  display: inline-block; width: 62px;">商品规格：</span>
                                <span v-for="(x,y) in item.SpecificationList" :key="y">{{x}} <span v-if="item.SpecificationList.length !== y+1"> , </span></span>
                            </div>
                            <div  style='margin-top:3px'>
                                <span  style="  display: inline-block; width: 62px;">成本价格：</span>
                                <span>￥{{item.CostMoney}}</span>
                            </div>
                    </div>
                </div>

                <div style="margin-top:3px">
                  <div>
                    <img :src="domainManager().DomainUrl+item.TQRImage" alt="" >
                  </div>
                  <div style=" text-align: center;margin-top:3px">
                    <span>{{item.TQRCode}}</span>
                  </div>  
                </div>
                
            </div>
           

        </div>
    </div>
    
  </div>
</template>
<script>
import { getLodop } from '../../assets/js/LodopFuncs' //导入模块
export default {
  
  data() {
    return {
        Detaildata:{},
        msg:{
            ProcurementId:0,
            StockInId:0,
        },
        options:[],
        dataList:[],
        checkList:[],
        allchecked:false,
    };
  },
  created() {},
  methods: {
      
    getProcurementInfo(data) {//获取采购单 入库批次
        this.assetsApipost("/api/property/GetProcurementSotckInBatchList", {ProcurementId:data.ID}, res => {
          if (res.data.resultCode == 1) {
              this.options = res.data.data;
          } else {
            this.Error(res.data.message);
          }
        })
  
    },
    getList(){//获取采购单 入库商品标签
        this.assetsApipost("/api/property/GetProcurementStockInLableList", this.msg, res => {
          if (res.data.resultCode == 1) {
              this.dataList =res.data.data
              this.dataList.forEach(x=>{
                  x.Ischeck = false
              })
          } else {
            this.Error(res.data.message);
          }
        })
    },
    gocheke(index){
        this.dataList[index].Ischeck = ! this.dataList[index].Ischeck;
        let data = [];
        this.dataList.forEach((x,i)=>{
          if(x.Ischeck==true){
             let obj = x;
              data.push(obj)
          }
         
        })
        
        this.checkList = data
        this.checkList.forEach((x,i)=>{
          x.page = 'page'+(i+1)
        });
     
        this.$forceUpdate()
    },
    allcheckbtn(){
       
      if(this.allchecked==true){
        let data = [];
        this.dataList.forEach((x,i)=>{
          x.Ischeck = true;
           let obj = x;
            obj.page = 'page'+(i+1)
            data.push(obj)
        })
         this.checkList = data
      }else{
         this.dataList.forEach(x=>{
          x.Ischeck = false;
         
        })
         this.checkList=[]
      }
      this.$forceUpdate()
    },
    batchprint(num){//批量打印
    if(this.checkList.length>0){
         // http://www.c-lodop.com/LodopDemo.html  官网地址
         let page = 'page'+num
         let LODOP = getLodop()//调用getLodop获取LODOP对象
          LODOP.PRINT_INIT(num)
          var strFormHtml="<body>"+document.getElementById(page).innerHTML+"</body>";
          LODOP.ADD_PRINT_HTM(20,15,300,300,strFormHtml);
          // LODOP.PREVIEW()//预览打印
          LODOP.PRINT()//直接打印打印
          if(LODOP.CVERSION){
            
            LODOP.On_Return = function(TaskID, Value){
              console.log(TaskID)
              console.log(Value)
              console.log(123123)
                if(Value){
                   num++;//循环打印
                    if(this.checkList.length>=num){
                      setTimeout(()=>{
                          this.batchprint(num)
                      },1000)
                      
                    }
                }else{
                   console.log('错误')
                }
            }
            LODOP.PRINT()
            
          }else{
            console.log('进入')
              if( LODOP.PRINT()){
              num++;//循环打印
               if(this.checkList.length>=num){
                setTimeout(()=>{
                    this.batchprint(num)
                },1000)
                
              }
           }else{
              console.log('错误')
           }
          }
           

         
          
    }else{
      this.Error('请选择要打印的标签');
    }
       

    }   
    
  },
  mounted() {
      this.msg.ProcurementId = this.$route.query.ID;
    this.getProcurementInfo(this.$route.query)
    this.getList()
    
  }
};
</script>
