<template>
  <GiPageLayout>
    <div class="file-management-container">
      <!-- 页面标题 -->
      <div class="page-header">
        <h2 class="page-title">保单文件管理</h2>
        <a-button type="primary" @click="handleUploadFile">
          <template #icon><icon-upload /></template>
          上传文件
        </a-button>
      </div>

      <!-- 搜索表单 -->
      <a-card class="search-card" :bordered="false">
        <a-form :model="searchForm" layout="inline">
          <a-form-item>
            <a-input 
              v-model="searchForm.keyword"
              placeholder="搜索员工姓名或文件名..."
              style="width: 300px"
              allow-clear
              @press-enter="handleSearch"
            />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleSearch">
              <template #icon><icon-search /></template>
              搜索
            </a-button>
          </a-form-item>
        </a-form>
      </a-card>

      <!-- 文件信息表格 -->
      <a-card class="table-card" :bordered="false">
        <a-table 
          :columns="columns" 
          :data="tableData"
          :pagination="pagination"
          :loading="loading"
          row-key="id"
          @page-change="handlePageChange"
          @page-size-change="handlePageSizeChange"
        >
          <template #fileType="{ record }">
            <a-tag color="blue">
              {{ record.fileType }}
            </a-tag>
          </template>

          <template #action="{ record }">
            <a-button 
              type="text" 
              size="small" 
              @click="handleView(record)"
            >
              查看
            </a-button>
            <a-button 
              type="text" 
              size="small" 
              status="success"
              @click="handleDownload(record)"
            >
              下载
            </a-button>
            <a-button 
              type="text" 
              size="small" 
              status="danger"
              @click="handleDelete(record)"
            >
              删除
            </a-button>
          </template>
        </a-table>
      </a-card>

      <!-- 上传文件弹窗 -->
      <a-modal
        v-model:visible="uploadModalVisible"
        title="上传保单文件"
        width="600px"
        @ok="handleUploadOk"
        @cancel="handleUploadCancel"
      >
        <a-form :model="uploadForm" layout="vertical">
          <a-row :gutter="20">
            <a-col :span="24">
              <a-form-item label="员工" required>
                <a-select 
                  v-model="uploadForm.employeeId" 
                  placeholder="请选择员工"
                  :loading="loadingEmployees"
                  allow-search
                  :filter-option="true"
                >
                  <a-option 
                    v-for="employee in employeeOptions" 
                    :key="employee.id" 
                    :value="employee.id"
                  >
                    {{ employee.nickname || employee.username }} ({{ employee.username }})
                  </a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="20">
            <a-col :span="24">
              <a-form-item label="文件类型" required>
                <a-select v-model="uploadForm.fileType" placeholder="请选择文件类型">
                  <a-option value="保险合同">保险合同</a-option>
                  <a-option value="保单">保单</a-option>
                  <a-option value="理赔申请">理赔申请</a-option>
                  <a-option value="体检报告">体检报告</a-option>
                  <a-option value="其他文件">其他文件</a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="20">
            <a-col :span="24">
              <a-form-item label="选择文件" required>
                <a-upload
                  :auto-upload="false"
                  :show-file-list="true"
                  :limit="1"
                  accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png"
                >
                  <template #upload-button>
                    <a-button>
                      <template #icon><icon-upload /></template>
                      选择文件
                    </a-button>
                  </template>
                </a-upload>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="20">
            <a-col :span="24">
              <a-form-item label="文件描述">
                <a-textarea v-model="uploadForm.description" placeholder="请输入文件描述" :auto-size="{ minRows: 3, maxRows: 5 }" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-modal>

      <!-- 查看文件详情弹窗 -->
      <a-modal
        v-model:visible="detailModalVisible"
        title="文件详情"
        width="600px"
      >
        <div class="detail-content" v-if="selectedRecord">
          <div class="detail-item">
            <span class="detail-label">员工姓名：</span>
            <span class="detail-value">{{ selectedRecord.employeeName }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">工号：</span>
            <span class="detail-value">{{ selectedRecord.employeeId }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">文件名：</span>
            <span class="detail-value">{{ selectedRecord.fileName }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">文件类型：</span>
            <a-tag color="blue">{{ selectedRecord.fileType }}</a-tag>
          </div>
          <div class="detail-item">
            <span class="detail-label">上传日期：</span>
            <span class="detail-value">{{ selectedRecord.uploadDate }}</span>
          </div>
          <div class="detail-item" v-if="selectedRecord.remarks">
            <span class="detail-label">备注：</span>
            <span class="detail-value">{{ selectedRecord.remarks }}</span>
          </div>
        </div>
      </a-modal>
    </div>
  </GiPageLayout>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import { 
  IconUpload, 
  IconSearch
} from '@arco-design/web-vue/es/icon'
import { listAllUser } from '@/apis/system/user'
import type { UserResp } from '@/apis/system/type'

// 搜索表单数据
const searchForm = reactive({
  keyword: ''
})

// 员工选项数据
const employeeOptions = ref<UserResp[]>([])
const loadingEmployees = ref(false)

// 表格列定义
const columns = [
  { title: '员工姓名', dataIndex: 'employeeName', width: 120 },
  { title: '工号', dataIndex: 'employeeId', width: 120 },
  { title: '文件名', dataIndex: 'fileName', width: 200 },
  { title: '文件类型', dataIndex: 'fileType', slotName: 'fileType', width: 120 },
  { title: '上传日期', dataIndex: 'uploadDate', width: 140 },
  { title: '操作', slotName: 'action', width: 180 }
]

// 表格数据
const tableData = ref([
  {
    id: 1,
    employeeName: '张三',
    employeeId: 'EMP001',
    fileName: '医疗保险合同.pdf',
    fileType: 'PDF文档',
    uploadDate: '2023-01-05',
    remarks: '医疗保险相关合同文件'
  },
  {
    id: 2,
    employeeName: '李四',
    employeeId: 'EMP002',
    fileName: '意外险合同.pdf',
    fileType: 'PDF文档',
    uploadDate: '2023-01-05',
    remarks: '意外险保单合同'
  },
  {
    id: 3,
    employeeName: '王五',
    employeeId: 'EMP003',
    fileName: '养老保险合同.pdf',
    fileType: 'PDF文档',
    uploadDate: '2022-01-05',
    remarks: '养老保险合同文档'
  }
])

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 3,
  showTotal: true,
  showJumper: true,
  showPageSize: true
})

// 加载状态
const loading = ref(false)

// 弹窗状态
const uploadModalVisible = ref(false)
const detailModalVisible = ref(false)

// 上传表单数据
const uploadForm = reactive({
  employeeName: '',
  employeeId: '',
  fileName: '',
  fileType: '',
  remarks: '',
  description: ''
})

// 选中的记录
const selectedRecord = ref<any>(null)

// 搜索
const handleSearch = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    Message.success('搜索完成')
  }, 1000)
}

