<template>
  <div>
    <ele-pro-table
      ref="table"
      :columns="columns"
      max-height="68vh"
      :datasource="dataList"
      cache-key="pickingDetails"
      highlight-current-row
      @row-click="rowClick"
      :need-page="false"
      @refresh="refresh"
    >
      <template v-slot:toolbar>
      <div class="rx-sc">
        <div class="c_title">领料记录 </div>
        <el-button type="primary" size="mini" style="margin: 0 5px" @click="handleAdd">新增</el-button>
      </div>
      </template>

      <template v-slot:action="{ row }">
        <el-button type="text" size="mini" @click="handDetailed(row)"
          >详情</el-button
        >
      </template>

      <template v-slot:status="{ row }">
        <el-tag
            :type="['danger', 'success', 'warning', 'danger'][row.status] "
            effect="dark"
            >{{
            statusList[row.status]
            }}</el-tag
          >
        </template>
    </ele-pro-table>

    <detailed

      @detailedClose="detailedClose"
      v-if="detailedShow"
      :detailedObj="detailedObj"
    ></detailed>
  </div>
</template>

<script>
  import { pickDetails } from '@/api/produce/picking';
  import detailed from './detailed.vue';
  export default {
    name: 'picking-details',
    components: { detailed },
    data() {
      return {
        dataList: [],
        detailedShow: false,
        detailedObj: null,

        statusList: ['未领料', '领料中', '已出库', '已驳回'],
      };
    },

    computed: {
      // 表格列配置
      columns() {
        return [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '领料时间',
            align: 'center'
          },
          {
            prop: 'code',
            label: '领料单编号',
            align: 'center'
          },

          {
            prop: 'name',
            label: '领料单名称',
            align: 'center'
          },

          {
            prop: 'executorName',
            label: '领料人',
            align: 'center'
          },

          {
            prop: 'status',
            slot: 'status',
            label: '状态',
            align: 'center'
          },

          {
            prop: '',
            label: '操作',
            width: 80,
            align: 'center',
            resizable: false,
            fixed: 'right',
            slot: 'action'
          }
        ];
      }
    },

    methods: {
      getList(workListIds) {
        this.workListIds = workListIds || [];
        pickDetails(workListIds).then((res) => {
          this.dataList = res || [];
          this.$forceUpdate();
        });
      },

      rowClick(row) {},

      handleAdd() {
        this.$emit('pickAdd', 'pick');
      },

      refresh() {
        this.getList(this.workListIds);
      },

      handDetailed(row) {
        this.detailedObj = JSON.stringify(row);
        this.detailedShow = true;
      },

      detailedClose() {
        this.detailedShow = false;
      }
    },
    created() {}
  };
</script>

<style lang="scss" scoped></style>
