<!-- 功能库房拣货  tab任务索取-->
<template>
  <div class='tab1'>
    <p-modal title='自动确认'
             width='80%'
             :visible='visible'
             :enlargeable='true'
             :draggable='true'
             @ok='handleOk'
             @cancel='handleCancel'
    >
      <!-- 弹出窗数据同tab列表数据-->
      <a-table
        :columns='columns2'
        :data-source='data'
        :has-row-count='true'
        rowKey='pickOrderId'
        auto-width
        dragle
        :rowSelectType='false'
        :pagination='false'
        :loading='loading'
        bordered
      >
        <span slot='customTitle' style='color:#2b80ff;'> 确认数量  <a-icon type='check' /></span>
      </a-table>
      <p-input placeholder='请输入工号' size='large' v-model='search.operatorCode' style='margin-top:16px' />
    </p-modal>

    <header>
      <p-input placeholder='请输入工号' v-model='search.operatorCode' />
      <p-input placeholder='请输入容器编号' v-model='search.containerCode' />
      <p-checkbox :checked='isPrint' @change='onCheckChange'> 自动打印</p-checkbox>
      <p-checkbox :checked='isConfirm' @change='onCheckConfirm'> 自动确认</p-checkbox>
      <p-button type='primary' icon='pull-request' @click='askFor'>索取</p-button>
    </header>
    <p-grid-form ref='search' :items='items1' @submit='handlerSubmit' />
    <p-table
      :columns='columns'
      :dataSource='data'
      :has-row-count='true'
      :row-select-type='2'
      rowKey='pickTaskDId'
      auto-width
      dragle
      hasRowSelectCheck

      :loading='loading'
      bordered
    >
          <!-- @change='paginationChange'
      :pagination='pagination' -->
      <template slot='printStatus' slot-scope='text'> {{ text == '1' ? '已打印' : '未打印' }}</template>
      <template slot='status' slot-scope='text,rows,index'>
        {{ text | statusFilter }}
      </template>
      <!--   <template slot="action" slot-scope="text, record">
        <a @click="showModal(false, record)">修改</a>
        <a-divider type="vertical" />

         <a-popconfirm title="您确定要删除吗?" ok-text="确认" cancel-text="取消" @confirm="delSingle(record)">
          <a>删除</a>
        </a-popconfirm>
        </template>-->
    </p-table>
  </div>
</template>

<script>
import { sorter } from '@/views/kzyWMS/utils/sort.js'
import { items1, columns, columns2 } from '../../config/zeroStockPicking.js'
import { create_pickorder3, page_mixpicktaskall, picktask_confirm } from '../../config/api.js'