// 分页改变
const handlePageChange = (current: number) => {
  pagination.current = current
  handleSearch()
}

const handlePageSizeChange = (pageSize: number) => {
  pagination.pageSize = pageSize
  handleSearch()
}

// 上传文件
const handleUploadFile = () => {
  uploadModalVisible.value = true
  Object.assign(uploadForm, {
    employeeName: '',
    employeeId: '',
    fileName: '',
    fileType: '',
    remarks: ''
  })
}

// 查看文件
const handleView = (record: any) => {
  selectedRecord.value = record
  detailModalVisible.value = true
}

// 下载文件
const handleDownload = (record: any) => {
  Message.success(`下载文件 ${record.fileName} 成功`)
  // 这里可以实现实际的文件下载逻辑
}

// 删除文件
const handleDelete = (record: any) => {
  Message.success(`删除文件 ${record.fileName} 成功`)
}

// 上传确认
const handleUploadOk = () => {
  Message.success('文件上传成功')
  uploadModalVisible.value = false
}

// 上传取消
const handleUploadCancel = () => {
  uploadModalVisible.value = false
}

// 获取员工列表
const fetchEmployeeOptions = async () => {
  try {
    loadingEmployees.value = true
    const response = await listAllUser({})
    employeeOptions.value = response.data || []
  } catch (error) {
    console.error('获取员工列表失败:', error)
    Message.error('获取员工列表失败')
  } finally {
    loadingEmployees.value = false
  }
}

// 初始化
onMounted(() => {
  handleSearch()
  fetchEmployeeOptions()
})
</script>

<style scoped>
.file-management-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

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

.search-card {
  margin-bottom: 20px;
}

.table-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.detail-content {
  padding: 20px;
}

.detail-item {
  display: flex;
  margin-bottom: 16px;
  align-items: flex-start;
}

.detail-label {
  font-weight: 600;
  width: 100px;
  flex-shrink: 0;
  color: #1d2129;
}

.detail-value {
  color: #4e5969;
  word-break: break-word;
}
</style> 