<template>
  <GiPageLayout>
    <div class="system-insurance-overview-container">
      <!-- 页面标题 -->
      <div class="page-header">
        <h2 class="page-title">工作台概览</h2>
      </div>

      <!-- 统计卡片 -->
      <div class="stats-grid">
        <a-card class="stat-card" :bordered="false">
          <div class="stat-content">
            <div class="stat-value">{{ stats.totalEmployees }}</div>
            <div class="stat-label">员工总数</div>
            <div class="stat-trend">↑ 5% 较上月</div>
          </div>
        </a-card>

        <a-card class="stat-card" :bordered="false">
          <div class="stat-content">
            <div class="stat-value">{{ stats.validPolicies }}</div>
            <div class="stat-label">有效保单</div>
            <div class="stat-trend">↑ 3% 较上月</div>
          </div>
        </a-card>

        <a-card class="stat-card" :bordered="false">
          <div class="stat-content">
            <div class="stat-value">{{ stats.expiringPolicies }}</div>
            <div class="stat-label">即将到期</div>
            <div class="stat-trend">↑ 5% 较上月</div>
          </div>
        </a-card>

        <a-card class="stat-card" :bordered="false">
          <div class="stat-content">
            <div class="stat-value">{{ stats.annualPremium }}</div>
            <div class="stat-label">年度总保费</div>
            <div class="stat-trend">↑ 8% 较上年</div>
          </div>
        </a-card>
      </div>

      <!-- 筛选和操作区域 -->
      <div class="filter-section">
        <div class="filter-left">
          <a-select v-model="selectedDepartment" placeholder="全部部门" style="width: 150px">
            <a-option value="">全部部门</a-option>
            <a-option value="tech">技术部</a-option>
            <a-option value="sales">销售部</a-option>
            <a-option value="hr">人事部</a-option>
            <a-option value="finance">财务部</a-option>
          </a-select>
          <a-button type="primary" @click="handleFilter">
            筛选
          </a-button>
        </div>
        <div class="filter-right">
          <a-button type="outline" @click="handleExportExcel">
            <template #icon><icon-download /></template>
            导出Excel
          </a-button>
        </div>
      </div>

      <!-- 即将到期提醒 -->
      <a-alert
        type="warning"
        :message="expiringAlert"
        :closable="false"
        show-icon
        class="expiring-alert"
      />

      <!-- 保险类型分布图 -->
      <a-card class="chart-card" :bordered="false">
                 <template #title>
           <div class="chart-title">
             <icon-bar-chart />
             保险类型分布图表
           </div>
         </template>
        
        <div class="chart-container">
          <div class="chart-placeholder">
            <div class="chart-legend">
              <div class="legend-item">
                <div class="legend-color medical"></div>
                <span class="legend-text">医疗保险 (45%)</span>
              </div>
              <div class="legend-item">
                <div class="legend-color accident"></div>
                <span class="legend-text">意外险 (25%)</span>
              </div>
              <div class="legend-item">
                <div class="legend-color pension"></div>
                <span class="legend-text">养老保险 (20%)</span>
              </div>
              <div class="legend-item">
                <div class="legend-color life"></div>
                <span class="legend-text">人寿保险 (10%)</span>
              </div>
            </div>
            <div class="chart-visual">
              <!-- 简单的饼图可视化 -->
              <svg width="300" height="300" viewBox="0 0 300 300">
                <circle cx="150" cy="150" r="80" fill="#1890ff" stroke="#fff" stroke-width="2" />
                <circle cx="150" cy="150" r="80" fill="#52c41a" stroke="#fff" stroke-width="2" 
                        stroke-dasharray="125.6 502.4" stroke-dashoffset="0" 
                        transform="rotate(90 150 150)" />
                <circle cx="150" cy="150" r="80" fill="#faad14" stroke="#fff" stroke-width="2" 
                        stroke-dasharray="100.5 527.5" stroke-dashoffset="-125.6" 
                        transform="rotate(90 150 150)" />
                <circle cx="150" cy="150" r="80" fill="#f5222d" stroke="#fff" stroke-width="2" 
                        stroke-dasharray="62.8 565.2" stroke-dashoffset="-226.1" 
                        transform="rotate(90 150 150)" />
              </svg>
            </div>
          </div>
        </div>
      </a-card>
    </div>
  </GiPageLayout>
</template>

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

// 统计数据
const stats = reactive({
  totalEmployees: 156,
  validPolicies: 142,
  expiringPolicies: 23,
  annualPremium: '¥ 1,256,800'
})

// 筛选条件
const selectedDepartment = ref('')

// 即将到期提醒
const expiringAlert = '您有 3份 保险即将在30天内到期，请及时处理。'

// 筛选操作
const handleFilter = () => {
  Message.info('筛选功能已执行')
}

// 导出Excel
const handleExportExcel = () => {
  Message.success('Excel文件导出成功')
}
</script>

<style scoped>
.system-insurance-overview-container {
  padding: 20px;
}

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

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

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-content {
  text-align: center;
  padding: 20px;
}

.stat-value {
  font-size: 32px;
  font-weight: 600;
  color: #1d2129;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #4e5969;
  margin-bottom: 8px;
}

.stat-trend {
  font-size: 12px;
  color: #52c41a;
  font-weight: 500;
}

.filter-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.filter-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-right {
  display: flex;
  gap: 12px;
}

.expiring-alert {
  margin-bottom: 20px;
}

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

.chart-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
}

.chart-container {
  padding: 20px;
}

.chart-placeholder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.chart-legend {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 2px;
}

.legend-color.medical {
  background: #1890ff;
}

.legend-color.accident {
  background: #52c41a;
}

.legend-color.pension {
  background: #faad14;
}

.legend-color.life {
  background: #f5222d;
}

.legend-text {
  font-size: 14px;
  color: #4e5969;
}

.chart-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style> 