<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_d{
  border: 5px solid #000;
  padding: 10px;
  cursor: pointer;
  margin-bottom: 20px;
}
.printManage .print_item2_d{
  border: 5px solid #F56C6C;
  padding: 10px;
  cursor: pointer;
  margin-bottom: 20px;

}
.printManage .print_item{
    border: 5px solid #000;
    padding: 10px;
   cursor: pointer;
   margin-bottom: 20px;
  width: 210px;
  display: flex;
  margin-right: 15px;

}
.printManage .print_item2{
    border: 5px solid #F56C6C;
    padding: 10px;
   cursor: pointer;
    margin-bottom: 20px;
  width: 210px;
  display: flex;
  margin-right: 15px;

}
.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('procurementMange')">采购管理</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" v-loading="loading"
    element-loading-text="拼命打印中..." >
        <div style="width: 100%;text-align: center">首次加载耗时较长、请耐心等待....</div>
        <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,checkList=[],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 style=" float: right;">
                <el-radio v-model="radio" label="2" @change="btnradio">小图</el-radio>
                <el-radio v-model="radio" label="1"  @change="btnradio">大图</el-radio>
            </div>

        </div>
        <div v-if="dataList.length==0" style="width:100%;text-align: center;margin:30px 0">暂无打印标签</div>
        <div style="margin-top:10px"  v-for="(i,j) in dataList" :key="j" v-if="dataList.length>0 && radio==1" v-loading="fullscreenLoading" >
          <div style="margin:20px 0;font-size:16px;color:rgb(64, 158, 255)">
            <span > 商品名称：{{i.GoodsName}}</span>
          </div>

            <el-row :gutter="30">
                <el-col :span="6" v-for="(item,index) in i.list" :key="index" >
                    <div :class="item.Ischeck ==true? 'print_item2_d':'print_item_d'" @click="gocheke(j,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.xuhao}}</span>
                                    </div>
                                  <div  style='margin-top:0px'>
                                    <span>{{item.ExpirationDate}}</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>
                                </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 style="margin-top:10px"  v-for="(i,j) in dataList" :key="j" v-if="dataList.length>0 && radio==2" v-loading="fullscreenLoading" >
            <div style="margin:20px 0;font-size:16px;color:rgb(64, 158, 255)">
              <span > 商品名称：{{i.GoodsName}}</span>
            </div>

<!--            <el-row :gutter="30">-->
<!--                <el-col :span="4" v-for="(item,index) in i.list" :key="index" >-->
<!--                    <div :class="item.Ischeck ==true? 'print_item2':'print_item'" @click="gocheke(j,index)">-->

<!--                         <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:11px;'>-->
<!--                                     <div  style='margin-top:5px'>-->
<!--                                        <span>序号:</span>-->
<!--                                        <span>{{item.xuhao}}</span>-->
<!--                                    </div>-->
<!--                                    <div  style='margin-top:0px'>-->
<!--                                        <span>{{item.ExpirationDate}}</span>-->
<!--                                    </div>-->
<!--                                    <div  style='margin-top:5px; width:100%; height:32px;text-overflow: ellipsis; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;'>-->
<!--                                        <span>{{item.GoodsName}}</span>-->
<!--                                    </div>-->

<!--                                </el-col>-->
<!--                            </el-row>-->
<!--                    </div>-->
<!--                </el-col>-->

