<template>
  <div id="picking_index">
    <el-card shadow="never" v-loading="loading">
      <inventory-search @search="reload"> </inventory-search>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        height="calc(100vh-300px)"
        :pageSize="20"
        :datasource="datasource"
        cache-key="systemRoleTable"
      >
        <template v-slot:toolbar>
          <el-button icon="el-icon-plus" type="primary" @click="add"
            >新建</el-button
          >
        </template>
        <!-- <template v-slot:code="{ row }">
          <el-link type="primary" @click="goDetail(row)">{{
            row.code
          }}</el-link>
        </template> -->
        <template v-slot:outInNo="{ row }">
          <el-link type="primary" @click="details(row.outInNo)">
            {{ row.outInNo }}
          </el-link>
        </template>
        <template v-slot:action="{ row }">
          <el-link
            v-if="row.status == 0"
            type="primary"
            :underline="false"
            icon="el-icon-view"
            @click="submit(row)"
          >
            提交
          </el-link>
          <el-link
            v-if="row.status == 0"
            type="primary"
            :underline="false"
            icon="el-icon-view"
            @click="edit(row)"
          >
            修改
          </el-link>
          <el-popconfirm
            v-if="row.status == 0"
            style="margin-left: 10px"
            confirm-button-text="确认"
            cancel-button-text="取消"
            title="是否确认删除？"
            @confirm="deleted(row)"
          >
            <el-link
              slot="reference"
              type="primary"
              :underline="false"
              icon="el-icon-delete"
            >
              删除
            </el-link>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </el-card>
  </div>
</template>

<script>
  import { allocationType } from '@/utils/dict/warehouse';
  import storageApi from '@/api/warehouseManagement/index.js';
  import InventorySearch from './components/inventory-search.vue';
  import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';
  import { pageRoles } from '@/api/system/role';
  export default {
    components: {
      InventorySearch
    },
    data() {
      return {
        allocationType,
        stutusOptions: {
          0: '未提交',
          1: '审核中',
          2: '已完成'
        },
        // 表格列配置
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'name',
            label: '拣货名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'code',
            slot: 'code',
            label: '拣货编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'sourceNo',
            label: '领料单号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            slot: 'outInNo',
            prop: 'outInNo',
            label: '出库单号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'warehouseName',
            label: '仓库名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'createUserName',
            label: '拣货人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'status',
            label: '状态',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (row, column, cellValue) => {
              return ['拣货中', '拣货完成', '已出库'][row.status];
            }
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 200,
            align: 'center',
            slot: 'action',
            showOverflowTooltip: true
          }
        ],
        // 加载状态
        loading: false
      };
    },
    computed: {},
    methods: {
      details(id) {
        this.$router.push({
          path: '/warehouseManagement/outgoingManagement/details',
          query: {
            bizNo: id
          }
        });
      },
      // 删除
      async deleted(row) {
        const data = await storageApi.deletePickgoods([row.id]);
        if (data.code == '0') {
          this.$message.success('删除成功!');
          this.reload();
        }
      },
      // 提交
      submit(row) {
        if (row.info.length === row.list.length) {
          storageApi
            .updatePickgoods({
              id: row.id,
              code: row.code,
              name: row.name,
              sourceNo: row.sourceNo,
              warehouseId: row.info[0].warehouseId,
              warehouseName: row.info[0].warehouseName,
              status: 2, // 出库
              info: row.info
            })
            .then(() => {
              this.$message({
                type: 'success',
                message: '提交成功'
              });
              this.reload();
            });
        } else {
          this.$message.error('请完善当前拣货单的库存信息');
        }
      },
      // 修改
      edit(row) {
        this.$router.push({
          path: '/warehouseManagement/picking/add',
          query: { type: '修改', id: row.id }
        });
      },
      // 新建
      add() {
        this.$router.push({
          path: '/warehouseManagement/picking/add',
          query: { type: '新增' }
        });
      },
      /* 表格数据源 */
      datasource({ page, limit, where }) {
        return storageApi.getPickgoodsList({
          pageNum: page,
          size: limit,
          ...where
        });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where });
      },
      // 详情
      goDetail(row) {
        this.$router.push({
          path: '/warehouseManagement/picking/add',
          query: { type: '详情', id: row.id }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  #picking_index {
    height: calc(100vh - 96px);
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    // element-ui样式穿透
    :deep(.el-card) {
      height: 100%;
      .el-card__body {
        height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        .ele-pro-table {
          flex: 1;
          display: flex;
          flex-direction: column;
          .el-table {
            flex: 1;
            // display: flex;
            // flex-direction: column;
            // .el-table__body-wrapper {
            //   flex: 1;
            // }
          }
        }
      }
      .el-form-item {
        margin-bottom: 5px !important;
      }
    }
  }
</style>
