<template>
    <div class="file-actions">
      <template v-if="row.status == -3">
        <vxe-button status="danger" @click="$emit('remove', row)" size="mini">
          删除
        </vxe-button>
      </template>
      
      <template v-else-if="row.status == -2">
        <vxe-button status="warning" @click="$emit('replace', row)" size="mini">
          替换
        </vxe-button>
        <template v-if="isEditMode">
          <vxe-button status="primary" @click="$emit('upload2', row)" size="mini">
            上传
          </vxe-button>
          <vxe-button @click="$emit('cancel', row)" size="mini">
            取消
          </vxe-button>
        </template>
        <template v-else>
          <vxe-button status="primary" @click="$emit('edit', row)" size="mini">
            副本
          </vxe-button>
        </template>
      </template>
      
      <template v-else-if="row.status != 2">
        <vxe-button status="danger" @click="$emit('remove', row)" size="mini">
          删除
        </vxe-button>
        <vxe-button 
          status="primary" 
          @click="$emit('upload', row)" 
          :loading="row.status === 1"
          size="mini"
        >
          {{ row.status === 1 ? '上传中' : '上传' }}
        </vxe-button>
      </template>
      
      <template v-else>
        <vxe-button status="success" disabled size="mini">
          已完成
        </vxe-button>
      </template>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { computed } from 'vue';
  
  const props = defineProps<{
    row: any;
  }>();
  
  const emit = defineEmits(['remove', 'upload', 'edit', 'cancel', 'replace', 'upload2']);
  
  const isEditMode = computed(() => {
    return props.row.name !== props.row.originalName;
  });
  </script>
  
  <style lang="less" scoped>
  .file-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    
    :deep(.vxe-button) {
      font-size: 12px;
      padding: 2px 8px;
      height: 24px;
      line-height: 20px;
    }
  }
  </style>