<template>
  <div class="ele-body">
    <el-card shadow="never">
      <search ref="search" @search="reload"></search>
      <ele-pro-table ref="table" :columns="columns" :datasource="datasource" :pageSize="20"
        :pageSizes="[20, 30, 40, 50, 100]">
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button icon="el-icon-plus" type="primary" @click="handleMethod('add', {})">新建</el-button>
        </template>

        <template v-slot:code="{ row }">
          <el-link type="primary" :underline="false" @click="handleMethod('detail', row)">
            {{ row.code }}
          </el-link>
        </template>


        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link type="primary" :underline="false" @click="handleMethod('edit', row)" v-if="row.status != 1">
            修改
          </el-link>
          <el-link type="primary" :underline="false" @click="handleSubmit(row)" v-if="row.status == 0">
            提交
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>
    <edit ref="editRefs" @success="reload"></edit>
  </div>
</template>
<script>
import search from './components/search.vue';
import storageApi from '@/api/warehouseManagement';

import edit from './components/edit.vue';

export default {
  components: {
    search,
    edit
  },
  data() {
    return {
      columns: [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'code',
          slot: 'code',
          label: '编码',
          showOverflowTooltip: true,
          align: 'center',
          minWidth: 100
        },
        {
          prop: 'categoryNames',
          label: '名称',
          showOverflowTooltip: true,
          align: 'center'
        },
        {
          label: '类型',
          prop: 'sourceType',
          align: 'center',
          formatter: (row) => {
            return row.sourceType === 'SurplusReturn' ? '余料退库' : row.sourceType === 'UnqualiﬁedReturn' ? '不良退库' : row.sourceType === 'Finish' ? '完工入库' : row.sourceType === 'Temp' ? '暂存入库' : '';
          }
        },
        {
          label: '合格证号',
          prop: 'certificateNumber',
          align: 'center'
        },
        {
          prop: 'createUserName',
          label: '申请人',
          align: 'center'
        },
        {
          prop: 'createTime',
          label: '创建时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          slot: 'status',
          label: '状态',
          align: 'center',
          formatter: (row) => {
            return row.status === 0 ? '草稿' : row.status === 2 ? '已入库' : '已申请';
          }
        },
        {
          slot: 'action',
          label: '操作',
          align: 'center',
          fixed: 'right',
          width: 120,
        }
      ]
    };
  },
  created() {
  },
  methods: {
    datasource({ page, where, limit }) {
      if (where.time?.length) {
        where.startTime = where.time[0];
        where.endTime = where.time[1];
      }
      delete where.time;
      return storageApi.getStoreList({
        ...where,
        pageNum: page,
        size: limit
      });
    },

    reload(where) {
      this.$refs.table.reload({ page: 1, where });
    },
    handleMethod(type, row) {
      this.$refs.editRefs.open(type, row)
    },
    async handleSubmit(row) {
      this.$confirm('确定要提交该条数据吗？', '提示').then(() => {
        const res = storageApi.submitStoragejn({ id: row.id });
        if (res) {
          this.$message.success('操作成功！');
          this.reload();
        }
      });
    },
  }
};
</script>
