<template>
  <div class="ele-body">
    <el-card shadow="never" class="tabs_box">
      <seek-page :seekList="seekList" @search="reload"></seek-page>

      <div class="btn_box">
        <el-button type="success" size="mini" @click="borrowOrder">
          新增领用单
        </el-button>
      </div>

      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        :selection.sync="selection"
        row-key="id"
        cache-key="entrust_list_data"
        :height="tableHeight"
        :pageSize="20"
        @fullscreen-change="fullscreenChange"
      >
        <template v-slot:code="{ row }">
          <el-link type="primary" :underline="false" @click="goDetail(row)">
            {{ row.code }}
          </el-link>
        </template>

        <template v-slot:quantity="{ row }">
          <span>{{ row.quantity }}{{ row.measuringUnit }}</span>
        </template>

        <template v-slot:action="{ row }">
          <el-link :underline="false" type="primary" @click="process(row)">
            流程
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>

    <processDetail ref="processDetailRef" />

    <pick-detail ref="pickDetailRef" />

    <borrow-list ref="borrowListRef" @refresh="reload" />
  </div>
</template>

<script>
  import {
    getBorrowOrderList,
    saveReturnOrder
  } from '@/api/requirementListPlan';
  import processDetail from '@/views/productionPlan/components/detail/processDetail.vue';
  import pickDetail from './components/pickDetail.vue';
  import borrowList from '../requirementListPlan/components/borrowList.vue';

  export default {
    components: { processDetail, pickDetail, borrowList },
    data() {
      return {
        form: {},
        rules: {},
        id: '',
        submitting: false,

        tableHeight: 'calc(100vh - 320px)',
        detailList: [],
        selection: []
      };
    },

    computed: {
      columns() {
        return [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center',
            fixed: 'left'
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'code',
            label: '领用单号',
            width: 150,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'code'
          },
          {
            prop: 'materialRequirements',
            label: '需求订单号',
            width: 150,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'topCategoryCode',
            label: '顶级产品编号',
            width: 150,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'topCategoryName',
            label: '顶级产品名称',
            width: 150,
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'planCode',
            label: '计划编号',
            width: 150,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'batchNo',
            label: '批次号',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'categoryCode',
            label: '编码',
            width: 150,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'categoryName',
            label: '名称',
            width: 140,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'imgCode',
            label: '零部件图号',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'modelType',
            label: '型号',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'categorySize',
            label: '尺寸',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'quantity',
            slot: 'quantity',
            label: '计划数量',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'measuringUnit',
            label: '计量单位',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'brandNum',
            label: '牌号',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          // {
          //   prop: 'type',
          //   label: '加工类型',
          //   width: 100,
          //   align: 'center',
          //   showOverflowTooltip: true
          // },
          // {
          //   prop: 'type',
          //   label: '作业名称',
          //   width: 100,
          //   align: 'center',
          //   showOverflowTooltip: true
          // },
          // {
          //   prop: 'type',
          //   label: '承制单位',
          //   width: 100,
          //   align: 'center',
          //   showOverflowTooltip: true
          // },
          // {
          //   prop: 'type',
          //   label: '计划类别',
          //   width: 100,
          //   align: 'center',
          //   showOverflowTooltip: true
          // },
          // {
          //   prop: 'remark',
          //   label: '备注',
          //   width: 100,
          //   align: 'center',
          //   showOverflowTooltip: true
          // },
          // {
          //   prop: 'type',
          //   label: '创建人',
          //   width: 100,
          //   align: 'center',
          //   showOverflowTooltip: true
          // },
          {
            prop: 'createTime',
            label: '创建时间',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '操作',
            width: 80,
            align: 'center',
            resizable: false,
            fixed: 'right',
            slot: 'action'
          }
        ];
      },
      seekList() {
        return [
          {
            label: '编码:',
            value: 'categoryCode',
            type: 'input',
            labelWidth: 50
          }
        ];
      }
    },

    methods: {
      async datasource({ page, limit, where }) {
        const res = await getBorrowOrderList({
          ...where,
          pageNum: page,
          size: limit
        });
        return res;
      },

      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      },

      fullscreenChange(fullscreen) {
        this.tableHeight = fullscreen
          ? 'calc(100vh - 120px)'
          : 'calc(100vh - 320px)';
      },

      goDetail(item) {
        this.$refs.pickDetailRef.open(item, 3);
      },

      borrowOrder() {
        this.$refs.borrowListRef.open();
      },

      process(item) {
        if (!item.processInstanceId) {
          this.$message.info('暂无流程');
        } else {
          this.$refs.processDetailRef.open(item.processInstanceId);
        }
      }
    }
  };
</script>

<style scoped>
  ::v-deep .el-form-item {
    margin-bottom: 15px !important;
  }

  .btn_box {
    margin-bottom: 6px;
  }
</style>
