info-assets-manage/src/views/home.vue

<template>
  <el-container class="h-full bg-gradient-to-br from-blue-50 to-indigo-100">
    <el-main class="h-full p-0">
      <!-- 核心业务模块 -->
      <div class="px-8">
        <div class="max-w-6xl mx-auto">
          <div class="text-center mb-16">
            <h2 class="text-4xl font-extrabold text-gray-900 mb-4">核心业务模块</h2>
            <p class="text-xl text-gray-600">为您提供全方位的园区服务解决方案</p>
          </div>
          <el-row :gutter="32" class="justify-center">
            <!-- 公租房模块 -->
            <el-col :xs="24" :sm="12" :md="8" class="mb-8">
              <el-card
                class="h-full shadow-xl hover:shadow-2xl transition-all duration-300 rounded-2xl border-0 overflow-hidden group"
              >
                <div class="relative">
                  <div
                    class="bg-gradient-to-br from-blue-500 to-blue-600 p-8 text-white text-center"
                  >
                    <el-icon
                      :size="64"
                      class="mb-4 group-hover:scale-110 transition-transform duration-300"
                    >
                      <Building />
                    </el-icon>
                    <h3 class="text-2xl font-bold mb-2">公租房管理</h3>
                  </div>
                  <div class="p-8">
                    <p class="text-gray-600 mb-6 leading-relaxed">
                      提供便捷的公租房申请、分配、租赁和后期管理服务，助力解决住房问题。
                    </p>
                    <div class="space-y-3 mb-6">
                      <div class="flex items-center text-sm text-gray-600">
                        <el-icon class="mr-2 text-green-500">
                          <Check />
                        </el-icon>
                        在线申请与签订
                      </div>
                      <div class="flex items-center text-sm text-gray-600">
                        <el-icon class="mr-2 text-green-500">
                          <Check />
                        </el-icon>
                        AR全景看房
                      </div>
                      <div class="flex items-center text-sm text-gray-600">
                        <el-icon class="mr-2 text-green-500">
                          <Check />
                        </el-icon>
                        24/7 维护服务
                      </div>
                    </div>
                    <div class="space-y-3">
                      <div>
                        <el-button
                          type="primary"
                          round
                          class="w-full"
                          @click="toZflbLink('housing')"
                          size="medium"
                        >
                          <el-icon class="mr-1">
                            <ArrowRight />
                          </el-icon>
                          立即申请
                        </el-button>
                      </div>
                      <div>
                        <el-button
                          type="info"
                          round
                          class="w-full bg-gradient-to-r from-cyan-500 to-blue-500 border-0 text-white hover:from-cyan-600 hover:to-blue-600"
                          @click="openARDialog('housing')"
                          :disabled="housingTypes.length === 0"
                          size="medium"
                          :loading="loadingStates.housing"
                        >
                          <el-icon class="mr-1" v-if="!loadingStates.housing">
                            <Camera />
                          </el-icon>
                          {{ loadingStates.housing ? '加载中...' : 'AR看房体验' }}
                        </el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <!-- 标准化厂房模块 -->
            <el-col :xs="24" :sm="12" :md="8" class="mb-8">
              <el-card
                class="h-full shadow-xl hover:shadow-2xl transition-all duration-300 rounded-2xl border-0 overflow-hidden group"
              >
                <div class="relative">
                  <div
                    class="bg-gradient-to-br from-green-500 to-green-600 p-8 text-white text-center"
                  >
                    <el-icon
                      :size="64"
                      class="mb-4 group-hover:scale-110 transition-transform duration-300"
                    >
                      <Factory />
                    </el-icon>
                    <h3 class="text-2xl font-bold mb-2">标准化厂房</h3>
                  </div>
                  <div class="p-8">
                    <p class="text-gray-600 mb-6 leading-relaxed">
                      提供现代化、高标准的厂房租赁服务，满足各类企业的生产需求，优化营商环境。
                    </p>
                    <div class="space-y-3 mb-6">
                      <div class="flex items-center text-sm text-gray-600">
                        <el-icon class="mr-2 text-green-500">
                          <Check />
                        </el-icon>
                        标准化设计建造
                      </div>
                      <div class="flex items-center text-sm text-gray-600">
                        <el-icon class="mr-2 text-green-500">
                          <Check />
                        </el-icon>
                        完善配套设施
                      </div>
                      <div class="flex items-center text-sm text-gray-600">
                        <el-icon class="mr-2 text-green-500">
                          <Check />
                        </el-icon>
                        灵活租赁方案
                      </div>
                    </div>
                    <div class="space-y-3">
                      <div>
                        <el-button
                          type="success"
                          round
                          class="w-full"
                          @click="toZflbLink('factory')"
                          size="medium"
                        >
                          <el-icon class="mr-1">
                            <ArrowRight />
                          </el-icon>
                          查看厂房
                        </el-button>
                      </div>
                      <div>
                        <el-button
                          type="info"
                          round
                          class="w-full bg-gradient-to-r from-emerald-500 to-green-500 border-0 text-white hover:from-emerald-600 hover:to-green-600"
                          @click="openARDialog('factory')"
                          :disabled="factoryTypes.length === 0"
                          :loading="loadingStates.factory"
                          size="medium"
                        >
                          <el-icon class="mr-1" v-if="!loadingStates.factory">
                            <Camera />
                          </el-icon>
                          {{ loadingStates.factory ? '加载中...' : 'AR厂房参观' }}
                        </el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <!-- 创新创业基地模块 -->
            <el-col :xs="24" :sm="12" :md="8" class="mb-8">
              <el-card
                class="h-full shadow-xl hover:shadow-2xl transition-all duration-300 rounded-2xl border-0 overflow-hidden group"
              >
                <div class="relative">
                  <div
                    class="bg-gradient-to-br from-purple-500 to-purple-600 p-8 text-white text-center"
                  >
                    <el-icon
                      :size="64"
                      class="mb-4 group-hover:scale-110 transition-transform duration-300"
                    >
                      <Lightbulb />
                    </el-icon>
                    <h3 class="text-2xl font-bold mb-2">创新创业基地</h3>
                  </div>
                  <div class="p-8">
                    <p class="text-gray-600 mb-6 leading-relaxed">
                      为初创企业和创新团队提供孵化空间、政策扶持和资源对接，助力梦想起航。
                    </p>
                    <div class="space-y-3 mb-6">
                      <div class="flex items-center text-sm text-gray-600">
                        <el-icon class="mr-2 text-green-500">
                          <Check />
                        </el-icon>
                        创业孵化服务
                      </div>
                      <div class="flex items-center text-sm text-gray-600">
                        <el-icon class="mr-2 text-green-500">
                          <Check />
                        </el-icon>
                        政策扶持指导
                      </div>
                      <div class="flex items-center text-sm text-gray-600">
                        <el-icon class="mr-2 text-green-500">
                          <Check />
                        </el-icon>
                        投资对接平台
                      </div>
                    </div>
                    <div class="space-y-3">
                      <div>
                        <el-button
                          type="warning"
                          round
                          class="w-full"
                          @click="toZflbLink('innovation')"
                          size="medium"
                        >
                          <el-icon class="mr-1">
                            <ArrowRight />
                          </el-icon>
                          加入孵化
                        </el-button>
                      </div>
                      <div>
                        <el-button
                          v-if="businessModules.innovation.arEnabled && innovationTypes.length > 0"
                          type="info"
                          round
                          class="w-full bg-gradient-to-r from-purple-500 to-pink-500 border-0 text-white hover:from-purple-600 hover:to-pink-600"
                          @click="openARDialog('innovation')"
                          :loading="loadingStates.innovation"
                          size="medium"
                        >
                          <el-icon class="mr-1" v-if="!loadingStates.innovation">
                            <Camera />
                          </el-icon>
                          {{ loadingStates.innovation ? '加载中...' : 'AR空间体验' }}
                        </el-button>
                        <el-button v-else type="info" round class="w-full" size="medium" disabled>
                          <el-icon class="mr-1">
                            <Clock />
                          </el-icon>
                          {{ innovationTypes.length === 0 ? '暂无可用户型' : 'AR功能即将上线' }}
                        </el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-main>
    <!-- AR看房对话框 -->
    <el-dialog
      v-model="arDialogVisible"
      :title="arDialogTitle"
      width="600px"
      align-center
      class="ar-dialog"
    >
      <div class="text-center">
        <div class="mb-6">
          <el-icon :size="80" class="text-blue-500 mb-4">
            <Camera />
          </el-icon>
          <h3 class="text-2xl font-bold text-gray-800 mb-2">选择户型进行AR体验</h3>
          <p class="text-gray-600">沉浸式全景体验，让您身临其境</p>
        </div>

        <!-- 加载状态 -->
        <div v-if="loadingStates[currentARType]" class="py-8">
          <el-icon class="animate-spin text-4xl text-blue-500 mb-4">
            <Loader />
          </el-icon>
          <p class="text-gray-600">正在加载户型数据...</p>
        </div>

        <!-- 无数据状态 -->
        <div v-else-if="getCurrentTypeData().length === 0" class="py-8">
          <el-icon class="text-4xl text-gray-400 mb-4">
            <House />
          </el-icon>
          <p class="text-gray-600">暂无可用的户型数据</p>
        </div>

        <!-- 公租房户型选择 -->
        <div v-else-if="currentARType === 'housing'" class="space-y-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <el-card
              v-for="type in housingTypes"
              :key="type.id"
              class="cursor-pointer hover:shadow-lg transition-all duration-300 border-2 hover:border-blue-400"
              @click="startARExperience('housing', type.id)"
            >
              <div class="text-center p-4">
                <el-icon :size="48" class="text-blue-500 mb-3">
                  <component :is="getHouseTypeIcon(type)" />
                </el-icon>
                <h4 class="text-lg font-semibold mb-2">{{ type.accountNumber || '未命名户型' }}</h4>
                <p class="text-sm text-gray-600 mb-2">面积：{{ type.area || '待定' }}</p>
                <p class="text-xs text-gray-500 mb-3">地址：{{ type.address || '待定' }}</p>
                <div class="flex items-center justify-center text-sm text-gray-500">
                  <el-icon class="mr-1">
                    <Eye />
                  </el-icon>
                  <span>360°全景体验</span>
                </div>
              </div>
            </el-card>
          </div>
        </div>

        <!-- 厂房户型选择 -->
        <div v-else-if="currentARType === 'factory'" class="space-y-4">
          <el-card
            v-for="type in factoryTypes"
            :key="type.id"
            class="cursor-pointer hover:shadow-lg transition-all duration-300 border-2 hover:border-green-400"
            @click="startARExperience('factory', type.id)"
          >
            <div class="text-center p-6">
              <el-icon :size="64" class="text-green-500 mb-4">
                <Factory />
              </el-icon>
              <h4 class="text-xl font-semibold mb-3">{{ type.accountNumber || '标准化厂房' }}</h4>
              <p class="text-gray-600 mb-2">面积：{{ type.area || '待定' }}</p>
              <p class="text-sm text-gray-500 mb-4">地址：{{ type.address || '待定' }}</p>
              <div class="grid grid-cols-2 gap-4 text-sm text-gray-600 mb-4">
                <div class="flex items-center">
                  <el-icon class="mr-2 text-green-500">
                    <Check />
                  </el-icon>
                  <span>完善电力配套</span>
                </div>
                <div class="flex items-center">
                  <el-icon class="mr-2 text-green-500">
                    <Check />
                  </el-icon>
                  <span>货运通道便利</span>
                </div>
                <div class="flex items-center">
                  <el-icon class="mr-2 text-green-500">
                    <Check />
                  </el-icon>
                  <span>消防设施齐全</span>
                </div>
                <div class="flex items-center">
                  <el-icon class="mr-2 text-green-500">
                    <Check />
                  </el-icon>
                  <span>环保标准达标</span>
                </div>
              </div>
              <div class="flex items-center justify-center text-sm text-gray-500">
                <el-icon class="mr-1">
                  <Eye />
                </el-icon>
                <span>沉浸式厂房体验</span>
              </div>
            </div>
          </el-card>
        </div>

        <!-- 创新创业基地户型选择 -->
        <div v-else-if="currentARType === 'innovation'" class="space-y-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <el-card
              v-for="type in innovationTypes"
              :key="type.id"
              class="cursor-pointer hover:shadow-lg transition-all duration-300 border-2 hover:border-purple-400"
              @click="startARExperience('innovation', type.id)"
            >
              <div class="text-center p-4">
                <el-icon :size="48" class="text-purple-500 mb-3">
                  <component :is="getHouseTypeIcon(type)" />
                </el-icon>
                <h4 class="text-lg font-semibold mb-2">{{ type.accountNumber || '创新空间' }}</h4>
                <p class="text-sm text-gray-600 mb-2">面积：{{ type.area || '待定' }}</p>
                <p class="text-xs text-gray-500 mb-3">地址：{{ type.address || '待定' }}</p>
                <div class="grid grid-cols-1 gap-2 text-xs text-gray-600 mb-3">
                  <div class="flex items-center">
                    <el-icon class="mr-1 text-purple-500">
                      <Check />
                    </el-icon>
                    <span>创新孵化环境</span>
                  </div>
                  <div class="flex items-center">
                    <el-icon class="mr-1 text-purple-500">
                      <Check />
                    </el-icon>
                    <span>政策扶持服务</span>
                  </div>
                </div>
                <div class="flex items-center justify-center text-sm text-gray-500">
                  <el-icon class="mr-1">
                    <Eye />
                  </el-icon>
                  <span>360°创业环境体验</span>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="text-center">
          <el-button @click="arDialogVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </el-container>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import {
  ElButton,
  ElCard,
  ElCol,
  ElContainer,
  ElDialog,
  ElIcon,
  ElMain,
  ElMessage,
  ElRow,
} from 'element-plus'
import {
  ArrowRight,
  Building,
  Building2,
  Camera,
  Check,
  Clock,
  Eye,
  Factory,
  Home,
  House,
  Lightbulb,
  Loader,
} from 'lucide-vue-next'
import { useRouter } from 'vue-router'
import { clientGet } from '@/utils/request.ts'

