<template>
  <div class="pdms-analysis-dashboard">
    <!-- PDMS分析头部信息 -->
    <div class="analysis-header">
      <div class="project-status">
        <div class="project-title">
          <div class="title-icon pdms-icon">
            <i class="fas fa-industry"></i>
          </div>
          <div class="title-content">
            <h2>PDMS 工厂设计分析中心</h2>
            <p>当前项目：{{ projectData.ProjectName }}</p>
            <span class="project-status-badge connected">
              {{ modelLoaded ? '模型已加载' : '模型未加载' }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 项目基本信息 -->
    <div class="pdms-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.MdsName }}</span>
      </div>
      <div class="info-item">
        <span class="info-label">PDMS版本:</span>
        <span class="info-value">{{ projectData.PdmsVersion }}</span>
      </div>
    </div>

    <!-- 统计数据网格 -->
    <div class="pdms-stats-grid">
      <div class="pdms-stat-card">
        <h4><i class="fas fa-cubes"></i> 总元素数</h4>
        <div class="stat-number">{{ (modelStats.TotalElements || 0).toLocaleString() }}</div>
        <div class="stat-label">工厂模型总元素</div>
      </div>
      <div class="pdms-stat-card">
        <h4><i class="fas fa-layer-group"></i> 区域数量</h4>
        <div class="stat-number">{{ modelStats.ZoneCount || 0 }}</div>
        <div class="stat-label">设计区域总数</div>
      </div>
      <div class="pdms-stat-card">
        <h4><i class="fas fa-play-circle"></i> 活跃区域</h4>
        <div class="stat-number">{{ (modelStats.ActiveZones || []).length }}</div>
        <div class="stat-label">当前活跃区域</div>
      </div>
      <div class="pdms-stat-card">
        <h4><i class="fas fa-th-list"></i> 元素类型</h4>
        <div class="stat-number">{{ Object.keys(modelStats.ElementCounts || {}).length }}</div>
        <div class="stat-label">不同元素类型</div>
      </div>
    </div>

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

      <!-- 右侧：区域管理 -->
      <div class="pdms-zones-panel">
        <h4><i class="fas fa-map-marked-alt"></i> 区域管理</h4>
        <div class="zone-summary">
          <span class="zone-label">总区域: </span>
          <strong>{{ modelStats.ZoneCount || 0 }}</strong>
          <span class="zone-label active-label">活跃区域: </span>
          <strong class="active-count">{{ (modelStats.ActiveZones || []).length }}</strong>
        </div>
        <div class="pdms-zone-item active" v-for="zone in (modelStats.ActiveZones || [])" :key="zone">
          <i class="fas fa-check-circle"></i>
          <span>{{ zone }}</span>
        </div>
      </div>
    </div>

    <!-- 底部信息区域 -->
    <div class="pdms-bottom-grid">
      <!-- 会话信息 -->
      <div class="pdms-session-info">
        <h4><i class="fas fa-user-clock"></i> 会话信息</h4>
        <div class="pdms-session-item">
          <span class="pdms-session-label">用户名:</span>
          <span class="pdms-session-value">{{ sessionData.UserName }}</span>
        </div>
        <div class="pdms-session-item">
          <span class="pdms-session-label">启动时间:</span>
          <span class="pdms-session-value">{{ formatDateTime(sessionData.StartTime) }}</span>
        </div>
        <div class="pdms-session-item">
          <span class="pdms-session-label">运行时长:</span>
          <span class="pdms-session-value">{{ formatDuration(sessionData.DurationMinutes) }}</span>
        </div>
      </div>

      <!-- 快捷操作 -->
      <div class="pdms-actions-panel">
        <h4><i class="fas fa-bolt"></i> 快捷操作</h4>
        <button class="pdms-action-btn" @click="refreshModel">
          <i class="fas fa-sync-alt"></i>
          刷新模型信息
        </button>
        <button class="pdms-action-btn" @click="captureScreenshot">
          <i class="fas fa-camera"></i>
          截图保存
        </button>
        <button class="pdms-action-btn" @click="exportProjectInfo">
          <i class="fas fa-download"></i>
          导出项目信息
        </button>
        <button class="pdms-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()

// 接收父组件传递的数据
const props = defineProps({
  modelData: {
    type: Object,
    required: true
  }
})

// 从API数据中提取各部分数据
const projectData = computed(() => props.modelData?.ProjectInfo || {})
const modelStats = computed(() => props.modelData?.ModelStatistics || {})
const sessionData = computed(() => props.modelData?.SessionInfo || {})
const modelLoaded = computed(() => props.modelData?.ModelLoaded || false)

// PDMS元素类型配置
const elementTypeIcons = {
  'PIPE': { icon: 'fas fa-minus', class: 'pipe' },
  'ELBO': { icon: 'fas fa-corner-up-right', class: 'elbo' },
  'VALVE': { icon: 'fas fa-stop-circle', class: 'valve' },
  'FITTING': { icon: 'fas fa-puzzle-piece', class: 'fitting' },
  'EQUIPMENT': { icon: 'fas fa-cogs', class: 'equipment' },
  'STRUCTURE': { icon: 'fas fa-building', class: 'structure' },
  'TEE': { icon: 'fas fa-code-branch', class: 'fitting' },
  'REDUCER': { icon: 'fas fa-compress-arrows-alt', class: 'fitting' },
  'FLANGE': { icon: 'fas fa-circle-notch', class: 'fitting' },
  'PUMP': { icon: 'fas fa-fan', class: 'equipment' },
  'TANK': { icon: 'fas fa-archive', class: 'equipment' }
}

const elementTypeNames = {
  'PIPE': '管道',
  'ELBO': '弯头',
  'VALVE': '阀门',
  'FITTING': '管件',
  'EQUIPMENT': '设备',
  'STRUCTURE': '结构',
  'TEE': '三通',
  'REDUCER': '异径管',
  'FLANGE': '法兰',
  'PUMP': '泵',
  'TANK': '储罐'
}

// 获取元素图标
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 formatDateTime = (dateTimeString) => {
  if (!dateTimeString) return '未知'

  try {
    const date = new Date(dateTimeString)
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    })
  } catch {
    return dateTimeString
  }
}

