﻿<template>
  <span class="file-icon" :style="{ color: color }">
    <!-- 目录 -->
    <svg v-if="icon === 'folder'" viewBox="0 0 48 48" fill="currentColor">
      <path d="M40 12H22l-4-4H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V16c0-2.21-1.79-4-4-4z"/>
    </svg>
    
    <!-- Word -->
    <svg v-else-if="icon === 'word'" viewBox="0 0 48 48" fill="currentColor">
      <path d="M8 8h32v32H8z" fill="#2b579a"/>
      <path d="M14 16h4l3 10 3-10h4l-4 16h-6l-4-16z" fill="#fff"/>
    </svg>
    
    <!-- Excel -->
    <svg v-else-if="icon === 'excel'" viewBox="0 0 48 48" fill="currentColor">
      <path d="M8 8h32v32H8z" fill="#217346"/>
      <path d="M14 16h4l3 6 3-6h4l-5 8 5 8h-4l-3-6-3 6h-4l5-8-5-8z" fill="#fff"/>
    </svg>
    
    <!-- PPT -->
    <svg v-else-if="icon === 'ppt'" viewBox="0 0 48 48" fill="currentColor">
      <path d="M8 8h32v32H8z" fill="#d24726"/>
      <path d="M14 16h8c3.31 0 6 2.69 6 6s-2.69 6-6 6h-4v6h-4V16zm4 8h4c1.1 0 2-.9 2-2s-.9-2-2-2h-4v4z" fill="#fff"/>
    </svg>
    
    <!-- PDF -->
    <svg v-else-if="icon === 'pdf'" viewBox="0 0 48 48" fill="currentColor">
      <path d="M8 8h32v32H8z" fill="#f56c6c"/>
      <path d="M14 16h8c2.21 0 4 1.79 4 4s-1.79 4-4 4h-4v8h-4V16zm4 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4v2z" fill="#fff"/>
    </svg>
    
    <!-- 图片 -->
    <svg v-else-if="icon === 'image'" viewBox="0 0 48 48" fill="currentColor">
      <path d="M8 12h32v24H8z" fill="#67c23a"/>
      <circle cx="16" cy="20" r="4" fill="#fff"/>
      <path d="M12 32l8-10 6 6 6-8 6 12H12z" fill="#fff" opacity="0.8"/>
    </svg>
    
    <!-- 视频 -->
    <svg v-else-if="icon === 'video'" viewBox="0 0 48 48" fill="currentColor">
      <path d="M8 12h32v24H8z" fill="#409eff"/>
      <path d="M20 18v12l10-6-10-6z" fill="#fff"/>
    </svg>
    
    <!-- 音频 -->
    <svg v-else-if="icon === 'audio'" viewBox="0 0 48 48" fill="currentColor">
      <path d="M8 12h32v24H8z" fill="#e6a23c"/>
      <path d="M20 16v16l12-8-12-8z" fill="#fff"/>
    </svg>
    
    <!-- 代码 -->
    <svg v-else-if="icon === 'code'" viewBox="0 0 48 48" fill="currentColor">
      <path d="M8 8h32v32H8z" fill="#9c27b0"/>
      <path d="M16 18l-4 6 4 6h3l-4-6 4-6h-3zm13 0l4 6-4 6h3l4-6-4-6h-3zm-6 0l-2 12h3l2-12h-3z" fill="#fff"/>
    </svg>
    
    <!-- 文本 -->
    <svg v-else-if="icon === 'text'" viewBox="0 0 48 48" fill="currentColor">
      <path d="M12 8h24v32H12z" fill="#ecf0f1"/>
      <path d="M16 14h16v2H16zm0 6h16v2H16zm0 6h12v2H16z" fill="#bdc3c7"/>
    </svg>
    
    <!-- 压缩包 -->
    <svg v-else-if="icon === 'zip'" viewBox="0 0 48 48" fill="currentColor">
      <path d="M8 8h32v32H8z" fill="#8d6e63"/>
      <path d="M22 12h4v4h-4zm0 6h4v4h-4zm0 6h4v4h-4zm0 6h4v4h-4zm-4 4h12v4H18z" fill="#fff"/>
    </svg>
    
    <!-- 默认文档 -->
    <svg v-else viewBox="0 0 48 48" fill="currentColor">
      <path d="M12 8h16l10 10v22H12z" fill="#909399"/>
      <path d="M26 8v10h10z" fill="#b4b4b4"/>
    </svg>
  </span>
</template>

<script setup>
defineProps({
  icon: { type: String, default: 'document' },
  color: { type: String, default: '#909399' },
  size: { type: Number, default: 24 }
})
</script>

<style scoped>
.file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
}

.file-icon svg {
  width: 100%;
  height: 100%;
}
</style>