interface HouseType {
  id: string
  accountNumber?: string //户型名字
  address?: string //地址
  area?: string //面积
  roomType?: number // 户型类型：1-公租房，2-厂房，3-创新创业基地
}

interface HouseTypeReponse extends BaseResponse {
  data: HouseType[]
}

const router = useRouter()

// AR对话框相关状态
const arDialogVisible = ref(false)
const arDialogTitle = ref('')
const currentARType = ref<'housing' | 'factory' | 'innovation'>('housing')

// 加载状态
const loadingStates = ref({
  housing: false,
  factory: false,
  innovation: false,
})

// 业务模块配置
const businessModules = ref({
  housing: {
    enabled: true,
    arEnabled: true,
  },
  factory: {
    enabled: true,
    arEnabled: true,
  },
  innovation: {
    enabled: true,
    arEnabled: true,
  },
})

// 户型数据 - 改为从接口获取
const housingTypes = ref<HouseType[]>([])
const factoryTypes = ref<HouseType[]>([])
const innovationTypes = ref<HouseType[]>([])

// 获取户型数据
const getHouseType = async (roomType: number) => {
  const typeMap = {
    1: 'housing',
    2: 'factory',
    3: 'innovation',
  } as const

  const currentType = typeMap[roomType as keyof typeof typeMap]
  if (!currentType) return

  loadingStates.value[currentType] = true

  try {
    const res = await clientGet<
      {
        roomType: number
      },
      HouseTypeReponse
    >('/houseType/getByRoomType', {
      params: {
        roomType,
      },
    })

    if (res.code !== 200) {
      ElMessage.error(res.msg || '获取户型数据失败')
      return
    }

    // 根据类型存储数据
    switch (roomType) {
      case 1:
        housingTypes.value = res.data || []
        break
      case 2:
        factoryTypes.value = res.data || []
        break
      case 3:
        innovationTypes.value = res.data || []
        break
    }

    // console.log(`${currentType} 户型数据:`, res.data)
  } catch (error) {
    console.error(`获取${currentType}户型数据失败:`, error)
    ElMessage.error('网络请求失败，请稍后重试')
  } finally {
    loadingStates.value[currentType] = false
  }
}