<!--            </el-row>-->
              <div style="width: 100%;display: flex;flex-wrap: wrap">
                <div v-for="(item,index) in i.list" :key="index" :class="item.Ischeck ==true? 'print_item2':'print_item'" @click="gocheke(j,index)">
                  <img :src="domainManager().DomainUrl+item.QRImage" alt="" style="width:85px;height: 85px;">
                  <div>
                    <div  style='margin-top:5px'>
                      <span>序号:</span>
                      <span>{{item.xuhao}}</span>
                    </div>
                    <div  style='margin-top:0px'>
                      <span>{{item.ExpirationDate}}</span>
                    </div>
                    <div  style='margin-top:5px; width:100%; height:40px;text-overflow: ellipsis; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;'>
                      <span>{{item.GoodsName}}</span>
                    </div>
                  </div>
                </div>
              </div>
        </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;"> -->
                <div style=" width:100%; height:30px;text-overflow: ellipsis; line-height: 20px;">
                  {{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  style='margin-top:3px'>
                                <span   style="  display: inline-block; width: 62px;">序号：</span>
                                <span>{{item.xuhao}}</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>
                </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 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.xpage" style=" width: 125px; height: 100px;display: flex;flex-direction: column; justify-content: space-around;">
                <!-- <div style=" width:100%; height:20px;text-overflow: ellipsis; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;font-size:12px">
                  {{item.GoodsName}}
                </div> -->
                 <div style=' width:140%; display: flex;flex-direction: row;align-items: center'>
                    <img :src="domainManager().DomainUrl+item.QRImage" alt="" style="width:110px;height: 110px">
                    <div style="display: flex;flex-direction: column;font-size:11px;width:78px;font-size:10px;;height: 90px; overflow: hidden;">
                            <div  style='margin-top:5px'>
                                <span   style="  display: inline-block">序号:</span>
                                <span>{{item.xuhao}}</span>
                            </div>
                             <div  style='margin-top:0px'>
                                  <span>{{item.ExpirationDate}}</span>
                              </div>
                            <div  style='margin-top:3px'>
                                <span>{{item.GoodsName}}</span>
                            </div>
                    </div>
                </div>


            </div>


        </div>
    </div>

  </div>
</template>
<script>
import { getLodop } from '../../assets/js/LodopFuncs' //导入模块
export default {

  data() {
    return {
      loading:false,
      fullscreenLoading:false,
        Detaildata:{},
        msg:{
            ProcurementId:0,
            StockInId:0,
        },
        options:[],
        dataList:[],
        checkList:[],
        allchecked:false,
        CreateDatelist:[],
        stagingData:[],//商品名字搜索使用
        xzCreateDate:'',
        GoodsNames:'',
         radio: '2',
    };
  },
  created() {

  },
  methods: {
    groupArr(list,field){
            var fieldList = [],att=[];
            list.map((e)=>{
                fieldList.push(e[field])
            })
            //数组去重
            fieldList = fieldList.filter((e,i,self)=>{
                return self.indexOf(e)==i
            })

            for(var j=0;j<fieldList.length;j++){
                //过滤出匹配到的数据
                var arr = list.filter((e)=>{
                    return e.GoodsName==fieldList[j];
                })
                att.push({
                    GoodsName:arr[0].GoodsName,
                    list:arr
                })
            }
            return att;
        },
   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.fullscreenLoading=true
        this.assetsApipost("/api/property/GetProcurementStockInLableList", this.msg, res => {
           this.fullscreenLoading=false
          if (res.data.resultCode == 1) {
              let  data =res.data.data
              data.forEach(x=>{
                  x.Ischeck = false
              })
              this.stagingData =  this.dataList
               this.CreateDatelist  = this.groupArr(data,'GoodsName')

               this.dataList =  this.CreateDatelist;
                 this.dataList.forEach(x=>{
                   x.list.forEach((j,index)=>{
                     j.xuhao = index+1+'/'+x.list.length
                   })
                 })
          } else {
            this.Error(res.data.message);
          }
        })
    },
    gocheke(j,index){
        this.dataList[j].list[index].Ischeck = !  this.dataList[j].list[index].Ischeck;
        let data = [];
        this.dataList.forEach((x,i)=>{
          x.list.forEach((j)=>{
            if(j.Ischeck==true){
             let obj = j;
              data.push(obj)
          }
          })


        })

        this.checkList = data
        this.checkList.forEach((x,i)=>{
          x.page = 'page'+(i+1)
          x.xpage = 'xpage'+(i+1)
        });

        this.$forceUpdate()
    },
    allcheckbtn(){

      if(this.allchecked==true){
        let data = [];
        this.dataList.forEach((x,i)=>{
            x.list.forEach((j,i2)=>{
              j.Ischeck = true;
              let obj = j;
              // obj.page = 'page'+(i+1)
              data.push(obj)
            })
        })
         this.checkList = data;
          this.checkList.forEach((x,i)=>{
            x.page = 'page'+(i+1)
            x.xpage = 'xpage'+(i+1)
          })

      }else{
         this.dataList.forEach(x=>{
          x.list.forEach((j)=>{
             j.Ischeck = false;
          })

        })
         this.checkList=[]
      }
      this.$forceUpdate()
    },
    btnradio(){
       this.checkList=[];
        this.dataList.forEach((x,i)=>{
                x.list.forEach((j)=>{
                  j.Ischeck = false;
                })
          })
    },

    batchprint(n){//批量打印
    // debugger;
    let conunt = this.checkList.length;
    let that = this
    if(conunt>0){
         // http://www.c-lodop.com/LodopDemo.html  官网地址


         let page
          if(this.radio==1){
            page = 'page'+n
          }else if(this.radio==2){
              page='xpage'+n
          }

         
         let LODOP = getLodop()//调用getLodop获取LODOP对象
          LODOP.PRINT_INIT(page)
          LODOP.NewPage();
          var strFormHtml="<body>"+document.getElementById(page).innerHTML+"</body>";
          if(this.radio==1){
            LODOP.ADD_PRINT_HTM(20,15,300,300,strFormHtml);

          }else if(this.radio==2){
            LODOP.ADD_PRINT_HTM(0,0,125,110,strFormHtml);
          }

          // LODOP.PREVIEW()//预览打印
          // LODOP.PRINT_DESIGN()//进入打印设计
          // LODOP.PRINT()//直接打印打印
          let num = n
           if(n ==1){
           this.loading = true
         }
          if(LODOP.CVERSION){
            LODOP.On_Return = function(TaskID, Value){
                if(Value){
                   num++;//循环打印
                    if(conunt>=num){
                      setTimeout(()=>{
                          that.batchprint(num)
                      },200)

                    }else{
                          that.loading = false;
                           that.checkList=[];
                           that.dataList.forEach((x,i)=>{
                             x.list.forEach((j)=>{
                               j.Ischeck = false;
                             })


                        })

                      return
                    }
                }else{
                }
            }
            LODOP.PRINT()
            //  LODOP.PREVIEW()//预览打印
          }
          // else{

          //     if(LODOP.PRINT()){
          //     num++;//循环打印
          //      if(conunt>=num){
          //       setTimeout(()=>{
          //           that.batchprint(num)
          //       },200)

          //     }else{
          //       return
          //     }
          //  }else{
          //  }
          // }




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


    }

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

  }
};
</script>
