<template>
  <div class="revit-model-dashboard">
    <!-- Revit建筑设计头部信息 -->
    <div class="model-header">
      <div class="project-status">
        <div class="project-title">
          <div class="title-icon revit-icon">
            <i class="fas fa-building"></i>
          </div>
          <div class="title-content">
            <h2>Revit 建筑设计模型中心</h2>
            <p>当前项目：{{ projectData.ProjectName }}</p>
            <span class="project-status-badge connected">
              {{ projectData.IsLoaded ? '模型已加载' : '模型未加载' }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 项目基本信息 -->
    <div class="revit-project-info">
      <h3><i class="fas fa-info-circle"></i> 项目信息</h3>
      <div class="info-item">
        <span class="info-label">项目名称:</span>
        <span class="info-value">{{ projectData.ProjectName }}</span>
      </div>
      <div class="info-item">
        <span class="info-label">文件路径:</span>
        <span class="info-value">{{ projectData.FilePath }}</span>
      </div>
      <div class="info-item">
        <span class="info-label">Revit版本:</span>
        <span class="info-value">{{ projectData.RevitVersion }}</span>
      </div>
      <div class="info-item">
        <span class="info-label">文件大小:</span>
        <span class="info-value">{{ projectData.FileSizeDisplay }}</span>
      </div>
      <div class="info-item">
        <span class="info-label">中心文件:</span>
        <span class="info-value">{{ projectData.IsCentralFile ? '是' : '否' }}</span>
      </div>
    </div>

    <!-- 统计数据网格 -->
    <div class="revit-stats-grid">
      <div class="revit-stat-card">
        <h4><i class="fas fa-cubes"></i> 总元素数</h4>
        <div class="stat-number">{{ modelStats.TotalElements.toLocaleString() }}</div>
        <div class="stat-label">建筑模型总元素</div>
      </div>
      <div class="revit-stat-card">
        <h4><i class="fas fa-layer-group"></i> 层级数量</h4>
        <div class="stat-number">{{ modelStats.Levels }}</div>
        <div class="stat-label">建筑层级总数</div>
      </div>
      <div class="revit-stat-card">
        <h4><i class="fas fa-cube"></i> 3D视图</h4>
        <div class="stat-number">{{ modelStats.Views3D }}</div>
        <div class="stat-label">三维视图数量</div>
      </div>
      <div class="revit-stat-card">
        <h4><i class="fas fa-link"></i> 链接文件</h4>
        <div class="stat-number">{{ modelStats.LinkedFiles }}</div>
        <div class="stat-label">关联链接文件</div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="revit-content-grid">
      <!-- 左侧：建筑元素分布 -->
      <div class="revit-elements-breakdown">
        <h4><i class="fas fa-chart-pie"></i> 建筑元素分布</h4>
        <div class="revit-element-item" v-for="(count, type) in modelStats.ElementCounts" :key="type">
          <div class="revit-element-name">
            <div class="revit-element-icon" :class="getElementClass(type)">
              <i :class="getElementIcon(type)"></i>
            </div>
            {{ getElementDisplayName(type) }} ({{ type }})
          </div>
          <div class="revit-element-count">{{ count.toLocaleString() }}</div>
        </div>
      </div>

      <!-- 右侧：视图管理 -->
      <div class="revit-views-panel">
        <h4><i class="fas fa-eye"></i> 视图管理</h4>
        <div class="view-summary">
          <span class="view-label">平面图: </span>
          <strong>{{ modelStats.FloorPlans }}</strong>
          <span class="view-label active-label">立面图: </span>
          <strong class="active-count">{{ modelStats.Elevations }}</strong>
        </div>
        <div class="view-summary">
          <span class="view-label">剖面图: </span>
          <strong>{{ modelStats.Sections }}</strong>
          <span class="view-label active-label">图纸: </span>
          <strong class="active-count">{{ modelStats.Sheets }}</strong>
        </div>
        <div class="revit-view-item" v-for="view in modelStats.ActiveViews" :key="view">
          <i class="fas fa-eye"></i>
          <span>{{ view }}</span>
        </div>
      </div>
    </div>

    <!-- 底部信息区域 -->
    <div class="revit-bottom-grid">
      <!-- 链接文件信息 -->
      <div class="revit-links-info">
        <h4><i class="fas fa-link"></i> 链接文件</h4>
        <div class="revit-link-item">
          <span class="revit-link-label">Revit链接:</span>
          <span class="revit-link-value">{{ linkData.RevitLinks.Total }} (加载: {{ linkData.RevitLinks.Loaded }})</span>
        </div>
        <div class="revit-link-item">
          <span class="revit-link-label">CAD链接:</span>
          <span class="revit-link-value">{{ linkData.CadLinks.Total }} (加载: {{ linkData.CadLinks.Loaded }})</span>
        </div>
        <div class="revit-link-item">
          <span class="revit-link-label">点云:</span>
          <span class="revit-link-value">{{ linkData.PointClouds }}</span>
        </div>
      </div>

      <!-- 快捷操作 -->
      <div class="revit-actions-panel">
        <h4><i class="fas fa-bolt"></i> 快捷操作</h4>
        <button class="revit-action-btn" @click="refreshModel">
          <i class="fas fa-sync-alt"></i>
          刷新模型信息
        </button>
        <button class="revit-action-btn" @click="captureView">
          <i class="fas fa-camera"></i>
          捕获视图
        </button>
        <button class="revit-action-btn" @click="exportSchedule">
          <i class="fas fa-download"></i>
          导出明细表
        </button>
        <button class="revit-action-btn" @click="testConnection">
          <i class="fas fa-plug"></i>
          测试连接
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { ElNotification } from 'element-plus'
import { getNotificationConfig } from '@/config/cad'

// 获取通知配置
const notificationConfig = getNotificationConfig()

// 定义props接收API数据
const props = defineProps({
  modelData: {
    type: Object,
    required: true
  }
})

// 从API数据中提取项目信息
const projectData = computed(() => {
  const project = props.modelData?.project || {}
  return {
    ProjectName: project.name || 'Unknown Project',
    FilePath: project.filePath || 'Unknown Path',
    RevitVersion: project.revitVersion || 'Unknown Version',
    FileSizeDisplay: project.fileSizeDisplay || 'Unknown Size',
    IsCentralFile: project.isCentralFile || false,
    IsLoaded: project.status === '活动'
  }
})

// 从API数据中提取统计信息
const modelStats = computed(() => {
  const elements = props.modelData?.elements || {}
  const structure = props.modelData?.structure || {}
  const hierarchy = props.modelData?.hierarchy || {}

  return {
    TotalElements: elements.total || 0,
    Levels: hierarchy.levels?.length || structure.levels || 0,
    Views3D: structure.views3D || 0,
    LinkedFiles: (props.modelData?.links?.revitLinks?.total || 0) + (props.modelData?.links?.cadLinks?.total || 0),
    FloorPlans: structure.floorPlans || 0,
    Elevations: structure.elevations || 0,
    Sections: structure.sections || 0,
    Sheets: structure.sheets || 0,
    ActiveViews: ['Level 1 Floor Plan', '3D View - Building', 'South Elevation', 'Longitudinal Section'],
    ElementCounts: {
      'Walls': elements.walls || 0,
      'Doors': elements.doors || 0,
      'Windows': elements.windows || 0,
      'Floors': elements.floors || 0,
      'Ceilings': elements.ceilings || 0,
      'Columns': elements.columns || 0,
      'Beams': elements.beams || 0,
      'Rooms': elements.rooms || 0,
      'Stairs': 0, // API中没有楼梯数据，设为0
      'Railings': 0 // API中没有栏杆数据，设为0
    }
  }
})

// 从API数据中提取链接文件信息
const linkData = computed(() => {
  const links = props.modelData?.links || {}
  return {
    RevitLinks: {
      Total: links.revitLinks?.total || 0,
      Loaded: links.revitLinks?.loaded || 0,
      Unloaded: links.revitLinks?.unloaded || 0
    },
    CadLinks: {
      Total: links.cadLinks?.total || 0,
      Loaded: links.cadLinks?.loaded || 0,
      Unloaded: links.cadLinks?.unloaded || 0
    },
    PointClouds: links.pointClouds || 0
  }
})

// Revit建筑元素类型配置
const elementTypeIcons = {
  'Walls': { icon: 'fas fa-square', class: 'walls' },
  'Doors': { icon: 'fas fa-door-open', class: 'doors' },
  'Windows': { icon: 'fas fa-window-maximize', class: 'windows' },
  'Floors': { icon: 'fas fa-layer-group', class: 'floors' },
  'Ceilings': { icon: 'fas fa-grip-lines', class: 'ceilings' },
  'Columns': { icon: 'fas fa-columns', class: 'columns' },
  'Beams': { icon: 'fas fa-minus', class: 'beams' },
  'Rooms': { icon: 'fas fa-home', class: 'rooms' },
  'Stairs': { icon: 'fas fa-stairs', class: 'stairs' },
  'Railings': { icon: 'fas fa-grip-lines-vertical', class: 'railings' }
}

const elementTypeNames = {
  'Walls': '墙体',
  'Doors': '门',
  'Windows': '窗',
  'Floors': '楼板',
  'Ceilings': '天花板',
  'Columns': '柱子',
  'Beams': '梁',
  'Rooms': '房间',
  'Stairs': '楼梯',
  'Railings': '栏杆'
}

// 获取元素图标
const getElementIcon = (type) => {
  return elementTypeIcons[type]?.icon || 'fas fa-cube'
}

// 获取元素样式类
const getElementClass = (type) => {
  return elementTypeIcons[type]?.class || 'structure'
}

// 获取元素显示名称
const getElementDisplayName = (type) => {
  return elementTypeNames[type] || type
}

// 快捷操作方法
const refreshModel = () => {
  ElNotification({
    title: 'Revit刷新',
    message: 'Revit模型信息刷新功能暂未实现',
    type: 'info',
    position: 'top-right',
    duration: notificationConfig.ERROR_DURATION
  })
}

const captureView = () => {
  ElNotification({
    title: 'Revit视图捕获',
    message: 'Revit视图捕获功能暂未实现',
    type: 'info',
    position: 'top-right',
    duration: notificationConfig.ERROR_DURATION
  })
}

const exportSchedule = () => {
  ElNotification({
    title: 'Revit导出',
    message: 'Revit明细表导出功能暂未实现',
    type: 'info',
    position: 'top-right',
    duration: notificationConfig.ERROR_DURATION
  })
}

const testConnection = () => {
  ElNotification({
    title: 'Revit连接测试',
    message: 'Revit连接测试功能暂未实现',
    type: 'info',
    position: 'top-right',
    duration: notificationConfig.ERROR_DURATION
  })
}
</script>

<style scoped>
/* Revit建筑设计主题样式 */
.revit-model-dashboard {
  padding: var(--model-viewer-padding);
  background: var(--color-bg-primary);
  border-radius: var(--model-viewer-border-radius);
  min-height: var(--model-viewer-min-height);
}

/* 模型头部 */
.model-header {
  margin-bottom: var(--model-viewer-section-margin);
  padding-bottom: var(--model-viewer-section-padding);
  border-bottom: 1px solid var(--color-border-primary);
}

.project-status {
  display: flex;
  align-items: center;
}

.project-title {
  display: flex;
  align-items: center;
  gap: var(--model-viewer-header-gap);
}

.title-icon.revit-icon {
  width: 60px;
  height: 60px;
  background: var(--color-revit-gradient);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px var(--color-revit-shadow);
}

.title-icon.revit-icon i {
  font-size: 28px;
  color: white;
}

.title-content h2 {
  margin: 0 0 8px 0;
  color: var(--color-text-primary);
  font-size: 24px;
  font-weight: 700;
}

.title-content p {
  margin: 0 0 8px 0;
  color: var(--color-text-secondary);
  font-size: 16px;
}

.project-status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.project-status-badge.connected {
  background: var(--color-bg-success);
  color: var(--color-success);
}

/* 项目信息面板 */
.revit-project-info {
  background: var(--color-bg-card);
  border-radius: var(--size-border-radius);
  padding: var(--model-viewer-section-padding);
  margin-bottom: var(--model-viewer-section-margin);
  border: 1px solid var(--color-border-primary);
}

.revit-project-info h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: 600;
}

