<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <search @search="reload" ref="searchRef"> </search>

      <!-- 数据表格 -->
      <ele-pro-table ref="table" :columns="columns" :datasource="datasource">
        <!-- 表头工具栏 -->
        <template v-slot:toolbar="{ row }">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="open(null, 'edit')"
          >
            新建
          </el-button>

          <!-- <el-button size="small" class="ele-btn-icon" @click="handlDelete"
          >删除</el-button
        >
        <el-button
          size="small"
          @click="moveTo(checkRadioData, 'move')"
          :disabled="checkRadioData.length == 0"
          class="ele-btn-icon"
          >移动到</el-button
        > -->
        </template>

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

        <template v-slot:totalPackage="{ row }">
          {{ row.totalPackage }}
        </template>

        <template v-slot:totalWeight="{ row }">
          {{ row.totalWeight }} {{ row.weightUnit }}
        </template>

        <template v-slot:status="{ row }">
          {{row.status==0?'审核中':'审核通过'}}
        </template>
        <template v-slot:detailList="{ row }">
          {{ row.detailList.map((item) => item.categoryName).toString() }}
        </template>
        <template v-slot:action="{ row }">
          <el-link
            type="primary"
            :underline="false"
            @click="open(row, 'detail')"
          >
            详情
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>

    <edit ref="edit" @refresh="reload"></edit>
  </div>
</template>

<script>
import { getList } from '@/api/sparePartsApply/index.js';
import edit from './components/edit';

import search from './components/search.vue';
export default {
  components: {
    search,
    edit
  },
  data() {
    return {
      loading: false,
      outputSceneState: [
        { code: 1, label: '退供出库' },
        { code: 2, label: '调拨出库' },
        { code: 3, label: '销售出库' },
        { code: 4, label: '领用出库' },
        { code: 5, label: '报废出库' },
        { code: 6, label: '外协出库' },
        { code: 7, label: '委外出库' },
        { code: 8, label: '受托退货出库' },
        { code: 9, label: '仓库委外出库' },
        { code: 10, label: '采购退货出库' },
        { code: 11, label: '自选领用出库' },
        { code: 12, label: '配料出库' }
      ],
      statusOpt: [
        { label: '审核中', value: 0 },
        { label: '审核通过', value: 1 }
        // { label: '审核通过', value: 2 },
        // { label: '审核不通过', value: 3 }
      ]
    };
  },
  computed: {
    // 表格列配置
    columns() {
      return [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'code',
          label: '编码',
          showOverflowTooltip: true,
          align: 'center',
          minWidth: 150
        },
        {
          prop: 'repairCode',
          showOverflowTooltip: true,
          label: '工单编码',
          align: 'center',
          minWidth: 150
        },
        {
          prop: 'repairName',
          showOverflowTooltip: true,
          label: '工单名称',
          align: 'center',
          minWidth: 110
        },
        {
          prop: 'deviceName',
          showOverflowTooltip: true,
          label: '设备名称',
          align: 'center',
          formatter: (row, column, cellValue) => {
            return row.deviceList.map((item) => item.name).toString();
          },
          minWidth: 110
        },
        {
          prop: 'fixCode',
          showOverflowTooltip: true,
          label: '固资编码',
          align: 'center',
          minWidth: 110,
          formatter: (row, column, cellValue) => {
            return row.deviceList
              .filter((item) => item.fixCode)
              .map((item) => item.fixCode)
              .toString();
          }
        },
        {
          prop: 'deviceCode',
          showOverflowTooltip: true,
          label: '设备编码',
          align: 'center',
          minWidth: 110,
          formatter: (row, column, cellValue) => {
            return row.deviceList
              .filter((item) => item.deviceCode)
              .map((item) => item.deviceCode)
              .toString();
          }
        },
        {
          label: '物品名称',
          align: 'center',
          showOverflowTooltip: true,
          slot: 'detailList',
          minWidth: 150
        },
        {
          prop: 'receivingDeptName',
          showOverflowTooltip: true,
          label: '领用部门',
          align: 'center',
          minWidth: 110
        },
        {
          prop: 'recipientName',
          showOverflowTooltip: true,
          label: '领用人',
          align: 'center',
          minWidth: 110
        },
        {
          prop: 'useDeptName',
          showOverflowTooltip: true,
          label: '使用部门',
          align: 'center',
          minWidth: 110
        },
        {
          prop: 'userName',
          showOverflowTooltip: true,
          label: '使用人',
          align: 'center',
          minWidth: 110
        },
        {
          prop: 'usageTime',
          label: '使用时间',
          showOverflowTooltip: true,
          align: 'center',
          minWidth: 110
        },
        {
          prop: 'purpose',
          showOverflowTooltip: true,
          label: '用途',
          align: 'center',
          minWidth: 110
        },

        {
          prop: 'type',
          label: '出库场景',
          showOverflowTooltip: true,
          align: 'center',
          formatter: (row, column, cellValue) => {
            return this.outputSceneState.find((item) => item.code == cellValue)
              ?.label;
          }
        },
        {
          prop: 'approvalUserName',
          label: '审核人',
          showOverflowTooltip: true,
          align: 'center'
        },
        {
          slot: 'status',
          showOverflowTooltip: true,
          label: '状态',
          align: 'center'
        },

        {
          columnKey: 'action',
          label: '操作',
          width: 120,
          align: 'center',
          resizable: false,
          fixed: 'right',
          slot: 'action',
          showOverflowTooltip: true
        }
      ];
    }
  },
  created() {},
  methods: {
    statusFormatter(status) {
      const obj = this.statusOpt.find((i) => i.value == status);
      return obj && obj.label;
    },
    /* 表格数据源 */
    datasource({ page, limit, where }) {
      return getList({
        pageNum: page,
        size: limit,
        ...where
      });
    },

    open(row, type) {
      this.$refs.edit.open(row, type);
    },

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

