<template>
    <el-table v-loading="loading" :data="drawingList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="版本号" align="center" prop="versionNumber" width="100" />
      <el-table-column label="文件名称" align="center" prop="fileName">
        <template #default="scope">
          <span style="color: #409eff" @click="handleView(scope.row)">{{ scope.row.fileName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图纸类型" align="center" prop="fileType" width="100">
        <template #default="scope">
          <dict-tag :options="drawing_file_type" :value="scope.row.fileType" />
        </template>
      </el-table-column>
      <el-table-column label="原文件名" align="center" prop="originalName" />
      <el-table-column label="是否最新" align="center" prop="newest">
        <template #default="scope">
          <div>
            <el-tag type="primary" v-if="scope.row.newest == '1'">是</el-tag>
            <el-tag type="success" v-else>否</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="流程状态" min-width="70">
        <template #default="scope">
          <dict-tag :options="wf_business_status" :value="scope.row.status"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column label="上传时间" align="center" prop="createTime" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="操作" align="center" class-name="small-padding " width="240">
        <template #default="scope">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5" v-if="scope.row.status === 'draft' || scope.row.status === 'cancel' || scope.row.status === 'back'">
              <el-button v-hasPermi="['design:drawing:edit']" size="small" type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                >修改</el-button
              >
            </el-col>
            <el-col :span="1.5" v-if="scope.row.status === 'draft' || scope.row.status === 'cancel' || scope.row.status === 'back'">
              <el-button v-hasPermi="['design:drawing:remove']" size="small" type="primary" icon="Delete" @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </el-col>
          </el-row>
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" size="small" icon="View" v-if="scope.row.status != 'draft'" @click="handleViewInfo(scope.row)"
                >查看</el-button
              >
            </el-col>
            <el-col :span="1.5" v-if="scope.row.status === 'waiting'">
              <el-button size="small" type="primary" icon="Notification" @click="handleCancelProcessApply(scope.row.id)">撤销</el-button>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
  </template>
  
  <script setup lang="ts">
  import { ref, defineProps, defineEmits } from 'vue';
  
  const props = defineProps({
    drawingList: {
      type: Array,
      required: true
    },
    loading: {
      type: Boolean,
      required: true
    },
    drawing_file_type: {
      type: Array,
      required: true
    },
    wf_business_status: {
      type: Array,
      required: true
    }
  });
  
  const emits = defineEmits([
    'selection-change',
    'view',
    'update',
    'delete',
    'view-info',
    'cancel-process-apply'
  ]);
  
  const handleSelectionChange = (selection) => {
    emits('selection-change', selection);
  };
  
  const handleView = (row) => {
    emits('view', row);
  };
  
  const handleUpdate = (row) => {
    emits('update', row);
  };
  
  const handleDelete = (row) => {
    emits('delete', row);
  };
  
  const handleViewInfo = (row) => {
    emits('view-info', row);
  };
  
  const handleCancelProcessApply = (id) => {
    emits('cancel-process-apply', id);
  };
  </script>