// 格式化持续时间
const formatDuration = (minutes) => {
  if (!minutes || minutes === 0) return '未知'

  const hours = Math.floor(minutes / 60)
  const mins = minutes % 60

  if (hours > 0) {
    return `${hours}小时${mins}分钟`
  } else {
    return `${mins}分钟`
  }
}

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

const captureScreenshot = () => {
  ElNotification({
    title: 'PDMS截图',
    message: 'PDMS截图保存功能暂未实现',
    type: 'info',
    position: 'top-right',
    duration: notificationConfig.ERROR_DURATION
  })
}

const exportProjectInfo = () => {
  ElNotification({
    title: 'PDMS导出',
    message: 'PDMS项目信息导出功能暂未实现',
    type: 'info',
    position: 'top-right',
    duration: notificationConfig.ERROR_DURATION
  })
}

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

<style scoped>
/* PDMS工厂设计主题样式 */
.pdms-analysis-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);
}

/* 分析头部 */
.analysis-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.pdms-icon {
  width: 60px;
  height: 60px;
  background: var(--color-pdms-gradient);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px var(--color-pdms-shadow);
}

.title-icon.pdms-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);
}

/* 项目信息面板 */
.pdms-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);
}

.pdms-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;
}

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

.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;
}

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

.pdms-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);
}

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

.pdms-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;
}

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

.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);
}

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

/* 元素类型分布 */
.pdms-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);
}

.pdms-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;
}

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

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

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

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

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

.pdms-element-icon.pipe { background: var(--color-pdms-pipe-bg); color: var(--color-pdms-pipe); }
.pdms-element-icon.elbo { background: var(--color-pdms-elbo-bg); color: var(--color-pdms-elbo); }
.pdms-element-icon.valve { background: var(--color-pdms-valve-bg); color: var(--color-pdms-valve); }
.pdms-element-icon.fitting { background: var(--color-pdms-fitting-bg); color: var(--color-pdms-fitting); }
.pdms-element-icon.equipment { background: var(--color-pdms-equipment-bg); color: var(--color-pdms-equipment); }
.pdms-element-icon.structure { background: var(--color-pdms-structure-bg); color: var(--color-pdms-structure); }

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

/* 区域管理面板 */
.pdms-zones-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);
}

.pdms-zones-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;
}

.pdms-zones-panel h4 i {
  color: var(--color-pdms);
}

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

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

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

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

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

.pdms-zone-item i {
  color: var(--color-success);
}

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

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

/* 会话信息 */
.pdms-session-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);
}

.pdms-session-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;
}

.pdms-session-info h4 i {
  color: var(--color-pdms);
}

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

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

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

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

/* 快捷操作面板 */
.pdms-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);
}

.pdms-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;
}

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

.pdms-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;
}

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

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

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

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

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

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

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