// 获取当前类型的数据
const getCurrentTypeData = () => {
  switch (currentARType.value) {
    case 'housing':
      return housingTypes.value
    case 'factory':
      return factoryTypes.value
    case 'innovation':
      return innovationTypes.value
    default:
      return []
  }
}

// 根据户型获取图标
const getHouseTypeIcon = (type: HouseType) => {
  // 可以根据户型名称或其他字段来判断图标
  if (type.accountNumber?.includes('一室') || type.accountNumber?.includes('单间')) {
    return Home
  }
  if (type.accountNumber?.includes('两室') || type.accountNumber?.includes('多室')) {
    return Building2
  }
  if (type.roomType === 2) {
    return Factory
  }
  if (type.roomType === 3) {
    return Lightbulb
  }
  return Building
}

const toZflbLink = (currentActive: string) => {
  router.push({
    path: '/zf/zflb',
    query: {
      currentActive,
    },
  })
}

// 打开AR对话框
const openARDialog = (type: 'housing' | 'factory' | 'innovation') => {
  currentARType.value = type
  const titles = {
    housing: 'AR看房体验',
    factory: 'AR厂房参观',
    innovation: 'AR创新空间体验',
  }
  arDialogTitle.value = titles[type]
  arDialogVisible.value = true
}

// 开始AR体验
const startARExperience = (type: 'housing' | 'factory' | 'innovation', houseId: string) => {
  // const selectedHouse = getCurrentTypeData().find(house => house.id === houseId)

  // console.log(`开始AR体验: ${type} - ${houseId}`, selectedHouse)

  router.push({
    path: '/ar/preview',
    query: {
      houseTypeId: houseId,
      isTourist: 1,
    },
  })

  arDialogVisible.value = false
}

// 组件挂载时获取所有户型数据
onMounted(async () => {
  // 并发获取所有类型的户型数据
  await Promise.all([
    getHouseType(1), // 公租房
    getHouseType(2), // 厂房
    getHouseType(3), // 创新创业基地
  ])
})
</script>

<style scoped>
/* 自定义样式覆盖 */
.el-card {
  border: none;
}

.el-button {
  font-weight: 600;
}

/* AR对话框样式 */
.ar-dialog .el-dialog__body {
  padding: 30px;
}

/* 渐变背景动画 */
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 卡片悬停效果增强 */
.el-card:hover {
  transform: translateY(-2px);
}

/* 按钮渐变效果 */
.el-button[type='info'] {
  transition: all 0.3s ease;
}

.el-button[type='info']:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 加载动画 */
.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>