<template>
  <div class="pdms-analysis-dashboard pdms-theme">
    <!-- 如果没有模型，显示欢迎界面 -->
    <div v-if="!hasModel" class="pdms-analysis-welcome pdms-theme">
      <div class="welcome-icon">
        <i class="fas fa-industry"></i>
      </div>
      <h2>PDMS 模型分析中心</h2>
      <p>专业的工厂设计模型处理工具，提供智能化轻量化和优化选项。请先打开或连接一个PDMS项目以开始分析。</p>
      <div class="welcome-actions">
        <button class="welcome-btn" @click="openProject">
          <i class="fas fa-folder-open"></i>
          打开项目
        </button>
        <button class="welcome-btn" @click="refreshConnection">
          <i class="fas fa-sync-alt"></i>
          刷新连接
        </button>
      </div>
    </div>

    <!-- 如果有模型，显示分析仪表板 -->
    <div v-else>
      <div class="pdms-analysis-header">
        <h3>
          <i class="fas fa-industry"></i>
          PDMS 模型处理
        </h3>
        <p class="subtitle">{{ modelData?.ProjectInfo?.ProjectName || '当前连接的PDMS模型' }}</p>
      </div>

      <div class="pdms-strategy-selector">
        <h4>
          <i class="fas fa-cogs"></i>
          模型处理工具选择
        </h4>
        <div class="pdms-strategy-grid">
          <div
            class="pdms-strategy-card"
            data-strategy="shrinkwrap"
            @click="openShrinkwrapPage"
          >
            <div class="strategy-icon">
              <i class="fas fa-compress-arrows-alt"></i>
            </div>
            <h5>模型轻量化处理 (Shrinkwrap)</h5>
            <p>
              对PDMS模型进行轮廓化处理，保留外部边缘，删除内部不需要的构件，从而大幅缩减模型体积。
            </p>
            <div class="features">
              <span>轮廓化</span>
              <span>缩小体积</span>
              <span>定制类型保留</span>
            </div>
          </div>
          
          <div
            class="pdms-strategy-card"
            data-strategy="simplify"
            @click="openSimplifyPage"
          >
            <div class="strategy-icon" style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);">
              <i class="fas fa-filter"></i>
            </div>
            <h5>模型简化 (Simplify)</h5>
            <p>
              按设备类型规律地批量删除内部多余的构件元件，大幅度实现快速轻量化。
            </p>
            <div class="features">
              <span>类型过滤</span>
              <span>结构精简</span>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { ElNotification } from 'element-plus'

const props = defineProps({
  modelData: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['page-change'])

// 计算属性
const hasModel = computed(() => {
  return props.modelData && Object.keys(props.modelData).length > 0
})

// 方法
const openProject = () => {
  emit('page-change', 'connection')
}

const openShrinkwrapPage = () => {
  emit('page-change', 'pdms-shrinkwrap')
}

const openSimplifyPage = () => {
  emit('page-change', 'pdms-simplify')
}

const refreshConnection = () => {
  ElNotification({
    title: '刷新连接',
    message: '连接状态已刷新',
    type: 'info',
    position: 'top-right',
    duration: 2000
  })
}
</script>

<style scoped>
/* 仿照Revit的样式，颜色可以适当调整体现PDMS的工业感 */
.pdms-analysis-welcome {
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
  border: 1px solid var(--color-border-primary);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  animation: slideInUp 0.4s ease-out;
}

.welcome-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px auto;
  box-shadow: 0 8px 32px rgba(16, 185, 129, 0.3);
}

.welcome-icon i {
  font-size: 32px;
  color: white;
}

.pdms-analysis-welcome h2 {
  color: #10b981;
  font-size: 1.6em;
  font-weight: 600;
  margin: 0 0 16px 0;
}

.pdms-analysis-welcome p {
  color: var(--color-text-secondary);
  font-size: 0.9em;
  margin: 0 0 32px 0;
  line-height: 1.6;
}

.welcome-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.welcome-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.welcome-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.6);
}

.pdms-analysis-dashboard {
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
  border: 1px solid var(--color-border-primary);
  border-radius: 16px;
  padding: 24px;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  animation: slideInUp 0.4s ease-out;
}

.pdms-analysis-header {
  text-align: center;
  margin-bottom: 32px;
}

.pdms-analysis-header h3 {
  color: #10b981;
  font-size: 1.6em;
  font-weight: 600;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.pdms-analysis-header .subtitle {
  color: var(--color-text-secondary);
  font-size: 0.9em;
  margin: 0;
}

.pdms-strategy-selector {
  margin-bottom: 32px;
}

.pdms-strategy-selector h4 {
  color: var(--color-text-primary);
  font-size: 1.3em;
  font-weight: 600;
  margin: 0 0 20px 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

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

.pdms-strategy-card {
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-white-rgb-05) 100%);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  backdrop-filter: blur(10px);
  text-align: center;
}

.pdms-strategy-card:hover {
  transform: translateY(-4px);
  border-color: #10b981;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}

.pdms-strategy-card.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  border-color: var(--color-text-disabled);
}

.pdms-strategy-card.disabled:hover {
  transform: none;
  border-color: var(--color-text-disabled);
  box-shadow: none;
}

.strategy-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.strategy-icon i {
  font-size: 24px;
  color: white;
}

.pdms-strategy-card h5 {
  color: var(--color-text-primary);
  font-size: 1.2em;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.pdms-strategy-card p {
  color: var(--color-text-secondary);
  font-size: 0.9em;
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.status-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--color-warning);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.7em;
  font-weight: 600;
}

.features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.features span {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75em;
  font-weight: 500;
}
</style>
