<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading" style="width:100%">
      <pick-search @search="reload" ref="searchRef"> </pick-search>

      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        autoAmendPage
      >
        <template v-slot:action="{ row }">
          <el-button type="text" size="mini" @click="handDetailed(row)"
            >详情</el-button
          >
        </template>
      </ele-pro-table>
    </el-card>

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

    <selfDetailed
      @detailedClose="detailedClose"
      v-if="selfDetailedShow"
      :detailedObj="detailedObj"
    ></selfDetailed>
  </div>
</template>
  
  <script>
import { getPage } from '@/api/mes/pickApply';
import pickSearch from './pick-search.vue';
import detailed from './detailed.vue';
import selfDetailed from './selfDetailed.vue';
export default {
  components: {
    pickSearch,
    detailed,
    selfDetailed
  },
  props: {
    saleOrderData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      // 加载状态
      loading: false,

      detailedShow: false,
      detailedObj: null,

      selfDetailedShow: false,

      statusList: ['未领料', '领料中', '已出库', '已驳回']
    };
  },
  computed: {
    columns() {
      return [
        {
          prop: 'code',
          label: '领料单编号',
          align: 'center',
          align: 'left'
        },

        {
          prop: 'joinWorkOrderCode',
          slot: 'joinWorkOrderCode',
          label: '关联工单编号',
          align: 'center'
        },

        {
          prop: 'joinWarehouseName',
          label: '领料仓库名称',
          align: 'center'
        },

        {
          prop: 'joinReviewerName',
          label: '关联审核人',
          align: 'center'
        },

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

        {
          prop: 'createTime',
          label: '领料时间',
          align: 'center'
        },
        {
          prop: 'status',
          slot: 'status',
          label: '状态',
          align: 'center'
        },

        {
          prop: '',
          label: '操作',
          width: 80,
          align: 'center',
          resizable: false,
          fixed: 'right',
          slot: 'action'
        }
      ];
    }
  },
  created() {},
  methods: {
    /* 表格数据源 */
    async datasource({ page, limit, where }) {
      if (this.saleOrderData.id) {
        where['saleOrderCode'] = this.saleOrderData.orderNo;
      }
      let parma = {
        ...where,
        pageNum: page,
        size: limit
      };
      let res = await getPage(parma);
      return res;
    },
    handDetailed(row) {
      this.detailedObj = JSON.stringify(row);
      if (row.type == 1) {
        this.selfDetailedShow = true;
      } else {
        this.detailedShow = true;
      }
    },

    detailedClose() {
      this.detailedShow = false;
      this.selfDetailedShow = false;
    },

    /* 刷新表格 */
    reload(where = {}) {
      this.$refs.table.reload({ page: 1, where });
    }
  }
};
</script>
  