<template>
  <GiPageLayout>
    <div class="policy-files-container">
      <!-- 页面标题 -->
      <div class="page-header">
        <h2 class="page-title">保单文件</h2>
      </div>

      <!-- 文件列表 -->
      <div class="file-list">
        <div
          v-for="file in fileList"
          :key="file.id"
          class="file-item"
        >
          <div class="file-info">
            <div class="file-icon">
              <IconFilePdf v-if="file.type === 'pdf'" />
              <IconFile v-else />
            </div>
            <div class="file-details">
              <div class="file-name">{{ file.name }}</div>
              <div class="file-meta">上传于 {{ file.uploadDate }}</div>
            </div>
          </div>
          <div class="file-actions">
            <a-button
              type="primary"
              size="small"
              @click="handleView(file)"
            >
              查看
            </a-button>
            <a-button
              type="outline"
              size="small"
              status="success"
              @click="handleDownload(file)"
            >
              下载
            </a-button>
          </div>
        </div>
      </div>
    </div>
  </GiPageLayout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Message } from '@arco-design/web-vue'
import { IconFile, IconFilePdf } from '@arco-design/web-vue/es/icon'

// 文件列表数据
const fileList = ref([
  {
    id: 1,
    name: '中国人寿-医疗保险-保单.pdf',
    type: 'pdf',
    uploadDate: '2023-01-05',
    size: '2.5MB',
    url: '/files/insurance/medical-insurance-policy.pdf',
  },
  {
    id: 2,
    name: '平安保险-意外险-保单.pdf',
    type: 'pdf',
    uploadDate: '2023-01-05',
    size: '1.8MB',
    url: '/files/insurance/accident-insurance-policy.pdf',
  },
  {
    id: 3,
    name: '泰康保险-养老保险-保单.pdf',
    type: 'pdf',
    uploadDate: '2022-01-05',
    size: '3.2MB',
    url: '/files/insurance/pension-insurance-policy.pdf',
  },
  {
    id: 4,
    name: '保险条款说明.docx',
    type: 'docx',
    uploadDate: '2022-01-10',
    size: '1.5MB',
    url: '/files/insurance/insurance-terms.docx',
  },
])

// 查看文件
const handleView = (file: any) => {
  Message.info(`查看文件：${file.name}`)
  // 这里可以实现文件预览功能
}

// 下载文件
const handleDownload = (file: any) => {
  Message.success(`下载文件：${file.name}`)
  // 这里可以实现文件下载功能
  // 创建隐藏的下载链接
  const link = document.createElement('a')
  link.href = file.url
  link.download = file.name
  link.click()
}
</script>

<style scoped>
.policy-files-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #1d2129;
  margin: 0;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.file-item:hover {
  transform: translateY(-2px);
}

.file-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.file-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f9ff;
  border-radius: 8px;
  color: #1890ff;
  font-size: 20px;
}

.file-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.file-name {
  font-size: 16px;
  font-weight: 500;
  color: #1d2129;
}

.file-meta {
  font-size: 12px;
  color: #4e5969;
}

.file-actions {
  display: flex;
  gap: 8px;
}
</style>
