<!-- 任务索取 -->
<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 class="header">
      <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="tab1">任务索取</div>
        <div @click="$emit('update:current', 2)" class="tab2">任务确认</div>
      </div>
      <div class="search">
        <p-input placeholder="请输入工号" v-model="search.operatorCode" disabled />
        <p-button
          type="primary"
          size="large"
          @clickSync="askFor(search.operatorCode)"
          style="margin-right: 20px"
          :disabled="isDisabled"
        >
          索 取
        </p-button>
        <!--<a-button type="primary" icon="printer">打印</a-button>
			 扫描监管码 [integer] 扫描监管码节点：0=拣货 1=外复核 -->
        <!-- <p-button type="primary" icon="scan" size="large" :disabled="isScan" @click="scan">扫描监管码</p-button> -->
      </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" />
          <p-select
            placeholder="状态"
            v-model="searchLeft.status"
            allowClear
            style="width: 120px"
            :options="[
              { title: '待拣选', value: '0' },
              { title: '待确认', value: '1' },
              { title: '已完成', value: '2' },
            ]"
            @change="changeStatus"
          />
          <p-button type="primary" @click="searchBldg">查询</p-button>
          <div v-show="searchLeft.status == '2'" style="display: inlne-block; width: 52px"></div>
          <p-button type="primary" v-show="searchLeft.status !== '2'" @click="println">打印</p-button>
        </div>
        <!-- :selectedRowKeys = "[rows.id]" -->
        <p-table
          :columns="columns"
          :data-source="data"
          :showHeader="false"
          :hasRowCount="false"
          :colorTransformRow="false"
          :hasRowSelectCheck="true"
          :rowSelectType="1"
          :selectedRowKeys.sync="selectedRowKeys"
          rowKey="pickOrderId"
          :scroll="{ y: 655 }"
          @clickRow="clickRow"
          @checkRow="checkRow"
          @change="changePagination"
          :pagination="pagination"
          :loading="loading"
        >
          <template slot="status" slot-scope="text, rows, index">
            <span :class="{ '0': 'red', '1': 'blue', '2': 'green' }[text]">
              {{ text | statusFilter }}
            </span>
          </template>
          <span slot="action" slot-scope="text, record, index" class="action" v-if="record.status == 0">
            <p-button @click="cancel_pick(record.pickOrderId)">取消</p-button>
          </span>
        </p-table>
      </div>
      <div class="main_right">
        <div class="table_list">
          <table-list :pickOrderId="pickOrderId" @emitData="emitData" @getDataEmit="getDataEmit"></table-list>
        </div>
      </div>
    </div>
  </div>
</template>

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