.revit-project-info h3 i {
  color: var(--color-revit);
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-white-rgb-1);
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  color: var(--color-text-secondary);
  font-size: 14px;
}

.info-value {
  color: var(--color-text-primary);
  font-weight: 500;
  font-size: 14px;
}

/* 统计数据网格 */
.revit-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: var(--model-viewer-section-margin);
}

.revit-stat-card {
  background: var(--color-bg-card);
  border-radius: var(--size-border-radius);
  padding: 20px;
  border: 1px solid var(--color-border-primary);
  text-align: center;
  transition: var(--transition-all);
}

.revit-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--color-shadow-card);
}

.revit-stat-card h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px 0;
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 500;
}

.revit-stat-card h4 i {
  color: var(--color-revit);
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: var(--color-text-tertiary);
}

/* 主要内容网格 */
.revit-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: var(--model-viewer-section-margin);
}

/* 建筑元素分布 */
.revit-elements-breakdown {
  background: var(--color-bg-card);
  border-radius: var(--size-border-radius);
  padding: var(--model-viewer-section-padding);
  border: 1px solid var(--color-border-primary);
}

.revit-elements-breakdown h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: 600;
}

.revit-elements-breakdown h4 i {
  color: var(--color-revit);
}

.revit-element-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-white-rgb-1);
}

