<template>
  <div>
    <!--   查看详情   -->
    <el-dialog :visible.sync="viewDetailsOnOff" :title="'详情'" top="10px" width="70%" :close-on-click-modal="false"
               @close="gbOnOff()"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="出库明细" name="first">
         <!-- <div>
            <el-button
              class="filter-item"
              type="success"
              icon="el-icon-edit"
              size="mini"
              :disabled="show_fp"
              @click="allocate([selectData])"
            >
              审核
            </el-button>
            <el-button
              class="filter-item"
              type="success"
              size="mini"
              :disabled="selectData.status != 'ALLOCATE'"
              @click="cancelPick(selectData)"
            >
              取消审核
            </el-button>
          </div>-->
          <!-- 出库明细 -->
          <el-table ref="tableOutboundDetailsData" :data="viewDetailsDatas.outboundDetailsData" size="small"
                    style="width: 100%;"
                    height="60vh" border
          >
            <el-table-column type="selection" width="55"/>
            <el-table-column prop="item.code" label="品番" width="100px"/>
            <el-table-column prop="item.name" label="品名" width="120px"/>
            <!--需求数量-->
            <!--<el-table-column prop="xqQty" label="需求数" width="60px"/>-->
            <el-table-column prop="item.extendD3" label="收容数" width="60px" align="center"/>

            <!--备货需求数量 订单-->
            <!--<el-table-column prop="propC4" label="纯需求数" width="80px"/>-->
            <!--纯需求数量-->
            <el-table-column prop="orderQty" label="需求数"/>
            <!--未单数量  未出单=纯需求-出单数-->
            <el-table-column prop="wcdn" label="未单数">
              <template slot-scope="scope">
                {{ scope.row.orderQty - scope.row.allocatedQty }}
              </template>
            </el-table-column>
            <!--出单数量 分配 出单数=分配时候写入的数量-->
            <el-table-column prop="allocatedQty" label="出单数" />
            <!--备货数量 拣货-->
            <el-table-column prop="pickedQty" label="备货数" />
            <!--在途数量 发运-->
            <!--<el-table-column prop="shippedQty" label="在途数" width="60px"/>-->
            <!--线边数量-->
            <!--<el-table-column prop="xbQty" label="线边数" width="60px"/>-->
            <!--<el-table-column prop="supplier" label="供应商" width="120"/>-->
            <!--制造库位 点位-->
            <el-table-column prop="point.code" label="库位" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="出单记录" name="second">
          <!--<div>
            <el-button
              slot="right"
              class="filter-item"
              type="primary"
              size="mini"
              @click="cancelAllocateBtn(selectData)"
            >
              取消审核
            </el-button>
            <el-button
              slot="right"
              class="filter-item"
              type="primary"
              size="mini"
              @click="singlePick(selectData)"
            >
              整单拣货
            </el-button>
            <el-button
              slot="right"
              class="filter-item"
              type="primary"
              size="mini"
              @click="bulkPicking(selectData)"
            >
              批量拣货
            </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 ref="tableAllocationRecords" :data="viewDetailsDatas.allocationRecords" size="small"
                    style="width: 100%;"
                    height="60vh" border @selection-change="taskSelection"
          >
            <el-table-column type="selection" width="55"/>
            <el-table-column :show-overflow-tooltip="true" prop="item.code" label="品番" />
            <el-table-column :show-overflow-tooltip="true" prop="item.name" label="品名" />
            <el-table-column prop="dstStockCode" label="箱单号"/>
            <el-table-column prop="srcPointCode" label="库位" align="center"/>
            <!--              <el-table-column prop="itemKey.propD1" label="生成日期" width="150px" align="center"/>-->
            <el-table-column prop="itemKey.propC1" label="批次号"  width="100px"/>
            <el-table-column prop="planQty" label="出单数量"/>
            <el-table-column prop="moveQty" label="拣货数量"/>
            <!--<el-table-column prop="dstPointCode" label="目标库位"/>
            <el-table-column :show-overflow-tooltip="true" prop="supplier" label="供应商">
              <template slot-scope="scope">
                <div>{{ scope.row.pickDetail.supplier }}</div>
              </template>
            </el-table-column>-->
            <el-table-column prop="createBy" label="创建人"/>
            <el-table-column prop="createTime" label="创建时间" width="180px">

            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="拣货记录" name="third">
          <!--<div>
            <el-button
              slot="right"
              class="filter-item"
              type="primary"
              size="mini"
              @click="fullCancel(selectData)"
            >
              整单取消
            </el-button>
            <el-button
              slot="right"
              class="filter-item"
              type="primary"
              size="mini"
              @click="batchCancel(selectData)"
            >
              部分取消
            </el-button>
          </div>-->
          <!-- 拣货记录 -->
          <el-table ref="tablePickingRecords" :data="viewDetailsDatas.pickingRecords" size="small" style="width: 100%;"
                    height="60vh" border @selection-change="taskLogSelection"
          >
            <el-table-column type="selection" width="55"/>
            <el-table-column prop="item.code" label="品番"/>
            <el-table-column prop="item.name" label="品名"/>
            <el-table-column prop="itemKey.propC1" label="批次号"/>
            <el-table-column prop="itemKey.propC2" label="税别"/>
            <el-table-column prop="task.srcPoint.code" label="库位" width="90px"/>
            <el-table-column prop="moveQty" label="拣货数量" width="90px"/>
            <el-table-column prop="srcStockCode" label="现品票" :show-overflow-tooltip="true"/>
            <el-table-column prop="task.dstStockCode" label="箱单号"/>
            <el-table-column prop="createTime" label="创建时间"/>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <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(selectData)"
                   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(selectData)" 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>
