<!-- 条码查询 -->
<template>
  <div class="main-container order-mc-bg">
    <div class="sale-container">
      <!-- 上下查 -->
      <div class="TopInfo" v-if="OrderNoNameslist.length > 0">
        关联查询：
        <strong>{{ OrderNoNameStr }}</strong>
        <strong>{{ OrderNoNameslist.length > 5 ? '等' : '' }}</strong>
        {{ $route.query.actionName ? $route.query.actionName : '' }}所选
        <strong>{{ OrderNoNameslist.length }}</strong>条明细行的
        <strong>{{ CXaction }}</strong>结果
      </div>
      <!-- 列表 -->
      <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-row class="form-row2">
                  <el-col :span="21">
                    <el-row :gutter="2" class="form-row2-row2">
                      <el-col :span="8" class="form-r2-r2-col">
                        <el-form-item label="自定义条件1">
                          <CustomCondition :getCustomerItem="statusForm" :key="compKey1"
                            @result="selfResult($event, 'customerSel1', 'customerObj1', 'tempObj1')"></CustomCondition>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="自定义条件2">
                          <CustomCondition :getCustomerItem="statusForm" :key="compKey2"
                            @result="selfResult($event, 'customerSel2', 'customerObj2', 'tempObj2')"></CustomCondition>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="自定义条件3">
                          <CustomCondition :getCustomerItem="statusForm" :key="compKey3"
                            @result="selfResult($event, 'customerSel3', 'customerObj3', 'tempObj3')"></CustomCondition>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </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" label="生产/采购订单号" prop="billNo" width="172"></el-table-column>
            <el-table-column align="left" label="销售订单号" prop="salBillNo" width="187"></el-table-column>
            <el-table-column align="left" label="客户" prop="custom" width="172"></el-table-column>
            <el-table-column align="left" label="物料编码" prop="materialNumber" width="150" />
            <el-table-column align="left" label="规格型号" prop="sku" width="280" />
            <el-table-column align="left" label="物料名称" prop="partName" width="100" />
            <el-table-column align="left" label="69码" prop="barCode" width="172" />
            <el-table-column align="left" label="SN码" prop="snCode" width="172" />
            <el-table-column align="left" label="箱码" prop="boxCode" width="172" />
            <el-table-column align="left" label="供应商/供应组织" prop="supplier" width="172" />
            <el-table-column align="left" label="生产/采购入库日期" prop="inboundDate" width="130" />
            <el-table-column align="left" label="销售出库日期" prop="outboundDate" width="96" />
            <el-table-column align="left" label="销售出货客户" prop="outboundCustom" width="172" />
            <el-table-column align="left" label="销售出库单号" prop="outboundBillNo" width="172"></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>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { transformTimestamp } from '@/utils/pubulic.js'
import CustomCondition from '@/components/public/CustomCondition.vue'
export default {
  name: 'BarcodeQuery',
  components: {
    CustomCondition
  },
  data () {
    return {
      centerDialogVisible: false,
      activeNames: true,
      drawer: false,
      direction: 'rtl',
      // 自定义条件 订单类型 单据状态 供应组织 是否211 是否赠品 关闭状态
      statusForm: {
        customCondition: []
      },
      //条件
      CXcheckVal: null, // 查询选择
      dialogCX: false, // 选择查询弹框显示
      upOrDownList: [], // 上查下查弹窗可选数据
      OrdedetailIds: [], // 勾选的明细id集合
      OrderNoNames: [], // 选择的单据订单号集合
      OrderNoNameslist: [], // 上查下查的订单号
      OrderNoNameStr: '', // 上查下查的订单号str
      CXaction: '', // 判断是上查还是下查
      actionType: '', //判断点击的顶部那个按钮
      tableInfo: [], //操作结果
      isLoading: false, //表格加载数据
      documentStatuslist: [], // 单据状态
      pickmtDocumnetList: [], // 领料类型
      ids: [],
      btnType: [
        's-p-t-g1',
        'save',
        'print-aterial-list',
        'push-down',
        'close',
        'de-close',
        'split-order',
        'finish',
        'close-case',
        'de-excute-start',
        'de-excute-finish',
        'down-check'
      ], // 不需要显示的顶部按钮类型
      productDeptList: [], // 生产部门
      Time1: [],
      dialogVisible: false, // 操作弹框显示
      dialogxt: false, // 选择下推单据弹框显示
      // 搜索条件
      search: {
        orgId: '', // 组织id
        billNo: '', //生产订单号
        demandBillNo: '', // 销售订单号
        product: '', //产品
        custom: '', // 客户
        materialNumber: '', //物料编码
        barCode: '', // 69码
        snCode: '', // sn码
        boxCode: '', // 箱码
        supplier: '', //供应商
        supplierOrg: '', //供应组织
        outboundBillNo: '', // 销售出库单号
        outboundCustom: '', //销售出库客户
        pageNo: 1, // 页码
        pageSize: 50 // 页数
      },
      applyNumber: '', // 生产数量统计
      realNumber: '', // 领套数量统计
      orderTotal: 0, // 未入库数量统计
      tableData: [],
      selectItem: 0,
      rowShow: false,
      heightNum: 0,
      windowHeight: 0,
      isDown: true
    }
  },
  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')
    }
  },
  mounted () { },
  methods: {
    keyupFn (e) {
      if (e.keyCode === 13) {
        // enter见搜索
        this.searchData()
      }
    },
    // 初始化
    Init () {
      this.gettmList()
    },

    // 自定义监听数据处理
    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 })
      }
    },
    // 自定义选择赋值结果
    selfResult (result, fieldSale, fieldObj, tempObj) {
      this[fieldSale] = result.currVal
      this[fieldObj] = result.outResult

      if (JSON.stringify(this[fieldObj]) != '{}') {
        this[tempObj] = JSON.parse(JSON.stringify(this[fieldObj]))
        for (const key in this[fieldObj]) {
          this.search[key] = this[fieldObj][key]
        }
      } else {
        for (const key in this[tempObj]) {
          delete this.search[`${key}`]
        }
        this[tempObj] = null
      }

      if (this[fieldSale] == undefined || this[fieldSale] == '') {
        for (const key in this[tempObj]) {
          delete this.search[`${key}`]
        }
        this[tempObj] = null
      }
    },

    // 获取部门数据
    getProductdept () {
      this.$http.post('SysConfig/GetDept/' + this.orgId).then(res => {
        if (res.status === 200) {
          this.productDeptList = res.data
        }
      })
    },
    // 获取条码查询列表
    gettmList () {
      this.isLoading = true
      this.$http.post('BarCode/GetList', this.search).then(res => {
        if (res.status === 200) {
          this.isLoading = false
          this.tableData = res.data
          this.orderTotal = res.data.totalCount
          this.details = res.data.details
          console.log('获取条码列表数据', res)
        }
      })
    },

    // 搜索事件
    searchData () {
      this.search.pageNo = 1
      this.gettmList()
    },
    //控制表头颜色
    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()
    }
  }
}
</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>