<template>
  <div>
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="9">
          <el-input clearable v-model="queryInfo.query" placeholder="请输入拣货单号" prefix-icon="el-icon-search">
            <el-button slot="append" icon="el-icon-search" @click="getPickingList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="9">
          <el-button type="success" @click="finish" icon = "el-icon-success">完成拣货</el-button>
          <el-button type="danger" @click="cancel" icon = "el-icon-error">撤销拣货</el-button>
        </el-col>
      </el-row>
      <div class="main-content">
      <el-table :data="pickingList.slice((queryInfo.pageNum-1)*queryInfo.pageSize,queryInfo.pageNum*queryInfo.pageSize)"
      style="width: 100%"
      stripe border fixed
      @selection-change="handleSelectionChange">
          <el-table-column
            fixed="left"
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="pickingId"
            label="拣货单号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="outStorehouseId"
            label="出库单号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="recipientPerson"
            label="领取人"
            width="180">
          </el-table-column>
          <el-table-column
            prop="recipientTime"
            label="领取时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="createPerson"
            label="创建人"
            width="180">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态">
          </el-table-column>
          <el-table-column
            fixed="right"
            prop="operate"
            label="操作"
            width="95">
            <template slot-scope="scope" >
              <el-button type="primary" icon="el-icon-edit" size="small" @click="open(scope.row)">修改</el-button>
              <!-- <el-button type="danger" icon="el-icon-delete" size="small" @click="delete(scope.row)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="pages">
       <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="queryInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
        </el-pagination>
         </div>
         </div>
      </el-card>

  </div>
</template>

<script>
export default {
  data () {
    return {
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      user: '',
      pickingList: ''
    }
  },
  methods: {
    handleSizeChange (val) {
      this.queryInfo.pageSize = val
      this.getPickingList()
    },

    handleCurrentChange (val) {
      this.queryInfo.pageNum = val
      this.getPickingList()
    },

    handleSelectionChange (val) {
      this.selectList = val
    },

    async getPickingList () {
      const { data: result } = await this.$http.get('/picking/list', { params: this.queryInfo })
      if (result.status !== 200) return this.$message.error('获取列表失败')
      this.total = result.data.total
      this.pickingList = result.data.rows
    },

    async finish () {
      for (var i = 0; i < this.selectList.length; i++) {
        if (this.selectList[i].status === '拣货中') {
          this.selectList[i].status = '已完成'
          const { data: result } = await this.$http.put('/picking/finish', this.selectList[i])
          this.$message.success('订单' + this.selectList[i].outStorehouseId + '拣货成功')
        } else if (this.selectList[i].status === '待拣货') {
          this.$message.error('订单' + this.selectList[i].outStorehouseId + '未被领取')
        } else {
          this.$message.error('订单' + this.selectList[i].outStorehouseId + '已完成')
        }
      }
    },
    cancel(){

    },
    open(row){

    }

  },
  mounted () {
    this.getPickingList()
    // this.user = window.sessionStorage.getItem('token').substr(32)
  }
}
</script>

<style>
</style>
