<!-- 任务索取 -->
<template>
  <div class='taskFor'>
    <scan-code v-model='scanVisible' ref='scan' :stage='stage' stagePackLevel="2" :scanTable='scanTableList'></scan-code>

    <!-- 	{"type":"0-整件 1-零货 2-功能库房","warehouseId":"仓id"} -->
    <get-info :bldgInfo='bldgInfo' :type='1' text='零货'></get-info>

    <div style='padding-top: 15px; display: flex; background: white; border-bottom: 1px solid #e8e8e8'>
      <div class='navTab'>
        <div @click="$emit('update:current', 0)" style='cursor: pointer; position: relative; top: -9px'>
          <p-icon type='arrow-left' style='color: #178fff; font-size: 16px; margin-top: 10px; margin-right: 10.5px' />
          <span style='font-size: 16px; color: #333333; line-height: 22px'>返回</span>
        </div>
        <div class='tab2' @click="$emit('update:current', 1)">任务索取</div>
        <div class='tab1'>任务确认</div>
      </div>
    </div>
    <div class='searchWarehouse'>
      <p-grid-form ref='search' :items='items' />
    </div>
    <div class='main'>
      <div class='main_left'>
        <div class='search_left'>
          <p-input placeholder='请输入拣选单号' v-model='searchLeft.parames' style='width: 150px' />
          <p-button type='primary' @click='searchBldg'>查询</p-button>
          <p-button type='primary' @click='println'>打印</p-button>
          <p-button type='primary' :disabled='isScan' @click='scan'>扫描监管码</p-button>
        </div>
        <p-table
          :columns='columns'
          :data-source='data'
          :showHeader='false'
          :hasRowCount='false'
          :colorTransformRow='false'
          :hasRowSelectCheck='true'
          :rowSelectType='1'
          :selectedRowKeys.sync='selectedRowKeys'
          rowKey='pickOrderId'
          :scroll='{ y: 650 }'
          @clickRow='clickRow'
          @checkRow='checkRow'
          @change='changePagination'
          :pagination='pagination'
          :loading='loading'
        >
          <template slot='status' slot-scope='text, rows, index'>
            <span :class="{ '1': 'red', '2': 'blue', '3': 'green' }[text]">
              {{ text | statusFilter }}
            </span>
          </template>
          <!-- <span slot="action" slot-scope="text, record,index" class="action" v-if="record.status==1">
					<p-button >取消</p-button>
			  </span> -->
        </p-table>
      </div>
      <div class='main_right'>
        <div class='table_list'>
          <table-list
            ref='confrim_list'
            :pickOrderId='pickOrderId'
            :values='values'
            @search='search'
            @emitData='emitData'
            @redsuccess='redsuccess'
          >
          </table-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import scanCode from '../../../components/scanCode' //扫描监管码
// 设置默认仓库
import { setwarehouse } from '@/views/kzyWMS/SearchModal/mixins_warehouse.js'
import { items_warehous } from './index.js'
import { columns } from '../taskFor/taskFor.js' //'./index.js';
import tableList from './tableList.vue'
// 打印
import { toPrintServer, tempType } from '@/views/kzyWMS/utils/printServer.js'
import { picktask_page_pickorder, scan_warehouse, picktask_print_paperslip } from '../../config/api.js'
import getInfo from '../../components/getInfo.vue'
import { mapGetters } from 'vuex'

