<!-- 条码打印 -->
<template>
  <div class="main-container order-mc-bg">
    <div class="sale-container">
      <!-- 列表 -->
      <div @click="createSaleOrder" class="sale-page-body">
        <!-- 表头 -->
        <div class="sale-page-table-header" ref="getSaleTableHeader">
          <el-form :inline="true">
            <el-row class="form-row1">
              <el-col :span="20">
                <el-row :gutter="2">
                  <el-col :span="4">
                    <el-form-item label="采购组织">
                      <el-select clearable filterable placeholder="请选择部门" v-model="search.workShopId">
                        <el-option class="f_12" label="全部" value="0"></el-option>
                        <el-option :key="item.name" :label="item.name" :value="item.id" class="f-12"
                          v-for="item in productDeptList"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="采购订单">
                      <el-input class="f-12" placeholder="请输入订单号" v-model.trim="search.product"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="物料">
                      <el-input class="f-12" placeholder="请输入物料/名称/规格型号" v-model.trim="search.product"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="4" class="form-row-lastcol">
                <el-row :gutter="2">
                  <el-col :span="24">
                    <el-form-item class="form-group1">
                      <el-button @click="searchData" size="small" type="primary">搜索</el-button>
                      <el-button size="small">重置</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 列表 -->
        <div class="sale-page-table-body">
          <el-table :data="tableData" :header-cell-class-name="headerRigthMethod" :header-cell-style="headerBg"
            :max-height="heightNum" @selection-change="handleSelectionChange" border class="table-box"
            element-loading-spinner="el-icon-loading" element-loading-text="加载中，请稍后..."
            style="width: 100%;font-size:12px" v-loading="isLoading">
            <el-table-column align="left" fixed label="生产订单号" prop="billNo"></el-table-column>
            <el-table-column align="left" fixed label="下单日期" prop="date" width="96"></el-table-column>
            <el-table-column align="center" label="单据状态" prop="documentStatus" width="96"></el-table-column>
            <el-table-column align="left" label="物料编码" prop="materialNumber" width="226" />
            <el-table-column align="left" label="物料名称" prop="materialName" />
            <el-table-column align="left" break label="规格型号" prop="specification" width="280" word-wrap: />
            <el-table-column align="right" label="生产数量" prop="qtyCount" width="100" />
            <el-table-column align="right" label="条码生成数" prop="barCodeCount" width="100" />
            <el-table-column align="center" label="操作" prop="specification" width="180">
              <template #default="scope">
                <span @click="getBarCode(scope.row.isProduct)" class="text-blue">生成条码{{ scope.row.count }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 底部 -->
      <div class="sale-page-footer">
        <div class="footer-right">
          <el-pagination :currentPage="search.pageNo" :page-size="search.pageSize" :page-sizes="[50, 100, 150]"
            :total="orderTotal" @current-change="handleCurrentChange" @size-change="handleSizeChange"
            layout="slot,sizes,total, prev,pager, next,jumper" popper-class="每页显示">
            <span class="total-select-item">
              共选中
              <text style="text-align:center;color:#4178D5;padding:0 1px;">{{ selectItem }}</text>行
            </span>
          </el-pagination>
        </div>
        <div class="footer-pagination-total-page">
          <span>共{{ Math.ceil(orderTotal / search.pageSize) }}页</span>
        </div>
      </div>
    </div>

    <!-- 生产条码抽屉一 -->
    <el-drawer :direction="direction" :with-header="true" size="80%" title="成品条码打印详情" v-model="CPdrawer">
      <!-- 列表 -->
      <div @click="createSaleOrder" class="sale-page-body">
        <!-- 表头 -->
        <div class>
          <el-form :inline="true">
            <el-row>| SN条码生成</el-row>
            <el-row class="form-row1">
              <el-col :span="20">
                <el-row :gutter="2">
                  <el-col :span="4">
                    <el-form-item label="数量">
                      <el-input class="f-12" placeholder="请输入数量" v-model="number"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4" class="s-1">
                    <span>已生成 {{ snCode.count }} 个</span>
                  </el-col>
                  <el-col :span="4">
                    <el-button @click="getSNCode" size="small" type="primary">生成条码</el-button>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 列表 -->
        <div class="sale-page-table-body">
          <div>
            <el-form :inline="true">
              <el-row>| SN码明细信息</el-row>
            </el-form>
          </div>
          <div class="form-row1">
            <el-collapse :key="index" v-for="(item, index) in snObj" v-model="activesNames">
              <el-collapse-item name="1" title="Feedback">
                <template #title>
                  SN码数量：{{ item.count }} 生成时间：{{ item.createTime }}
                  <el-button style="margin-left:800px" type="text">一键打印</el-button>
                  <el-button @click="centerDialogVisible = true" type="text">重新生成</el-button>
                </template>
                <div>
                  <el-table :data="item.details" :header-cell-class-name="headerRigthMethod"
                    :header-cell-style="headerBg" :max-height="heightNum" @selection-change="handleSelectionChange"
                    border class="table-box" element-loading-spinner="el-icon-loading" element-loading-text="加载中，请稍后..."
                    style="width: 100%;font-size:12px" v-loading="isLoading">
                    <el-table-column align="center" fixed type="selection" width="40" />
                    <el-table-column align="left" fixed label="物料编码" prop="materialNumber"
                      width="390"></el-table-column>
                    <el-table-column align="left" fixed label="SN码" prop="serialNumber" width="400"></el-table-column>
                    <el-table-column align="left" label="装箱状态" prop="packingStatus" width="283"></el-table-column>
                    <el-table-column align="left" label="打印次数" prop="printCount" width="380" />
                  </el-table>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>
      <div @click="createSaleOrder" class="sale-page-body">
        <!-- 表头 -->
        <div class>
          <el-form :inline="true">
            <el-row class="form-row1">| 箱唛基本信息</el-row>
            <el-row class="form-row1">
              <el-col :span="20">
                <el-row :gutter="2">
                  <el-col :span="4">
                    <el-form-item label="数量">
                      <el-input class="f-12" placeholder="请输入数量" v-model.trim="xm.number"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="2" class="s-1">
                    <span>已生成 {{ xm.number }} 个</span>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item label="最小包装数">
                      <el-input class="f-12" placeholder="请输入" v-model.trim="xm.miniPackingNumber"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item label="毛重(kg)">
                      <el-input class="f-12" placeholder="请输入" v-model.trim="xm.roughWeight"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item label="净重(kg)">
                      <el-input class="f-12" placeholder="请输入" v-model.trim="xm.netWeight"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="包装尺寸(cm)  长">
                      <el-input class="f-12" placeholder="请输入" v-model.trim="xm.len"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="宽">
                      <el-input class="f-12" placeholder="请输入" v-model.trim="xm.width"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="高">
                      <el-input class="f-12" placeholder="请输入" v-model.trim="xm.height"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="4" class="form-row-lastcol">
                <el-row :gutter="2">
                  <el-col :span="24">
                    <el-form-item class="form-group1">
                      <el-button @click="getXMLists" size="small" type="primary">生成条码</el-button>
                      <el-button size="small" type="primary">重置</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 列表 -->
        <div class="sale-page-table-body">
          <div>
            <el-form :inline="true">
              <el-row>| 箱唛明细信息</el-row>
              <el-row :gutter="2" class="form-row1">
                <el-col :span="6">
                  <el-form-item label="箱唛">
                    <el-input class="f-12" placeholder="请输入数量" v-model.trim="search.product"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="生成时间">
                    <el-time-select class="f-12" placeholder="选择时间" size="small" v-model="createTime"></el-time-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div>
            <el-collapse :key="index" v-for="(item, index) in boxObj" v-model="activeNames">
              <el-collapse-item name="2" title="Feedback">
                <template #title>
                  箱数：{{ item.count }} 单箱毛重(kg)：{{ item.roughWeight }} 箱规(cm)：{{ item.cartonSize }} {{ item.createTime }}
                  <el-button style="margin-left:800px" type="text">一键打印</el-button>
                  <el-button @click="centerDialogVisible = true" type="text">重新生成</el-button>
                </template>
                <div>
                  <el-table :data="item.details" :header-cell-class-name="headerRigthMethod"
                    :header-cell-style="headerBg" :max-height="heightNum" @selection-change="handleSelectionChange"
                    border class="table-box" element-loading-spinner="el-icon-loading" element-loading-text="加载中，请稍后..."
                    style="width: 100%;font-size:12px" v-loading="isLoading">
                    <el-table-column align="center" fixed type="selection" width="40" />
                    <el-table-column align="left" fixed label="箱唛" prop="boxNo" width="250"></el-table-column>
                    <el-table-column align="left" fixed label="物料编码" prop="materialNumber"
                      width="250"></el-table-column>
                    <el-table-column align="left" fixed label="物料69码" prop="barCode" width="250"></el-table-column>
                    <el-table-column align="left" label="本箱数量" prop="packingNumber" width="90"></el-table-column>
                    <el-table-column align="left" label="总数" prop="sumNumber" width="90" />
                    <el-table-column align="left" label="是否尾箱数" prop="isTailbox" width="160" />
                    <el-table-column align="left" label="SN起始" prop="snRange" width="185" />
                    <el-table-column align="left" label="打印次数" prop="printCount" width="180" />
                  </el-table>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>
      <!-- 底部 -->
    </el-drawer>
    <!-- 抽屉二-->
    <el-drawer :direction="direction" :with-header="true" size="80%" title="半成品条码打印详情" v-model="BCPdrawer">
      <div @click="createSaleOrder" class="sale-page-body">
        <div class>
          <el-form :inline="true">
            <el-row class="form-row1">| 箱唛基本信息</el-row>
            <el-row class="form-row1">
              <el-col :span="20">
                <el-row :gutter="2">
                  <el-col :span="4">
                    <el-form-item label="数量">
                      <el-input class="f-12" placeholder="请输入数量" v-model.trim="xm.number"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="2" class="s-1">
                    <span>已生成{{ xm.number }}个</span>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item label="最小包装数">
                      <el-input class="f-12" placeholder="请输入" v-model.trim="xm.miniPackingNumber"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item label="毛重(kg)">
                      <el-input class="f-12" placeholder="请输入" v-model.trim="xm.roughWeight"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item label="净重(kg)">
                      <el-input class="f-12" placeholder="请输入" v-model.trim="xm.netWeight"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="包装尺寸(cm)  长">
                      <el-input class="f-12" placeholder="请输入" v-model.trim="xm.len"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="宽">
                      <el-input class="f-12" placeholder="请输入" v-model.trim="xm.width"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="高">
                      <el-input class="f-12" placeholder="请输入" v-model.trim="xm.height"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="4" class="form-row-lastcol">
                <el-row :gutter="2">
                  <el-col :span="24">
                    <el-form-item class="form-group1">
                      <el-button @click="getXMLists" size="small" type="primary">生成条码</el-button>
                      <el-button size="small" type="primary">重置</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <div class="sale-page-table-body">
          <div>
            <el-form :inline="true">
              <el-row>| 箱唛明细信息</el-row>
              <el-row :gutter="2" class="form-row1">
                <el-col :span="6">
                  <el-form-item label="箱唛">
                    <el-input class="f-12" placeholder="请输入数量" v-model.trim="search.product"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="生成时间">
                    <el-time-select class="f-12" placeholder="选择时间" size="small" v-model="createTime"></el-time-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div>
            <el-collapse :key="index" v-for="(item, index) in boxObj" v-model="activesNames">
              <el-collapse-item name="2" title="Feedback">
                <template #title>
                  箱数：{{ item.count }} 单箱毛重(kg)：{{ item.roughWeight }} 箱规(cm)：{{ item.cartonSize }} {{ item.createTime }}
                  <el-button style="margin-left:800px" type="text">一键打印</el-button>
                  <el-button @click="centerDialogVisible = true" type="text">重新生成</el-button>
                </template>
                <div>
                  <el-table :data="item.details" :header-cell-class-name="headerRigthMethod"
                    :header-cell-style="headerBg" :max-height="heightNum" @selection-change="handleSelectionChange"
                    border class="table-box" element-loading-spinner="el-icon-loading" element-loading-text="加载中，请稍后..."
                    style="width: 100%;font-size:12px" v-loading="isLoading">
                    <el-table-column align="center" fixed type="selection" width="40" />
                    <el-table-column align="left" fixed label="箱唛" prop="boxNo" width="250"></el-table-column>
                    <el-table-column align="left" fixed label="物料编码" prop="materialNumber"
                      width="250"></el-table-column>
                    <el-table-column align="left" fixed label="物料69码" prop="barCode" width="250"></el-table-column>
                    <el-table-column align="left" label="本箱数量" prop="packingNumber" width="90"></el-table-column>
                    <el-table-column align="left" label="总数" prop="sumNumber" width="90" />
                    <el-table-column align="left" label="是否尾箱数" prop="isTailbox" width="160" />
                    <el-table-column align="left" label="SN起始" prop="snRange" width="185" />
                    <el-table-column align="left" label="打印次数" prop="printCount" width="180" />
                  </el-table>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { transformTimestamp, htmlToExcel } from '@/utils/pubulic.js'
export default {
  name: 'BarcodePrint',
  data () {
    return {
      activeNames: '1', //手风琴1
      activesNames: true, //手风琴2
      CPdrawer: false,
      BCPdrawer: false,
      chouti: true,

      //生成sn码
      number: '', //生成数量
      purDetailsId: '', //采购订单明细id
      //生成箱码
      xm: {
        purDetailsId: '', //采购订单明细id
        number: '', //生成数量
        miniPackingNumber: '', //最小装箱数量
        len: '', //尺寸长
        height: '', //尺寸高
        width: '', //尺寸宽
        roughWeight: '', //毛重
        netWeight: '' //净重
      },

      direction: 'rtl',
      // 自定义条件 订单类型 单据状态 供应组织 是否211 是否赠品 关闭状态
      statusForm: {
        customCondition: []
      },
      //条件
      value: '',
      //生成SN码
      sncodes: [
        {
          count: '', //SN码数量
          createTime: '', //生成时间
          details: []
        }
      ],
      //生成SN码明细
      snObj: [
        {
          count: '', //SN码数量
          createTime: '', //生成时间
          details: []
        }
      ],
      //生成箱码
      xmcodes: [
        {
          count: '', //箱码数量
          createTime: '', //生成时间
          roughWeight: '', //毛重
          netWeight: '', //净重
          cartonSize: '', //箱规
          details: []
        }
      ],
      //生成箱码明细
      boxObj: [
        {
          count: '', //箱码数量
          createTime: '', //生成时间
          roughWeight: '', //毛重
          netWeight: '', //净重
          cartonSize: '', //箱规
          details: []
        }
      ],

      tableInfo: [], //操作结果
      isLoading: false, //表格加载数据
      documentStatuslist: [], // 单据状态
      pickmtDocumnetList: [], // 领料类型

      productDeptList: [], // 生产部门

      // 搜索条件
      search: {
        orgId: '', // 组织id
        billNo: '', // 销售订单号
        number: '', // 领料状态
        is21: '', // 是否211 1 是 0 否

        producePickNo: '', // 领料单号
        pickDocumentType: '', // 生产领料订单类型
        workShopId: '', //生产部门
        documentStatus: '', //单据状态
        product: '', //产品 物料名称/编码/SKU
        orderBeginDate: '', // 下单开始日期
        orderEndDate: '', //下单结束日期
        pageNo: 1, // 页码
        pageSize: 50, // 页数
        purchaseOrgId: '', //采购组织
        productKey: '' //产品
      },
      tableData: [],
      selectItem: 0,
      rowShow: false,
      heightNum: 0,
      windowHeight: 0,
      isDown: true,
      snCode: '',
      snTime: ''
    }
  },
  computed: {
    ...mapState({
      orgId: state => (state && state.org ? state.org.orgId : null),
      orgIdArr: state => (state && state.user ? state.user.orgIdArr : [])
    }),
    transformTime: function () {
      // 转换时间为 年-月-日
      return function (value) {
        return transformTimestamp(value)
      }
    }
  },
  created () {
    this.customerSel1 = 1
    this.windowHeight = document.documentElement.clientHeight
    this.heightNum = this.windowHeight - (40 + 30 + 54 + 34 + 34 + 34 + 16 + 16)
    this.search.orgId = this.orgId
    this.getProductdept()
    this.Init()
  },
  activated () {
    // 键盘监听事件
    document.addEventListener('keyup', this.keyupFn, false)
  },
  deactivated () {
    document.removeEventListener('keyup', this.keyupFn, false)
  },
  watch: {
    orgId (val) {
      this.search.orgId = val
      // this.getreplenishmentOrder()
    },
    customerSel1 (val, oldVal) {
      this.setselfChangeValue('customerSel1', 'customerSel2', 'customerSel13', 'z', 'customerSel1', 'compKey3')
    },
    customerSel2 (val, oldVal) {
      this.setselfChangeValue('customerSel2', 'customerSel1', 'customerSel13', 'y', 'customerSel2', 'compKey2')
    },
    customerSel3 (val, oldVal) {
      this.setselfChangeValue('customerSel3', 'customerSel1', 'customerSel12', 'z', 'customerSel2', 'compKey3')
    }
  },
  methods: {
    keyupFn (e) {
      if (e.keyCode === 13) {
        // enter见搜索
        this.searchData()
      }
    },
    // 生成SN条码
    getSNCode () {
      this.$http.post('FactoryBarCode/CreateSNCode').then(res => { })
    },
    // 生成箱唛条码
    getBarCode (isProduct) {
      console.log(isProduct)
      if (isProduct == true) {
        this.CPdrawer = true
        this.$http.get('SupplierBarCode/CreateBarCode', this.search).then(res => { })
      } else {
        this.BCPdrawer = true
        this.$http.get('SupplierBarCode/CreateBarCode', this.search).then(res => { })
      }
      // this.drawer = true
      // this.$http.get('SupplierBarCode/CreateBarCode', this.search).then(res => {})
    },
    // 初始化
    Init () {
      this.getgcPtrintList()
    },
    // 操作弹框导出
    handelhtmlToExcel (domid, title) {
      htmlToExcel(domid, title)
    },

    // 自定义监听数据处理
    setselfChangeValue (customerSel1, customerSel2, customerSel3, key, compKey) {
      if (this[customerSel1] == undefined) {
        this[customerSel1] = key
      }
      if (this[customerSel1] == key) {
        return
      }
      if (this[customerSel1] == this[customerSel2] || this[customerSel1] == this[customerSel3]) {
        this[customerSel1] = key
        this[compKey] += 1
        this.$message.error({ message: '不能重复选择!', showClose: true })
      }
    },

    // 获取部门数据
    getProductdept () {
      this.$http.post('SysConfig/GetDept/' + this.orgId).then(res => {
        if (res.status === 200) {
          this.productDeptList = res.data
        }
      })
    },
    // 获取工厂条码列表
    getgcPtrintList () {
      this.isLoading = true
      this.$http.post('FactoryBarCode/GetList', this.search).then(res => {
        if (res.status === 200) {
          this.isLoading = false
          this.tableData = res.data.list
          this.orderTotal = res.data.totalCount
          console.log('获取生产领料订单数据', res)
        }
      })
    },

    // 搜索事件
    searchData () {
      this.search.pageNo = 1
      this.getgcPtrintList()
    },
    //控制表头颜色
    headerBg ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 17 || columnIndex === 18) {
        return `text-align:right!important;`
      }
    },
    headerRigthMethod ({ row, column, rowIndex, columnIndex }) {
      return 'headerRight'
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleSizeChange (val) {
      this.search.pageNo = 1
      this.search.pageSize = val
      this.Init()
    },
    handleCurrentChange (val) {
      this.search.pageNo = val
      this.Init()
    },
    prtMoled (obj, row, content) {
      let TemporaryTag = document.createElement('span')
      TemporaryTag.innerText = content
      TemporaryTag.className = 'getTextWidth'
      document.querySelector('body').appendChild(TemporaryTag)
      document.querySelector('.getTextWidth').style.fontSize = '12px'
      let currentWidth = document.querySelector('.getTextWidth').offsetWidth
      document.querySelector('.getTextWidth').remove()
      const cellWidth = obj.target.offsetWidth
      currentWidth <= 2 * cellWidth ? (row.showTooltip = false) : (row.showTooltip = true)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/saleOrder/saleOrderCommon.scss';
@import '@/assets/style/saleOrder/orderList.scss';

.s-1 {
  font-size: 12px !important;
  line-height: 35px;
}

.form-row1 {
  margin-top: 20px;
}
</style>