.revit-element-item:last-child {
  border-bottom: none;
}

.revit-element-name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--color-text-primary);
}

.revit-element-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.revit-element-icon.walls { background: var(--color-revit-walls-bg); color: var(--color-revit-walls); }
.revit-element-icon.doors { background: var(--color-revit-doors-bg); color: var(--color-revit-doors); }
.revit-element-icon.windows { background: var(--color-revit-windows-bg); color: var(--color-revit-windows); }
.revit-element-icon.floors { background: var(--color-revit-floors-bg); color: var(--color-revit-floors); }
.revit-element-icon.ceilings { background: var(--color-revit-ceilings-bg); color: var(--color-revit-ceilings); }
.revit-element-icon.columns { background: var(--color-revit-columns-bg); color: var(--color-revit-columns); }
.revit-element-icon.beams { background: var(--color-revit-beams-bg); color: var(--color-revit-beams); }
.revit-element-icon.rooms { background: var(--color-revit-rooms-bg); color: var(--color-revit-rooms); }
.revit-element-icon.stairs { background: var(--color-revit-stairs-bg); color: var(--color-revit-stairs); }
.revit-element-icon.railings { background: var(--color-revit-railings-bg); color: var(--color-revit-railings); }

.revit-element-count {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 14px;
}

/* 视图管理面板 */
.revit-views-panel {
  background: var(--color-bg-card);
  border-radius: var(--size-border-radius);
  padding: var(--model-viewer-section-padding);
  border: 1px solid var(--color-border-primary);
}