export default {
  mixins: [setwarehouse],
  components: { tableList, getInfo, scanCode },
  filters: {
    statusFilter(value) {
      if (value === '0') return '待索取'
      if (value === '1') return '待确认'
      if (value === '2') return '已完成'
      return value
    }
  },
  props: {
    current: { type: Number, default: 1 }
  },
  computed: {
    ...mapGetters(['userInfo', 'warehouse'])
  },
  data() {
    return {
      columns,
      items: items_warehous(this),
      loading: false,
      data: [],
      selectedRowKeys: [],
      selectIds: [],
      values: null,
      bldgInfo: {},
      pickOrderId: '', // 拣选单id
      // rows:{ id:1,orderNo:'238912739871239' }, //左边选中拣选单时
      barcord: '', //扫描打码
      searchLeft: {
        pickTaskType: 1, //0-整件/1-散件/2-整散合一
        parames: '', //拣选单号/工号
        // warehouseId: this.$store.state.user.warehouse.warehouseId,	//仓库id，暂时关闭方便显示测试数据
        status: '1' // 	状态 0：待拣选 1：待复核 2：已完成，暂时关闭方便显示测试数据
      },
      pagination: {
        total: 0,
        pageSize: 7, //每页中显示10条数据
        current: 1
        // showSizeChanger: true,
        // pageSizeOptions: ['10', '15', '20'], //每页中显示的数据
        // showTotal: (total) => `共有 ${total} 条数据`, //分页中显示总的数据
      },
      scanVisible: false, //p-modal弹窗：扫描监管码
      warehouseId: '',
      isScan: true, //扫描监管码是否禁用。
      scanTableList: [], // 扫描监管码数据
      stage: 1 //扫码阶段：0=入库质检 1=PC拣货 2=PC内复核 3=PC外复核 4=补录 5=PDA拣货 6=PDA内复核 7=PDA外复核
    }
  }, //data
  methods: {
    searchBldg() {
      this.$refs.search.form.validateFields((err, values) => {
        if (!err) {
          this.getData(Object.assign(this.searchLeft, this.$refs.search.form.getFieldsValue()))
        }
      })
    },
    redsuccess() {
      console.log('红冲成功')
      // let flag = this.data.some(item => { return item.pickOrderId == this.pickOrderId})
      this.getData(this.searchLeft)
    },
    getData(params) {
      params = {
        pageNum: this.pagination.current,
        pageSize: this.pagination.pageSize,
        operatorCode: this.userInfo.employeeNo, //工号
        ...params
      }
      this.loading = true
      picktask_page_pickorder(params)
        .then((res) => {
          if (res.success) {
            this.data = res.data.list
            this.pagination.total = Number(res.data.totalCount)
            this.loading = false
            this.selectedRowKeys.length = 0
          } else {
            this.loading = false
            this.$exception(res)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    changePagination(pagination, filters, sorter) {
      // 分页变化
      console.log(pagination, filters, sorter, '分页变化分页变化')
      this.pagination = pagination
      this.getData(this.searchLeft) //分页查询所有列表
    },
    checkRow(selectId, selectedRows) {
      // this.rows = { ...selectedRows[0] };
      console.log('选择checkRow：', selectId, selectedRows)
      this.selectIds = [...selectId]
    },
    // 点击当前整条行
    clickRow(event, selectId, selectedRows) {
      console.log('点击clickRow：', selectId, selectedRows)
      this.pickOrderId = selectId //拣选单id
    },
    // 带建筑物查询
    search() {
      this.$refs.search.form.validateFields((err, values) => {
        if (!err) {
          this.values = { ...values }
          console.log('search:', this.values)
        }
      })
    },
    // 扫描监管码
    scan() {
      if (this.scanTableList.length) {
        // this.scanTableList = [...selectedRows];
        this.scanVisible = true
      } else {
        this.$message.warning('该商品不需要要扫描监管码')
      }
    },
    // 是否可扫描监管码 scanSupervisionCodeStage[integer] 扫描监管码节点：0=拣货 1=外复核
    scanCode() {
      // this.scanVisible = true ;
      scan_warehouse({ id: this.warehouseId }).then((res) => {
        if (res.success) {
          // this.isScan = res.data.scanSupervisionCodeStage==0?false:true;
          // 扫描监管码节点：0=整件拣货、零货拣货 1=整件外复核、零货拣货 2=整件拣货、零货内复核 3=整件外复核、零货内复核
          if (res.data.scanSupervisionCodeStage == 0 || res.data.scanSupervisionCodeStage == 1) {
            this.isScan = false
          }
          // console.log("扫描监管码节点：0=拣货 1=外复核:",this.isScan,res.data.scanSupervisionCodeStage);
        }
      })
    },
    // 接收数据 过滤isSupervise==1
    emitData(selectedRows, db, ok) {
      // 判断是否双击
      if ((selectedRows.length == 1 && selectedRows[0].isSupervise && db) || ok) {
        this.scanVisible = true
      } else {
        this.scanVisible = false
      }
      let temp = selectedRows.filter((item) => item.isSupervise == 1)
      this.scanTableList = temp.map((item) => {
        return {
          refBillId: item.pickTaskId, //拣选任务主表id
          refBillLineId: item.pickTaskDId, //拣选任务明细id

          packSize: item.maxSu, // 混入默认大包装参数
          itemId: item.itemId, //商品id
          containerCode: item.containerCode, //容器编号
          batchNum: item.batchNum, //批次号
          itemName: item.itemName, //商品名称
          itemNum: item.itemCode, //商品编码
          specification: item.itemSpecs, //商品规格
          uom: item.uom, //包装单位
          pieceQty: item.qty, //数量
          caseQty: item.uomQty, //件数
          oddPieceQty: item.oddPieceQty, //零散数
          minSu: item.minSu, //小包装
          middleSu: item.middleSu, //中包装
          maxSu: item.maxSu, // 大包装
          manufacturerName: item.manufacturer, // 生产厂家
          manufacturerLotNum: item.manufacturerLotNum, //批号2021.7.7
          srcCode: item.srcCode, // 源单编号
          whAreaCategory: item.warehouseAreaCode //库别/库区
        }
      })
      console.log('转换字段后数据：', this.scanTableList)
    },
    // 异步打印查询
    println_search() {
      let _this = this
      return new Promise((resolve, reject) => {
        this.$refs.search.form.validateFields((err, values) => {
          if (!err) {
            let params = {
              warehouseId: _this.$refs.search.form.getFieldsValue().warehouseId,
              bldgId: _this.$refs.search.form.getFieldsValue().bldgId,
              pickTaskType: '1', //0-整件 1-零货 2-功能库房
              pickOrderIds: _this.selectIds
            }
            picktask_print_paperslip(params).then((res) => {
              if (res.success) {
                resolve(res.data[0].data)
              } else {
                _this.$message.warning('打印数据查询失败!', 5)
                reject('打印数据查询失败！')
              }
            })
          }
        })
      })
    },
    // 打印
    println() {
      if (this.selectIds.length) {
        this.println_search().then((res) => {
          console.log('打印：', res)
          const warehouseId = this.$refs.search.form.getFieldsValue().warehouseId
          toPrintServer(res, warehouseId, tempType.lhjhzd, this.$refs.search.form.getFieldsValue().bldgId).then(
            (res) => {
              if (!res.success) {
                this.$exception(res)
                return
              }
              this.$message.success(res.message)
            }
          )
        })
      } else {
        this.$message.warning('无打印数据！')
      }
    }
  }, //methods
  mounted() {
    this.warehouseId = this.warehouse.warehouseId
    this.$refs.search.form.setFieldsValue({
      warehouseId: this.warehouse.warehouseId,
      warehouseName: this.warehouse.warehouseName
    })
    // this.getData(this.searchLeft);  //分页查询所有列表
    this.scanCode()
  } //created
}
</script>

<style scoped lang='less'>
.taskFor {
  .navTab {
    display: flex;

    .tab1 {
      color: #2b80ff;
      font-size: 16px;
      margin-left: 2em;
      border-bottom: 2px solid #2b80ff;
      font-weight: bold;
      padding: 0 1em;
    }

    .tab2 {
      font-size: 16px;
      margin-left: 2em;
      font-weight: bold;
      padding: 0 1em;
      cursor: pointer;
    }
  }

  .searchWarehouse {
    width: 100%;
    background: white;
    padding: 15px 0;
  }

  .main {
    height: calc(100vh - 230px);
    margin-top: 14px;
    display: flex;

    .main_left {
      width: 400px;
      margin-right: 16px;

      .search_left {
        margin-bottom: 16px;

        .ant-input {
          width: 180px;
        }

        .ant-btn {
          border-radius: 2px;
          margin-left: 15px;
        }
      }

      /* 左边列表 */

      /deep/ .ant-table-body {
        table {
          border: none;

          .ant-table-tbody {
            background: none;
          }

          tr {
            width: 400px;
            height: 85px;
            margin-bottom: 5px;
            position: relative;
            display: inline-block;
            box-sizing: border-box;
            background: white;

            &:hover {
              box-shadow: 0 0 14px 0 rgba(19, 28, 59, 0.09);
              cursor: pointer;
            }

            // 点击表格行左边4px边框加粗
            &.ant-table-row-selected.active {
              border-left: 4px solid #1890ff;
              box-sizing: border-box;
            }

            // 仅当前选中行 显示取消按钮
            // &:not(.ant-table-row-selected) .action { display: none; }
            td {
              position: absolute;
              background: none;
              border: none;
              margin: 0;
              padding: 0;
              font-weight: bold;
              // 复选框
              &:first-child {
                left: 16px;
                top: 38px;
              }

              //  拣选单号
              &:nth-child(2) {
                left: 50px;
                top: 16px;
                font-family: PingFangSC-Medium;
                font-size: 16px;
                color: #333333;
              }

              // 状态
              &:nth-child(3) {
                left: 240px;
                top: 16px;
                font-family: PingFangSC-Medium;
                font-size: 14px;
              }

              // 员工及4以后统一设置字体
              &:nth-child(n + 4) {
                font-family: PingFangSC-Medium;
                font-size: 12px;
                color: #666666;
              }

              &:nth-child(4) {
                left: 50px;
                top: 53px;
                width: 120px;

                &:before {
                  display: inline-block;
                  content: '索取人：';
                }
              }

              // 任务数
              &:nth-child(5) {
                left: 185px;
                top: 53px;
                width: 80px;

                &:before {
                  display: inline-block;
                  content: '任务数：';
                }
              }

              // 日期
              &:nth-child(6) {
                right: 15px;
                top: 53px;
                font-weight: normal;
              }

              // 操作 取消按钮
              &:last-child {
                right: 20px;
                top: 12px;

                .ant-btn {
                  width: 60px;
                  height: 32px;
                  border-radius: 2px;
                  border: 1px solid #cccccc;
                  color: #1890ff;
                  font-weight: bold;
                  background-image: linear-gradient(180deg, #fdfdfd 0%, #fbfbfb 100%);
                }
              }

              .ant-checkbox-inner {
                width: 20.6px;
                height: 20.6px;

                &:after {
                  width: 6.7;
                  height: 13.14px;
                  top: 40%;
                }
              }
            }
          }
        }
      }

      /deep/ .p-table tr.active > td {
        background: none !important;
      }

      /deep/ .ant-table-fixed {
        border: none;
      }

      /deep/ .ant-table-placeholder {
        background: none;
        border: none;
      }

      // 滚动条
      /deep/ .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
        background: none !important;
        overflow: hidden !important;
        overflow-x: hidden;
        overflow-y: visible !important;
      }
    }

    .main_right {
      height: 100%;
      width: calc(100% - 416px);
      padding: 18px 20px;
      box-sizing: border-box;
      background: white;

      ::v-deep .ant-btn {
        border-radius: 2px;
      }

      .orderNo {
        margin-top: 15px;
        margin-bottom: 30px;

        ::v-deep .ant-input-affix-wrapper {
          display: inline-block;
          width: 426px;
          margin-left: 129px;

          .ant-input {
            height: 50px;
            line-height: 50px;
            border-radius: 2px;
            padding-left: 5em;
            font-size: 18px;
            font-weight: bold;
          }

          i.anticon {
            margin-left: 20px;
            color: #bababa;
            font-size: 25px;
          }
        }
      }

      .table_list {
        height: 100%;
        overflow: auto;
      }
    }
  }

  .red {
    color: #ff553d;
  }

  .blue {
    color: #1890ff;
  }

  .green {
    color: #2da641;
  }
}
</style>
<style lang='less'>
// 仅仅改变placeholder="请扫描容器条码绑定任务" 文字大小
.taskFor {
  .main_right {
    .orderNo {
      input::-webkit-input-placeholder {
        font-size: 18px;
        font-weight: normal;
      }

      input::-moz-input-placeholder {
        font-size: 18px;
        font-weight: normal;
      }

      input::-ms-input-placeholder {
        font-size: 18px;
        font-weight: normal;
      }
    }
  }
}
</style>