</template>
<script>

import { pickingCancel, pickingOperations, queryTaskLogDataS, xppPickGoods ,pickWhole,pickBatch,pickSingle,pickForXpp} from '@/api/pickTicket'
import crudPickDetail,{cancelAllocate} from '@/api/pickDetail'
import CRUD from '@crud/crud'

export default {
  props: {
    viewDetailsDatas: {
      type: Object,
      default: {
        //出库明细 data_pick_detail
        outboundDetailsData: [],
        //分配记录 data_task
        allocationRecords: [],
        //拣货记录 data_task_log
        pickingRecords: []
      }
    },
    viewDetailsOnOff: {
      type: Boolean,
      default: false
    },
    height: {
      type: Number,
      default: null
    },
    selectData: {
      type: Object,
      default: {}
    },
    show_fp:{
      type:Boolean,
      default:false
    }
  },
  name: 'OutParticulars',
  watch:{
    viewDetailsDatas(newV,oldV){
      this.viewDetailsDatas(newV)
    }
  },
  data() {
    return {
      viewDetailsDatas: this.viewDetailsDatas,
      viewDetailsOnOff: this.viewDetailsOnOff,
      //当前标签页
      activeName: 'first',
      taskLogSelectionData: [],
      //task选着的数据
      tsakSelectData: [],
      oneTf: false,
      //拣货确认 弹窗开关
      pickConfirmTF: false,
      cancelAllocateTF: false,
      xppOnOf: false,
      pickTicketButton: {
        //拣货确认按钮号 1整单拣货 2单一拣货 3批量拣货 4取消拣货
        pickConfirmNo: 0,
        //单一拣货 输入数量
        onePickConfirmNumber: 0,
        //单一拣货输入的容器
        stockCode: null,
        //task表
        taskId: [],
        //选着的其他出库数据
        pickTicketId: 0,
        //拣货批量取消使用
        taskLogId: [],
        //现品票二维码
        xppQRCode: null,
        //备货人
        bhr: null
      }
    }
  },
  mounted() {

  },
  methods: {
    // queryData(){
    //   this.$emit('queryDA',this.selectData.id)
    // },
    gbOnOff() {
      this.$emit('gbOnOff')
    },
    taskLogSelection(data) {
      this.taskLogSelectionData = data
    },
    taskSelection(data) {
      this.tsakSelectData = data
    },
    //取消分配
    cancelAllocateBtn(data) {
      if (this.tsakSelectData.length > 0) {
        let list = []
        for (const datum of data) {
          list.push(datum.id)
        }
        cancelAllocate(list).then(res => {
          this.cancelAllocateTF = false
          this.$message.success(res)
          this.gbOnOff();
        })
      } else {
        this.$message.error('你未选着数据')
      }
    },
    //整单拣货
    singlePick(data) {
      if (data.status === 'ALLOCATE' || data.status === 'PICKUP') {
        pickWhole(data.id).then(res => {
          this.pickConfirmTF = false
          this.$message.success(res)
          this.gbOnOff();
        })
      } else {
        this.$message.error('状态必须是已分配的才能拣货确认')
      }
    },
    //批量拣货
    bulkPicking(data) {
      if (this.tsakSelectData.length > 0) {
        let list = []
        for (const datum of data) {
          list.push(datum.id)
        }
        pickBatch(list).then(res => {
          this.pickConfirmTF = false
          this.$message.success(res)
           this.gbOnOff();
        })
      } else {
        this.$message.error('你未选着数据')
      }
    },
    //单一拣货确认
    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)
            }
            pickSingle(data_).then(res => {
              this.gbOnOff();
              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.pickTicketButton.onePickConfirmNumber = this.tsakSelectData[0].planQty - this.tsakSelectData[0].moveQty
        this.oneTf = true
      }
    },
    //现品票拣货的开关
    xppPickGoodsOnOff() {
      this.xppOnOf = true
    },
    //现品票拣货
    xppPickGoods(data) {
      this.$refs['xppTaskForm'].validate((valid) => {
        if (valid) {
          let data_ = this.pickTicketButton
          data_.pickConfirmNo = 7
          data_.pickTicketId = data.id
          pickForXpp(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
        }
      })
    },
    //拣货确认取消
    // 整单取消
    fullCancel(data) {
      let data_ = this.pickTicketButton
      data_.pickConfirmNo = 5
      data_.pickTicketId = data.id
      pickingCancel(data_).then(res => {
        this.taskLogTF = false
         this.gbOnOff();
        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.gbOnOff();
          this.$message.success(res)

        })
      } else {
        this.$message.error('你未选着数据')
      }
    },
    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.allocate(ids).then(res => {
          this.gbOnOff();
          this.crud.notify('分配成功！', CRUD.NOTIFICATION_TYPE.SUCCESS)
        }).catch(() => {
          this.gbOnOff();
          this.crud.notify('分配失败！', CRUD.NOTIFICATION_TYPE.ERROR)
        })
      }).catch(() => {
        this.$refs.table.clearSelection()
        this.crud.notify('取消成功！', CRUD.NOTIFICATION_TYPE.SUCCESS)
      })
    },
    //取消分配
    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.gbOnOff();
            })
          }else {
            this.$message.error('该单据有已经拣货确认的数据');
          }
        })
      } else {
        this.$message.error('状态必须是已分配的才能取消拣货')
      }
    },
  }
}

</script>

<style scoped>

</style>