export default {
  filters: {
    statusFilter(value) {
      if (value === '0') return '待索取'
      if (value === '1') return '待确认'
      if (value === '2') return '待复核'
      if (value === '3') return '已完成'
      return ''
    }
  },
  data() {
    return {
      columns: sorter(columns),
      columns2: sorter(columns2),
      items1: items1(this),
      data: [],
      // data2: [],
      visible: false,
      confirmLoading: false,
      loading: false,
      isPrint: true, //自动打印
      isConfirm: false, //自动确认
      search: {
        warehouseId: this.$store.state.user.warehouse.warehouseId,	//仓库id
        containerCode: '', //容器编号
        operatorCode: '',	//搜索工号
        isPrint: 1, //自动打印 ,接口传参
        isConfirm: 0//自动确认,接口传参
      },
      pagination: {
        total: 0,
        pageSize: 10, //每页中显示10条数据
        current: 1,
        showSizeChanger: true,
        pageSizeOptions: ['10', '15', '20'], //每页中显示的数据
        showTotal: total => `共有 ${total} 条数据` //分页中显示总的数据
      }
    }
  },
  methods: {
    getData(params) {
      params = {
        pageNum: this.pagination.current, // 当前页码
        pageSize: this.pagination.pageSize, // 每页数量
        ...params
      }
      this.loading = true
      page_mixpicktaskall(params).then((res) => {
        this.loading = false
        if (res.success) {
          this.data = res.data.list
          this.pagination.total = Number(res.data.totalCount)
        } else {
          this.$exception(res)
          this.loading = false
        }
      }).finally(() => {
        this.loading = false
      })
    },
    // 索取按钮
    askFor() {
      this.$nextTick(() => {
        let params = Object.assign(this.search, { isPrint: (this.search.isPrint ? 1 : 0) })
        console.log('索取参数：', params)
        if (this.search.operatorCode) {
          create_pickorder3(params).then(res => {
            if (res.success) {
              this.$message.success(`索取拣选单成功, 共${res.data}个任务`, 5)
            } else {
              this.$exception(res)
            }
          })
          // 自动打印
          if (this.search.isPrint) {

          }
          // 自动确认
          if (this.search.isConfirm) {
            this.visible = true
          }
        } else {
          this.$message.warning('请输入工号！')
        }
      })
    },
    // 搜索自动打印
    onCheckChange(e) {
      // 同步:checked
      this.isPrint = e.target.checked
      // 转换到搜索参数
      this.search.isPrint = e.target.checked ? 1 : 0
      console.log(`checked = ${e.target.checked}`, this.search)
    },
    // 搜索自动确认
    onCheckConfirm(e) {
      // 同步:checked
      this.isConfirm = e.target.checked
      // 转换到搜索参数
      this.search.isConfirm = e.target.checked ? 1 : 0
      console.log(`checked = ${e.target.checked}`, this.search)
    },
    delSingle(record) {
      console.log({ record })
      this.loading = true
      /* freightDelete({ ids: record.warehouseLocatorId }).then((res) => {
          if (res.success) {
            this.visible = false
            this.$message.success(res.message || '操作成功')
            this.getData()
          } else {
            this.$message.warning(res.message || '操作失败')
          }
          this.loading = false
          }) */
    },
    paginationChange(pagination) {
      this.pagination = pagination
      this.pagination.pageNum = pagination.current
      this.getData()
    },
    // 索取弹出窗 自动确认
    handlerSubmit(event, form) {
      event.preventDefault()
      // console.log("getFieldsValue:",form.getFieldsValue());
      this.$refs.search.form.validateFields((err, values) => {
        if (!err) {
          console.log('验证通过: ', values)
          this.getData(values)
        }
      })
    },
    // 重置
    hanlderRest(event, form) {
      this.$refs.search.form.resetFields()
    },
    // 拣货确认前过滤data数据
    getData_modal(val) {
      let _this = this
      return new Promise(function(resolve, reject) {
        if (_this.data.length) {
          let temp = _this.data.map(item => {
            return {
              operatorCode: val,	// 拣选人工号
              pickQty: item.pickQty,		//已拣数量
              pickTaskDId: item.pickTaskDId	//拣选任务明细id
            }
          })
          return resolve(temp)
        } else {
          _this.$message.warning('暂无数据！')
        }
      })
    },
    // 弹出框确认
    handleOk(e) {
      if (this.search.operatorCode) {
        this.confirmLoading = true
        this.getData_modal(this.search.operatorCode).then(res => {
          console.log('拣货确认弹出data:', res)
          picktask_confirm(res).then(res2 => {
            if (res2.success) {
              this.confirmLoading = false
              this.visible = false
              this.$message.success('确认成功')
            } else {
              this.$exception(res)
              this.confirmLoading = false
            }
          })
        })
      } else {
        this.$message.warning('请输入工号')
      }
      /* this.$refs.modalOk.form.validateFields((err, values) => {
              if (!err) {
                console.log('弹出框: ', values);
              }
            }); */
    },
    // 弹出框取消
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
    },
    // 打印拣选标签
    printer(event) {
      console.log('打印拣选标签')
    }
  }, //methods
  created() {
    // 	0：任务索取 1：任务确认
    // this.getData({type:0});
  }
}
</script>

<style scoped='scoped' lang='less'>
.tab1 {
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;

  header {
    height: 68px;
    line-height: 68px;
    background: #FEFFE0;

    ::v-deep {
      // 工号
      .ant-input {
        width: 180px;
        height: 36px;
        border-radius: 2px;
        margin-left: 14px;
      }

      // 自动打印
      .ant-checkbox-wrapper {
        margin-left: 20px;

        > span:last-child {
          font-weight: bold;
          font-size: 14px;
          color: #323233;
          letter-spacing: 1px;
        }
      }

      .ant-btn-primary {
        margin-left: 20px;
        height: 36px;
      }
    }

  }

  ::v-deep {
    .ant-btn {
      border-radius: 2px;
    }
  }
}
</style>