const data = [
  // { pickOrderId: "1",status: "0",operatorName: "欧阳三丰",taskCount: 1230,gmtCreate: "2021-05-11 16:25:51" },
  // { pickOrderId: "2",status: "1",operatorName: "欧阳22",taskCount: 1230,gmtCreate: "2021-05-11 16:25:51" },
  // { pickOrderId: "3",status: "2",operatorName: "欧阳22",taskCount: 1230,gmtCreate: "2021-05-11 16:25:51" },
]
export default {
  components: { tableList, getInfo, scanCode },
  mixins: [setwarehouse],
  filters: {
    statusFilter(value) {
      if (value === '0') return '待索取'
      if (value === '1') return '待确认'
      if (value === '2') return '已完成'
      return value
    }
  },
  props: {
    current: { type: Number, default: 1 },
  },
  data() {
    return {
      columns,
      items: items_warehous(this),
      loading: false,
      isDisabled: false,
      bldgInfo: {},
      data,
      // rows:{ id:1,orderNo:'238912739871239' }, //左边选中拣选单时
      selectIds: [],
      selectedRows: [],
      selectedRowKeys: [],
      pickOrderId: '', // 拣选单id
      barcord: '', //扫描打码
      search: {
        warehouseId: '', //仓库id ,测试值"1"
        operatorCode: '', //工号
      },
      searchLeft: {
        parames: '', //拣选单号/工号
        // warehouseId: this.$store.state.user.warehouse.warehouseId,	//仓库id,暂时关闭方便显示测试数据
        status: '0', // 	状态 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()))
        }
      })
    },
    getData(params) {
      params = {
        pageNum: this.pagination.current,
        pageSize: this.pagination.pageSize,
        pickTaskType: 1, //0-整件/1-散件/2-整散合一
        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) //分页查询所有列表
    },
    // 异步打印查询
    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) {
        let selectRowslist = this.selectedRows.filter((items) => {
          return items.status == '1'
        })
        if (selectRowslist.length < 1) {
          this.$message.warning('请选择已绑定容器号的数据')
          return
        }
        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('无打印数据！')
      }
    },
    // 多选行数组
    checkRow(selectIds, selectedRows) {
      // this.rows = { ...selectedRows[selectedRows.length-1] };  //多选
      console.log('当前点击选择行checkRow：', selectIds, selectedRows)
      this.selectIds = [...selectIds]
      this.selectedRows = [...selectedRows]
    },
    // 点击当前整条行
    clickRow(event, selectId, selectedRows) {
      console.log('clickRow：', event, selectId, selectedRows)
      this.pickOrderId = selectId //拣选单id
    },
    // 索取
    askFor(val) {
      this.isDisabled = true // 防止重复点击
      this.$refs.search.form.validateFields((err, values) => {
        if (!err) {
          let params = Object.assign(this.search, this.$refs.search.form.getFieldsValue())
          console.log('索取参数：', params)
          picktask_create_pickorder(params).then((res) => {
            if (res.success) {
              this.$message.success(`索取拣选单成功, 共${res.data.count}个任务`, 5)
              this.getData(this.searchLeft) //分页查询所有列表
              setTimeout(() => {
                this.isDisabled = false
              }, 500)
            } else {
              this.$exception(res)
              this.isDisabled = false
            }
          })
        }
      })
    },
    changeStatus(value) {
      console.log('当前选择：', value)
      this.search.status = value
    },
    // 取消拣选单 GET get(零货拣货)
    cancel_pick(pickOrderId) {
      let _this = this
      this.$confirm({
        title: '取消拣选单',
        content: '您确定要取消当前拣选单？',
        onOk() {
          cancel_pickorder({ pickOrderId: pickOrderId }).then((res) => {
            if (res.success) {
              _this.$message.success('取消成功！')
              _this.getData(_this.searchLeft) //分页查询所有列表
            } else {
              _this.$exception(res)
            }
          })
        },
        onCancel() {},
      })
    },
    // 扫描监管码
    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
          console.log('扫描监管码节点：0=拣货 1=外复核:', this.isScan, res.data.scanSupervisionCodeStage)
        }
      })
    },
    // 接收数据 过滤isSupervise==1
    emitData(selectedRows, isDblClick) {
      // 判断是否双击
      if (isDblClick) {
        this.scanVisible = true
      }
      let temp = selectedRows.filter((item) => item.isSupervise == 1)
      console.log('emitData监管码过滤：', selectedRows, temp)
      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, //商品规格
          pieceQty: item.qty, //数量
          uom: item.uom, //包装单位
          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, // 源单编号
        }
      })
      console.log('转换字段后数据：', this.scanTableList)
    },
    // 子页面刷新当前页
    getDataEmit() {
      this.getData(this.searchLeft) //分页查询所有列表
    },
  }, //methods
  computed: {
    ...mapGetters(['userInfo', 'warehouse']),
  },
  watch: {
    warehouse: {
      handler: function (nVal, oVal) {
        this.search.warehouseId = this.warehouse.warehouseId
      },
      deep: true,
    },
  },
  mounted() {
    this.$refs.search.form.setFieldsValue({
      warehouseId: this.warehouse.warehouseId,
      warehouseName: this.warehouse.warehouseName,
    })

    this.warehouseId = this.warehouse.warehouseId
    this.search.warehouseId = this.warehouse.warehouseId
    this.search.operatorCode = this.userInfo.employeeNo
    // this.getData(this.searchLeft);  //分页查询所有列表
    this.scanCode()
  },
}
</script>

<style scoped lang="less">
.taskFor {
  .header {
    height: 60px;
    line-height: 60px;
    background: white;
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    .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;
      }
    }
    .search {
      flex: 1;
      text-align: center;
      .ant-input {
        height: 36px;
        width: 453px;
        border-radius: 2px;
        margin-right: 20px;
      }
      .ant-btn-lg {
        /* width: 65px; */
      }
    }
  }
  .searchWarehouse {
    width: 100%;
    background: white;
    padding: 10px 0;
  }
  .main {
    height: calc(100vh - 260px);
    margin-top: 14px;
    display: flex;
    .main_left {
      width: 400px;
      margin-right: 16px;
      .search_left {
        margin-bottom: 16px;
        display: flex;
        justify-content: space-between;
        .ant-input {
          width: 130px;
        }
        .ant-btn {
          border-radius: 2px;
        }
      }
      /* 左边列表 */
      /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;
      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>
