<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <!--        <label class="el-form-item-label">出库库区</label>-->
        <!--        <el-input v-model="query.area" clearable placeholder="出库库区" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
        <el-select v-model="query.areaCode" clearable filterable placeholder="出库库区" value-key="id" class="filter-item"
                   @keyup.enter.native="crud.toQuery"
        >
          <el-option
            style="width: 180px"
            v-for="item in areaOptions"
            :key="item.id"
            :label="item.code"
            :value="item.code"
          >
          </el-option>
        </el-select>
        <el-select v-model="query.shAreaCode" clearable filterable placeholder="指示纳所" value-key="id" class="filter-item"
                   @keyup.enter.native="crud.toQuery"
        >
          <el-option
            style="width: 180px"
            v-for="item in areaOptions"
            :key="item.id"
            :label="item.code"
            :value="item.code"
          >
          </el-option>
        </el-select>
        <!--        <label class="el-form-item-label">单号</label>-->
        <el-input v-model="query.code" clearable placeholder="备货单号" style="width: 185px;" class="filter-item"
                  @keyup.enter.native="crud.toQuery"/>
        <el-input v-model="query.relatedBill1" clearable placeholder="备货计划单号" style="width: 185px;" class="filter-item"
                  @keyup.enter.native="crud.toQuery"/>

        <!--        <label class="el-form-item-label">状态</label>-->
        <el-select v-model="query.status" clearable placeholder="状态" value-key="id" class="filter-item"
                   @keyup.enter.native="crud.toQuery"
        >
          <el-option
            style="width: 180px"
            v-for="item in this.dict.pick_status"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <rrOperation :crud="crud"/>
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" :tableKey="this.$options.name">
        <!--        <el-button type="primary" v-if="false" @click="getCodeNoM()" icon="el-icon-plus" slot="left" class="filter-item" size="mini">-->
        <el-button
          slot="right"
          class="filter-item"
          type="primary"
          size="mini"
          :disabled="crud.selections.length != 1"
          @click="showReport(crud.selections[0])"
          v-permission="permission.showReport"
          icon="el-icon-document-add"
        >
          打印备货单
        </el-button>
        <el-button type="primary" v-permission="permission.savepickTicket"  v-if="false" @click="getCodeNoM()" icon="el-icon-plus" slot="left" class="filter-item" size="mini">
          新增
        </el-button>
        <el-button
          slot="right"
          class="filter-item"
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="show_fp"
          v-permission="permission.allocate"
          @click="allocate(crud.selections)"
        >
          审核
        </el-button>
        <el-button
          slot="right"
          class="filter-item"
          type="success"
          size="mini"
          :disabled="crud.selections.length != 1||crud.selections[0].status != 'ALLOCATE'"
          v-permission="permission.cancelPick"
          @click="cancelPick(crud.selections[0])"
        >
          取消审核
        </el-button>
        <el-button
          slot="right"
          class="filter-item"
          type="danger"
          size="mini"
          :disabled="!((crud.selections.length === 1 && crud.selections[0].status === 'ALLOCATE')|| (crud.selections.length === 1 && crud.selections[0].status === 'PICKUP'))"
          @click="pickConfirmOnOffM(crud.selections[0])"
          v-permission="permission.pickConfirm"
        >
          拣货确认
        </el-button>
        <el-button
          slot="right"
          class="filter-item"
          type="danger"
          size="mini"
          :disabled="crud.selections.length != 1"
          @click="taskLogDataSM(crud.selections[0])"
          v-permission="permission.cancelPickInfo"
        >
          取消拣货
        </el-button>
        <el-button
          slot="right"
          class="filter-item"
          type="warning"
          size="mini"
          :disabled="crud.selections.length != 1"
          @click="viewDetailsM(crud.selections[0])"
          v-permission="permission.viewDetail"
        >
          查看详情
        </el-button>
        <el-button
          slot="right"
          class="filter-item"
          type="success"
          icon="el-icon-edit"
          size="mini"
          v-permission="permission.pickStatusUpdate"
          @click="pickStatusUpdateBtn(crud.selections)"
        >
          状态更新
        </el-button>
      </crudOperation>

      <!--  取消拣货弹窗    -->
      <el-dialog title="拣货取消-拣货确认的记录" :visible.sync="taskLogTF" :close-on-click-modal="false" width="88%">
        <div>
          <el-button
            slot="right"
            class="filter-item"
            type="primary"
            size="mini"
            @click="fullCancel(crud.selections[0])"
          >
            整单取消
          </el-button>
          <el-button
            slot="right"
            class="filter-item"
            type="primary"
            size="mini"
            @click="batchCancel(crud.selections[0])"
          >
            部分取消
          </el-button>
        </div>
        <el-table :data="taskLogTableS" :height="dialogTableHight+'px'" :max-height="dialogTableHight+'px'" style="width: 100%;margin-top: 10px;" @selection-change="taskLogSelection"
                  border
        >
          <el-table-column type="selection" width="55"/>
          <el-table-column prop="id" label="序号"/>
          <el-table-column prop="item.code" label="物料序号"/>
          <el-table-column prop="item.name" label="物料名称"/>
          <el-table-column prop="item.name" label="物料名称"/>
          <el-table-column prop="dstPoint.code" label="目标点位编码"/>
          <el-table-column prop="moveQty" label="拣货数量"/>
          <el-table-column prop="shipQty" label="发运数量"/>
          <!--          <el-table-column prop="dstStockCode" label="目标托盘号"/>-->
          <el-table-column prop="createTime" label="创建时间"/>
        </el-table>
      </el-dialog>

      <!-- 拣货确认弹窗 -->
      <el-dialog title="拣货确认-拣货记录" :visible.sync="pickConfirmTF" :close-on-click-modal="false" width="88%" @close="handleCancle">
        <el-dialog
          width="30%"
          title="单一拣货"
          :visible.sync="oneTf"
          :close-on-click-modal="false"
          append-to-body
        >
          <el-form ref="taskForm" :model="pickTicketButton" label-width="90px" style="height: 90px">
            <el-form-item label="数量:" prop="onePickConfirmNumber"
                          :rules="[{required:true,message:'请输入数量',trigger:'blur'}]"
            >
              <el-input v-model.number="pickTicketButton.onePickConfirmNumber" clearable></el-input>
            </el-form-item>
            <!--            <el-form-item label="目标托盘号:" prop="stockCode"-->
            <!--            >-->
            <!--              <el-input v-model.number="pickTicketButton.stockCode" clearable></el-input>-->
            <!--            </el-form-item>-->
            <el-button type="primary" @click="solePickGoods(crud.selections[0])"
                       style="float: right;padding-left: 10px"
            >确认
            </el-button>
            <el-button type="text" @click="oneTf = false" style="float: right;margin-right: 10px">取消</el-button>

          </el-form>
        </el-dialog>
        <el-dialog
          width="30%"
          title="现品票拣货"
          :visible.sync="xppOnOf"
          :close-on-click-modal="false"
          append-to-body
        >
          <el-form ref="xppTaskForm" :model="pickTicketButton" label-width="90px" style="height: 170px">
            <el-form-item label="现品票:" prop="xppQRCode"
                          :rules="[{required:true,message:'现品票不能为空',trigger:'blur'}]"
            >
              <el-input type="textarea" :autosize="{ minRows: 3}" placeholder="现品票"
                        v-model.trim="pickTicketButton.xppQRCode" clearable
              ></el-input>
            </el-form-item>
            <!--            <el-form-item label="托盘号:" prop="xppQRCode">-->
            <!--              <el-input type="text"  placeholder="托盘号" v-model.trim="pickTicketButton.stockCode" clearable-->
            <!--              ></el-input>-->
            <!--            </el-form-item>-->
            <el-form-item label="备货人:" prop="xppQRCode" v-if="false">
              <el-input type="text" placeholder="备货人" v-model.trim="pickTicketButton.bhr" clearable
              ></el-input>
            </el-form-item>
            <el-button type="primary" @click="xppPickGoods(crud.selections[0])" style="float: right;padding-left: 10px">
              确认
            </el-button>
            <el-button type="text" @click="oneTf = false" style="float: right;margin-right: 10px">取消</el-button>
          </el-form>
        </el-dialog>
        <div>
          <el-button
            slot="right"
            class="filter-item"
            type="primary"
            size="mini"
            @click="singlePick(crud.selections[0])"
          >
            整单拣货
          </el-button>
          <el-button
            slot="right"
            class="filter-item"
            type="primary"
            size="mini"
            @click="bulkPicking(crud.selections[0])"
          >
            批量拣货
          </el-button>
          <el-button
            slot="right"
            class="filter-item"
            type="primary"
            size="mini"
            @click="solePickGoodsOnOff()"
          >
            单一拣货
          </el-button>
          <el-button
            slot="right"
            class="filter-item"
            type="primary"
            size="mini"
            @click="xppPickGoodsOnOff()"
          >
            现品票拣货
          </el-button>
        </div>
        <el-table :data="taskData" :height="dialogTableHight+'px'" :max-height="dialogTableHight+'px'" style="width: 100%;margin-top: 10px;" border @selection-change="taskSelection">
          <el-table-column type="selection" width="55"/>
          <!--          <el-table-column :show-overflow-tooltip="true" prop="itemCode" label="任务号">-->
          <!--            <template slot-scope="scope">-->
          <!--              <div>{{ scope.row.pickDetail.po }}</div>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column :show-overflow-tooltip="true" prop="itemCode" label="物料编码">
            <template slot-scope="scope">
              <div>{{ scope.row.item.code }}</div>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="itemName" label="物料名称">
            <template slot-scope="scope">
              <div>{{ scope.row.item.name }}</div>
            </template>
          </el-table-column>
          <!--          <el-table-column prop="dstStockCode" label="目标托盘号"/>-->
          <el-table-column prop="srcPointCode" label="源库位" width="150px" align="center"/>
          <!--          <el-table-column prop="itemKey.propD1" label="生产日期" width="150px" align="center"/>-->
          <el-table-column prop="itemKey.propC1" label="批次号"/>
          <el-table-column prop="planQty" label="分配数量"/>
          <el-table-column prop="moveQty" label="拣货数量"/>
          <el-table-column prop="dstPointCode" label="目标库位"/>
          <el-table-column prop="createBy" label="创建人"/>
          <el-table-column prop="createTime" label="创建时间"/>
        </el-table>
      </el-dialog>

      <!--表单组件-->
      <el-dialog top="20px" :close-on-click-modal="false" :before-close="crud.cancelCU"
                 :visible.sync="crud.status.cu > 0"
                 :title="crud.status.title" width="450px"
      >


        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="出库库区" prop="area">
            <!--            <el-input v-model="form.area" style="width: 370px;"/>-->
            <el-select v-model="form.area" prop="area" value-key="id" style="width: 250px" clearable>
              <el-option

                v-for="item in areaOptions"
                :key="item.id"
                :label="item.code"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="单号" prop="code">
            <el-input :disabled="true" v-model="form.code" style="width: 250px;"/>
          </el-form-item>
          <el-form-item label="订单日期">
            <!--            <el-input v-model="form.orderDate" style="width: 370px;"/>-->
            <el-date-picker
              style="width: 250px"
              v-model="form.orderDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="单据类型">
            <el-select v-model="form.billType" prop="area" value-key="id" style="width: 250px" clearable>
              <el-option style="width: 250px"
                         v-for="item in billTypeOptions"
                         :key="item.id"
                         :label="item.name"
                         :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="订单数量">
            <el-input v-model="form.orderQuantity" style="width: 250px;"/>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.description" style="width: 250px;"/>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表单组件-->
      <el-dialog top="20px" :close-on-click-modal="false" :before-close="crud.cancelCU"
                 :visible.sync="crud.status.cu > 0"
                 :title="crud.status.title" width="450px"
      >
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="出库库区" prop="area">
            <!--            <el-input v-model="form.area" style="width: 370px;"/>-->
            <el-select v-model="form.area" prop="area" value-key="id" style="width: 250px" clearable>
              <el-option

                v-for="item in areaOptions"
                :key="item.id"
                :label="item.code"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="单号" prop="code">
            <el-input :disabled="true" v-model="form.code" style="width: 250px;"/>
          </el-form-item>
          <el-form-item label="订单日期">
            <!--            <el-input v-model="form.orderDate" style="width: 370px;"/>-->
            <el-date-picker
              style="width: 250px"
              v-model="form.orderDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="单据类型">
            <el-select v-model="form.billType" prop="area" value-key="id" style="width: 250px" clearable>
              <el-option style="width: 250px"
                         v-for="item in billTypeOptions"
                         :key="item.id"
                         :label="item.name"
                         :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="订单数量">
            <el-input v-model="form.orderQuantity" style="width: 250px;"/>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.description" style="width: 250px;"/>
            <!--            明细-->
            <!--            <el-switch-->
            <!--              v-model="pickTicketFrom.remarkOnOff"-->
            <!--              active-color="#13ce66"-->
            <!--              inactive-color="#ff4949"-->
            <!--            >-->
            <!--            </el-switch>-->
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>

      <!--   查看详情   -->
      <OutParticulars :view-details-datas="viewDetailsDatas" :view-details-on-off = viewDetailsOnOff :height="crud.tableHeight" @gbOnOff="gbM()"
                      :select-data="crud.selections[0]" @queryDA="queryData" :key="key" :show_fp="show_fp"
      ></OutParticulars>
      <!-- 新增单独的弹出框 -->
      <el-dialog :visible.sync="saveOnOff" :title="'新增 '+ crud.status.title" width="400px"
      >
        <el-form ref="form" :model="pickTicketFrom" :rules="rules" size="small" label-width="80px">
          <el-form-item label="出库库区" prop="area">
            <!--            <el-input v-model="form.area" style="width: 370px;"/>-->
            <el-select v-model="pickTicketFrom.area" prop="area" value-key="id" style="width: 250px">
              <el-option
                v-for="item in areaOptions"
                :key="item.id"
                :label="item.code"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="单号" prop="code">
            <el-input :disabled="true" v-model="pickTicketFrom.code" style="width: 250px;"/>
          </el-form-item>
          <el-form-item label="订单日期" prop="orderDate">
            <!--            <el-input v-model="pickTicketFrom.orderDate" style="width: 370px;"/>-->
            <el-date-picker
              style="width: 250px"
              v-model="pickTicketFrom.orderDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="单据类型">
            <el-select v-model="pickTicketFrom.billType" prop="area" value-key="id" style="width: 250px"
                       @change="billTypeSelect"
            >
              <el-option
                v-for="item in billTypeOptions"
                :key="item.id"
                :label="item.name"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="订单数量">
            <el-input :disabled="true" v-model="pickTicketFrom.orderQuantity" style="width: 250px;"/>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="pickTicketFrom.description" style="width: 250px;"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="quXiao">取消</el-button>
          <el-button type="primary" @click="submitFrom(pickTicketFrom)">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
                @selection-change="selectionChangeHandlerTwo" :height="crud.tableHeight" border
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="id" label="序号"/>
        <el-table-column prop="code" label="备货单号" width="120px" align="center"/>
        <el-table-column prop="relatedBill1" label="备货计划单号" width="120px" align="center"/>
        <el-table-column :show-overflow-tooltip="true"  width="150px" prop="orderDate" label="订单日期" align="center"/>
        <!--    相关单号2    -->
        <el-table-column :show-overflow-tooltip="true" prop="relatedBill2" width="150px" label="发货单号" align="center"/>
        <el-table-column width="160px" prop="area.name" label="出库库区" align="center"/>
        <el-table-column prop="status" label="状态" width="80px" align="center">
          <template slot-scope="scope">
            {{ dict.label.pick_status[scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column prop="orderQuantity" label="备货需求数" width="90px" align="center"/>
        <!--        未出单数量-->
        <el-table-column prop="wcdn" label="未出单数" width="70px" align="center">
          <template slot-scope="scope">
            {{scope.row.orderQuantity-scope.row.allocatedQuantity}}
          </template>
        </el-table-column>
        <el-table-column prop="allocatedQuantity" label="出单数" width="60px" align="center"/>
        <el-table-column prop="pickedQuantity" label="备货数" width="60px" align="center"/>
        <el-table-column prop="shippedQuantity" label="在途数" width="60px" align="center"/>
        <!--        出单日期-->
        <el-table-column :show-overflow-tooltip="true"  width="150px" prop="outOrderDate" label="出单日期" align="center"/>
        <el-table-column width="150px" prop="shipDate" label="发货日期" align="center"/>
        <el-table-column prop="createBy" label="创建人" align="center"/>
        <el-table-column :show-overflow-tooltip="true" prop="description" label="描述" align="center"/>
        <el-table-column v-if="checkPer(['admin','pickTicket:edit','pickTicket:del'])" label="操作" width="175px"
                         fixed="right"
                         align="center"
        >
          <template slot-scope="scope">
            <el-button type="primary" @click="pickDetailRouter(scope.row)"
                       style="float: right"
            >明细
            </el-button>
            <udOperation
              :data="scope.row"
              :permission="permission"
              :disabled-dle="scope.row.status !== 'OPEN'"
            />

          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <div style="float: right;">
        <pagination/>
      </div>
    </div>
  </div>
</template>

<script>
import crudPickTicket, {
  getCodeNo,
  pickingCancel,
  pickingOperations,
  pickStatusUpdate,
  queryTaskLogDataS,
  xppPickGoods
} from '@/api/pickTicket'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation.vue'
import crudOperation from '@crud/CRUD.operation.vue'
import udOperation from '@crud/UD.operation.vue'
import pagination from '@crud/Pagination.vue'
import { getAreas } from '@/api/area'
import { getBillType } from '@/api/billType'
import { formatDate } from '@/utils/commonUtils'
import crudPickDetail from '@/api/pickDetail'
import { queryTaskData } from '@/api/task'
import excelUtil from '@/api/tools/excelUtil'
import OutParticulars from '@/views/business-pick/pickTicket/OutParticulars.vue'
import {mapGetters} from "vuex";

const defaultForm = {
  id: null,
  area: null,
  shArea: null,
  code: null,
  status: 'OPEN',
  cusCode: null,
  relatedBill1: null,
  relatedBill2: null,
  relatedBill3: null,
  orderDate: null,
  shipDate: null,
  fhBy: null,
  receivedDate: null,
  slBy: null,
  slQty: 0,
  tlDate: null,
  tlBy: null,
  tlQty: 0,
  shipToName: null,
  shipAddress: null,
  shipMan: null,
  shipTel: null,
  orderQuantity: 0,
  allocatedQuantity: 0,
  pickedQuantity: 0,
  shippedQuantity: 0,
  xbQty: 0,
  ztQty: 0,
  xqQty: 0,
  bhQty: 0,
  vehicle: null,
  billType: null,
  bpType: null,
  deptId: null,
  description: null,
  createBy: null,
  updateBy: null,
  createTime: null,
  updateTime: null,
  remarkOnOff: false,
  pureReqQty:null,
  prepRe:null,
  outOrderDate:null,
  stockingDate:null
}
export default {
  name: 'BcblPickTicket',
  components: { OutParticulars, pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['pick_status','station_type'],
  cruds() {
    return CRUD({
      title: '波次补料',
      url: 'api/pickTicket',
      idField: 'id',
      sort: 'id,desc',
      crudMethod: { ...crudPickTicket }, optShow: {
        add: false,
        edit: false,
        del: true,
        reset: false,
        download: false
      },
      query: { billTypeCode: 'BCBL' },
      queryOnPresenterCreated: true
    })
  },
  data() {
    return {
      show_fp: true,
      permission: {
        add: ['admin', 'pickTicket:add'],
        edit: ['admin', 'pickTicket:edit'],
        del: ['admin', 'pickTicket:del'],
        savepickTicket: ['admin', 'bcblPickTicket:savepickTicket'],
        showReport: ['admin', 'bcblPickTicket:showReport'],
        allocate: ['admin', 'bcblPickTicket:allocate'],
        cancelPick: ['admin', 'bcblPickTicket:cancelPick'],
        pickConfirm: ['admin', 'bcblPickTicket:pickConfirm'],
        cancelPickInfo: ['admin', 'bcblPickTicket:cancelPick'],
        viewDetail: ['admin', 'bcblPickTicket:viewDetail'],
      },
      rules: {
        area: [
          { required: true, message: '出库库区不能为空', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '单号不能为空', trigger: 'blur' }
        ],
        orderDate: [{
          required: true, message: '订单日期不能为空', trigger: 'blur'
        }]
      },
      queryTypeOptions: [
        { key: 'area', display_name: '出库库区' },
        { key: 'code', display_name: '单号' },
        { key: 'status', display_name: '状态查询' },
        { key: 'relatedBill1', display_name: '备货计划单号' }
      ],
      pickTicketFrom: {
        id: null,
        area: null,
        shArea: null,
        code: null,
        status: 'OPEN',
        cusCode: null,
        relatedBill1: null,
        relatedBill2: null,
        relatedBill3: null,
        orderDate: null,
        shipDate: null,
        fhBy: null,
        receivedDate: null,
        slBy: null,
        slQty: 0,
        tlDate: null,
        tlBy: null,
        tlQty: 0,
        shipToName: null,
        shipAddress: null,
        shipMan: null,
        shipTel: null,
        orderQuantity: 0,
        allocatedQuantity: 0,
        pickedQuantity: 0,
        shippedQuantity: 0,
        xbQty: 0,
        ztQty: 0,
        xqQty: 0,
        bhQty: 0,
        vehicle: null,
        billType: null,
        bpType: null,
        deptId: null,
        description: null,
        createBy: null,
        updateBy: null,
        createTime: null,
        updateTime: null,
        remarkOnOff: false,
        pureReqQty:null,
        prepRe:null,
        outOrderDate:null,
        stockingDate:null
      },
      xppOnOf: false,
      saveOnOff: false,
      areaOptions: [],
      billTypeOptions: [],
      //拣货确认 弹窗开关
      pickConfirmTF: false,
      taskData: [],
      pickTicketButton: {
        //拣货确认按钮号 1整单拣货 2单一拣货 3批量拣货 4取消拣货
        pickConfirmNo: 0,
        //单一拣货 输入数量
        onePickConfirmNumber: 0,
        //单一拣货输入的容器
        stockCode: null,
        //task表
        taskId: [],
        //选着的其他出库数据
        pickTicketId: 0,
        //拣货批量取消使用
        taskLogId: [],
        //现品票二维码
        xppQRCode: null,
        //备货人
        bhr:null,
      },
      //task选着的数据
      tsakSelectData: [],
      oneTf: false,
      //取消拣货的开关
      taskLogTF: false,
      taskLogTableS: [],
      taskLogSelectionData: [],
      dialogTableHight: 200,
      //查看详情viewDetails
      //查看详情开关
      viewDetailsOnOff:false,
      //查看详情的数据
      viewDetailsDatas:{
        //出库明细 data_pick_detail
        outboundDetailsData:[],
        //分配记录 data_task
        allocationRecords:[],
        //拣货记录 data_task_log
        pickingRecords:[]
      },
      //当前标签页
      activeName: 'first',
      key:1
    }
  },
  watch:{
    taskData:{
      handler(newName, oldName) {
        this.taskData = newName;
      },
      immediate: true,
      deep:true
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  mounted() {
    //数据加载
    this.getAreaOptionsAll()
    this.getBillTypeAll()
    this.initDataConfig()
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    initDataConfig() {
      //获取浏览器的高
      this.dialogTableHight = (window.screen.availWidth/5);
    },
    formatDate1(value) {
      return formatDate(value)
    },
    //获取库区数据
    getAreaOptionsAll() {
      getAreas().then(res => {
        this.areaOptions = res
      })
    },
    //单据类型
    getBillTypeAll() {
      getBillType().then(res => {
        this.billTypeOptions = res
      })
    },
    getCodeNoM() {
      //新增的开关
      this.$router.push({ path: '/business-pick/viewBcblDetail' })
    },
    //获取当前时间
    getNewDate() {
      const date = new Date()
      const year = date.getUTCFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      const formattedDate = `${year}-${month}-${day}`
      return formattedDate
    },
    billTypeSelect(value) {
      console.log(value)
      this.getCodeNoM(value.code)
    },
    submitFrom(data) {
      crudPickTicket.add(data).then(res => {
        this.$message.success('新增成功')
        this.saveOnOff = false
        this.pickTicketFrom = defaultForm
        this.crud.toQuery()
      })
    },
    pickDetailRouter(datas) {
      this.$router.push({ path: '/business-pick/viewBcblDetail', query: { ids: datas.id } })
    },
    quXiao() {
      this.saveOnOff = false
      this.pickTicketFrom = defaultForm
    },
    selectionChangeHandlerTwo(val) {
      this.crud.selections = val
      if (this.crud.selections.length == 0) {
        this.show_fp = true
        return
      }

      const status = []
      for (let i = 0; i < val.length; i++) {
        status.push(this.crud.selections[i].status)
      }

      if (this.isAllEqual(status) && status[0] == 'OPEN') {
        this.show_fp = false
        return
      }

      if (this.isAllEqual(status) && status[0] == 'ALLOCATE') {
        this.show_fp = true
      }
    },
    isAllEqual(array) {
      if (array.length > 0) {
        return !array.some(function(value, index) {
          return value !== array[0]
        })
      } else {
        return true
      }
    },
    allocate(datas) {
      this.$confirm(`选中${datas.length}条数据确认是否分配?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        const ids = []
        for (let i = 0; i < datas.length; i++) {
          ids.push(datas[i].id)
        }
        crudPickDetail.allocatePick(ids).then(res => {
          this.crud.notify('分配成功！', CRUD.NOTIFICATION_TYPE.SUCCESS)
          this.crud.toQuery()
        }).catch(() => {
          this.crud.notify('分配失败！', CRUD.NOTIFICATION_TYPE.ERROR)
          this.crud.toQuery()
        })

      }).catch(() => {
        this.$refs.table.clearSelection()
        this.crud.notify('取消成功！', CRUD.NOTIFICATION_TYPE.SUCCESS)
      })
    }, //queryPickTask
    pickConfirmOnOffM(data) {
      queryTaskData({ billCode: data.code }).then(res => {
        this.taskData = res
      })
      this.pickConfirmTF = true
    },
    //取消拣货 queryTaskLogDataS
    taskLogDataSM(data) {
      let data_ = this.pickTicketButton
      data_.pickTicketId = data.id
      queryTaskLogDataS(data_).then(res => {
        this.taskLogTableS = res
        this.taskLogTF = true
      })
    },
    //取消分配
    cancelPick(data) {
      if (data.status === 'ALLOCATE') {
        let dataTF_ = this.pickTicketButton;
        dataTF_.pickTicketId = data.id
        queryTaskLogDataS(dataTF_).then(res => {
          if (res.length === 0){
            let data_ = this.pickTicketButton
            data_.pickConfirmNo = 4
            data_.pickTicketId = data.id
            pickingOperations(data_).then(res => {
              this.$message.success(res)
              this.crud.toQuery()
            })
          }else {
            this.$message.error('该单据有已经拣货确认的数据');
          }
        })
      } else {
        this.$message.error('状态必须是已分配的才能取消拣货')
      }
    },
    //整单分配
    singlePick(data) {
      if (data.status === 'ALLOCATE'||data.status ==='PICKUP') {
        let data_ = this.pickTicketButton
        data_.pickConfirmNo = 1
        data_.pickTicketId = data.id
        pickingOperations(data_).then(res => {
          this.pickConfirmTF = false
          this.$message.success(res)
          this.crud.toQuery()
        })
      } else {
        this.$message.error('状态必须是已分配的才能拣货确认')
      }
    },
    //批量拣货
    bulkPicking(data) {
      let data_ = this.pickTicketButton
      data_.pickConfirmNo = 3
      data_.pickTicketId = data.id
      if (this.tsakSelectData.length > 0) {
        for (const dataKey of this.tsakSelectData) {
          data_.taskId.push(dataKey.id)
        }
        pickingOperations(data_).then(res => {
          this.pickConfirmTF = false
          this.$message.success(res)
          this.crud.toQuery()
        })
      } else {
        this.$message.error('你未选着数据')
      }
    },
    taskLogSelection(data) {
      this.taskLogSelectionData = data
    },
    taskSelection(data) {
      this.tsakSelectData = data
    },
    //单一拣货
    solePickGoods(data) {
      this.$refs['taskForm'].validate((valid) => {
        if (valid) {
          let data_ = this.pickTicketButton
          data_.pickConfirmNo = 2
          data_.pickTicketId = data.id
          data_.taskId = []
          if (this.tsakSelectData.length === 1) {
            for (const dataKey of this.tsakSelectData) {
              data_.taskId.push(dataKey.id)
            }
            pickingOperations(data_).then(res => {
              this.pickConfirmOnOffM(data)
              this.$message.success(res)
              this.oneTf = false
            })
          } else {
            this.$message.error('你未选着数据或选着了多个')
          }
        } else {
          return false
        }
      })
    },
    //单一拣货的开关
    solePickGoodsOnOff() {
      if (this.tsakSelectData.length !== 1) {
        if (this.tsakSelectData.length>0){
          this.$message.error("你选着的数据大于1条")
        }else {
          this.$message.error("你未选着数据")
        }
      }else {
        // this.pickConfirmTF = false
        this.pickTicketButton.onePickConfirmNumber = this.tsakSelectData[0].planQty - this.tsakSelectData[0].moveQty;
        this.oneTf = true
      }
    },
    //拣货确认取消
    // 整单取消
    fullCancel(data) {
      let data_ = this.pickTicketButton
      data_.pickConfirmNo = 5
      data_.pickTicketId = data.id
      pickingCancel(data_).then(res => {
        this.taskLogTF = false
        this.crud.toQuery()
        this.$message.success(res)
      })
    },
    //批量取消
    batchCancel(data) {
      let data_ = this.pickTicketButton
      data_.pickConfirmNo = 6
      data_.pickTicketId = data.id
      data_.taskLogId = []
      if (this.taskLogSelectionData.length > 0) {
        for (const dataKey of this.taskLogSelectionData) {
          data_.taskLogId.push(dataKey.id)
        }
        pickingCancel(data_).then(res => {
          this.taskLogTF = false
          this.crud.toQuery()
          this.$message.success(res)

        })
      } else {
        this.$message.error('你未选着数据')
      }
    },
    handleCancle(){
      this.pickTicketButton.onePickConfirmNumber = 0
      this.pickTicketButton.stockCode = null
      this.pickConfirmTF = false
      this.crud.toQuery()
    },
    // 查询详情按钮的方法
    viewDetailsM(data){//传入选中的数据
      //判断数据
      // console.log(data)
      //存值
      let data_ = {pickTicketId:null};
      data_.pickTicketId=data.id;

      crudPickTicket.queryDetails(data.id).then(res=>{
        //查询出库明细
        this.viewDetailsDatas.outboundDetailsData = res.pickDetailList;
        //查询分配记录
        this.viewDetailsDatas.allocationRecords = res.pickDetailAllocateList;
        //查询拣货记录
        this.viewDetailsDatas.pickingRecords=res.pickDetailPickingList;
      })
      //打开弹框
      this.viewDetailsOnOff = true;
    },
    //当前标签页切换 触发的回调
    handleClick(tab, event) {
    },

    //日期格式化
    getFormatDate(data){
      return  formatDate(data);
    },
    //现品票拣货的开关
    xppPickGoodsOnOff() {
      this.xppOnOf = true
    },
    //现品票拣货
    xppPickGoods(data) {
      this.$refs['xppTaskForm'].validate((valid) => {
        if (valid) {
          let data_ = this.pickTicketButton
          data_.pickConfirmNo = 7
          data_.pickTicketId = data.id
          xppPickGoods(data_).then(res => {
            this.pickConfirmOnOffM(data)
            this.$message.success("操作成功")
            this.xppOnOf = false
            this.pickTicketButton.xppQRCode = null;
            this.pickTicketButton.stockCode = null;
            this.pickTicketButton.bhr = null;
          })
        } else {
          return false
        }
      })
    },
    pickStatusUpdateBtn(data){
      this.loading_add=true;
      let ids = [];
      for (const obj of data) {
        ids.push(obj.id)
      }
      pickStatusUpdate(ids).then(res=>{
        this.crud.toQuery()
        this.loading_add=false;
        this.$message.success("更新成功")
      },e=>{
        this.loading_add=false;
      })
    },
  showReport(data){
    this.$router.push({path:'/business-pick/business-bom/bhd_report',query:{tableID:'备货指示单',parm: "code="+data.code+"&username="+this.user.username}})
  },
  doDownlodExcel(){
      const fileName = '备货指示单'
      excelUtil.PostDownloadExcel(this.excelQueryParam,fileName)
    },
    gbM(){
      this.viewDetailsOnOff=false;
      this.crud.toQuery()
      this.key=this.key+1;

    },
    queryData(id){
      this.key=this.key+1;
      // let data_ = {pickTicketId:null};
      // data_.pickTicketId=id;
      // crudPickTicket.queryDetails(data.id).then(res=>{
      //   //查询出库明细
      //   this.viewDetailsDatas.outboundDetailsData = res.pickDetailList;
      //   //查询分配记录
      //   this.viewDetailsDatas.allocationRecords = res.pickDetailAllocateList;
      //   //查询拣货记录
      //   this.viewDetailsDatas.pickingRecords=res.pickDetailPickingList;
      // })
    }
  }
}
</script>

<style scoped>

</style>
