<template>
  <div class='process-documents'>
    <el-card shadow='never'>
      <template #header>
        <div class='card-header'>
          <span>工艺文件查看</span>
          <el-button type='primary' icon='Refresh' @click='getList'>刷新</el-button>
        </div>
      </template>

      <div v-if='documentList.length === 0' class='empty-state'>
        <el-empty description='暂无工艺文件' />
      </div>

      <div v-else class='document-list'>
        <div
          v-for='doc in documentList'
          :key='doc.id'
          class='document-item'
          @click='handleViewDocument(doc)'
        >
          <el-icon class='document-icon'>
            <Document />
          </el-icon>
          <div class='document-info'>
            <div class='document-name'>{{ doc.name }}</div>
            <div class='document-meta'>
              <span>类型: {{ doc.type }}</span>
              <span>大小: {{ doc.size }}</span>
              <span>更新时间: {{ parseTime(doc.updateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </div>
          </div>
          <el-button link type='primary' @click.stop='handleDownload(doc)'>
            下载
          </el-button>
        </div>
      </div>

      <pagination
        v-show='total > 0'
        :total='total'
        v-model:page='queryParams.pageNum'
        v-model:limit='queryParams.pageSize'
        @pagination='getList'
      />
    </el-card>

    <!-- 文档预览对话框 -->
    <el-dialog
      v-model='previewVisible'
      :title='currentDocument?.name'
      width='80%'
      append-to-body
    >
      <div class='preview-container'>
        <img
          v-if='isImage(currentDocument?.type)'
          :src='currentDocument?.url'
          alt='工艺图纸'
          style='max-width: 100%; height: auto;'
        />
        <iframe
          v-else
          :src='currentDocument?.url'
          style='width: 100%; height: 600px; border: none;'
        />
      </div>
    </el-dialog>
  </div>
</template>

<script setup name='ProcessDocuments' lang='ts'>
import { ref, onMounted, getCurrentInstance } from 'vue';
import { Document } from '@element-plus/icons-vue';
import { parseTime } from '@/utils/ruoyi';

const props = defineProps<{
  workstationId?: string | number;
}>();

const { proxy } = getCurrentInstance() as any;

const loading = ref(false);
const documentList = ref<any[]>([]);
const total = ref(0);
const previewVisible = ref(false);
const currentDocument = ref<any>(null);

const queryParams = ref({
  pageNum: 1,
  pageSize: 10
});

// 获取工艺文件列表
const getList = async () => {
  loading.value = true;
  try {
    // 这里应该调用专门的工艺文件接口
    // 实际应该调用类似 /mes/technologyInfo/list 或 /mes/planInfo/processDocuments 的接口
    // 暂时使用模拟数据
    await new Promise(resolve => setTimeout(resolve, 500));
    
    documentList.value = [
      {
        id: 1,
        name: '外腔综合加工工艺图纸.pdf',
        type: 'PDF',
        size: '2.5MB',
        updateTime: new Date(),
        url: '/api/files/process/1'
      },
      {
        id: 2,
        name: '工序流程图.png',
        type: '图片',
        size: '1.2MB',
        updateTime: new Date(),
        url: '/api/files/process/2'
      }
    ];
    
    total.value = documentList.value.length;
  } catch (error) {
    console.error('获取工艺文件失败:', error);
    proxy?.$modal.msgError('获取工艺文件失败');
  } finally {
    loading.value = false;
  }
};

// 判断是否为图片
const isImage = (type?: string) => {
  return type === '图片' || type?.toLowerCase().includes('image');
};

// 查看文档
const handleViewDocument = (doc: any) => {
  currentDocument.value = doc;
  previewVisible.value = true;
};

// 下载文档
const handleDownload = (doc: any) => {
  // 这里应该调用下载接口
  proxy?.$modal.msgInfo(`下载文件: ${doc.name}`);
  // 实际实现：
  // window.open(doc.url, '_blank');
};

// 刷新数据
const refresh = () => {
  getList();
};

defineExpose({
  refresh
});

onMounted(() => {
  getList();
});
</script>

<style scoped lang='scss'>
.process-documents {
  width: 100%;
  height: 100%;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .empty-state {
    padding: 40px 0;
  }

  .document-list {
    .document-item {
      display: flex;
      align-items: center;
      padding: 15px;
      margin-bottom: 10px;
      background: #f5f7fa;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background: #e4e7ed;
        transform: translateX(5px);
      }

      .document-icon {
        font-size: 32px;
        color: #409eff;
        margin-right: 15px;
      }

      .document-info {
        flex: 1;

        .document-name {
          font-size: 16px;
          font-weight: 500;
          color: #303133;
          margin-bottom: 5px;
        }

        .document-meta {
          font-size: 12px;
          color: #909399;

          span {
            margin-right: 15px;
          }
        }
      }
    }
  }

  .preview-container {
    text-align: center;
  }
}
</style>