.revit-views-panel h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: 600;
}

.revit-views-panel h4 i {
  color: var(--color-revit);
}

.view-summary {
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--color-white-rgb-05);
  border-radius: 6px;
}

.view-label {
  color: var(--color-text-secondary);
  font-size: 14px;
}

.view-label.active-label {
  margin-left: 15px;
}

.active-count {
  color: var(--color-success);
}

.revit-view-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 6px;
  background: var(--color-white-rgb-05);
  border-radius: 6px;
  border-left: 3px solid var(--color-revit);
}

.revit-view-item i {
  color: var(--color-revit);
}

.revit-view-item span {
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 500;
}

/* 底部信息网格 */
.revit-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* 链接文件信息 */
.revit-links-info {
  background: var(--color-bg-card);
  border-radius: var(--size-border-radius);
  padding: var(--model-viewer-section-padding);
  border: 1px solid var(--color-border-primary);
}

.revit-links-info h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: 600;
}

.revit-links-info h4 i {
  color: var(--color-revit);
}

.revit-link-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-white-rgb-1);
}

.revit-link-item:last-child {
  border-bottom: none;
}

.revit-link-label {
  color: var(--color-text-secondary);
  font-size: 14px;
}

.revit-link-value {
  color: var(--color-text-primary);
  font-weight: 500;
  font-size: 14px;
}

/* 快捷操作面板 */
.revit-actions-panel {
  background: var(--color-bg-card);
  border-radius: var(--size-border-radius);
  padding: var(--model-viewer-section-padding);
  border: 1px solid var(--color-border-primary);
}

.revit-actions-panel h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: 600;
}

.revit-actions-panel h4 i {
  color: var(--color-revit);
}

.revit-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: var(--color-white-rgb-05);
  border: 1px solid var(--color-border-primary);
  border-radius: 6px;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: var(--transition-all);
  font-size: 14px;
}

.revit-action-btn:hover {
  background: var(--color-white-rgb-1);
  border-color: var(--color-revit);
  transform: translateY(-1px);
}

.revit-action-btn i {
  color: var(--color-revit);
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .revit-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .revit-content-grid,
  .revit-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .revit-stats-grid {
    grid-template-columns: 1fr;
  }

  .project-title {
    flex-direction: column;
    text-align: center;
  }

  .title-icon.revit-icon {
    width: 50px;
    height: 50px;
  }
}
</style>