<template>
  <div class="space-scene-container">
    <!-- 左侧导航树 -->
    <el-card class="tree-card">
      <h3>空间层级</h3>
      <el-tree
          :data="spaceTree"
          node-key="id"
          default-expand-all
          highlight-current
          @node-click="handleNodeClick"
      >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span>{{ node.label }}</span>
            <el-tag v-if="data.type === 'building'" size="small" type="primary">楼栋</el-tag>
            <el-tag v-if="data.type === 'floor'" size="small" type="success">楼层</el-tag>
            <el-tag v-if="data.type === 'room'" size="small" type="info">房间</el-tag>
          </span>
        </template>
      </el-tree>
    </el-card>

    <!-- 右侧场景展示 -->
    <el-card class="scene-card">
      <h3>场景图</h3>
      <div class="scene-view">
        <img v-if="currentScene.image" :src="currentScene.image" alt="场景图" class="scene-image" />
        <p v-else>请选择一个空间层级以查看场景图。</p>
      </div>
      <div class="config-info" v-if="currentScene.config">
        <h4>组态配置</h4>
        <pre>{{ currentScene.config }}</pre>
        <el-button type="primary" @click="editConfig">编辑配置</el-button>
      </div>
    </el-card>

    <!-- 组态编辑对话框 -->
    <el-dialog v-model="dialogVisible" title="编辑组态配置" width="50%">
      <el-form :model="configForm" label-width="120px">
        <el-form-item label="设备列表">
          <el-input v-model="configForm.devices" placeholder="逗号分隔的设备列表" />
        </el-form-item>
        <el-form-item label="布局">
          <el-select v-model="configForm.layout" placeholder="选择布局">
            <el-option label="网格" value="grid" />
            <el-option label="列表" value="list" />
            <el-option label="自定义" value="custom" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveConfig">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// 模拟空间层级数据
const spaceTree = ref([
  {
    id: 'b1',
    label: 'A栋',
    type: 'building',
    children: [
      {
        id: 'f1',
        label: '1楼',
        type: 'floor',
        children: [
          { id: 'r1', label: '101室', type: 'room' },
          { id: 'r2', label: '102室', type: 'room' }
        ]
      },
      {
        id: 'f2',
        label: '2楼',
        type: 'floor',
        children: [
          { id: 'r3', label: '201室', type: 'room' },
          { id: 'r4', label: '202室', type: 'room' }
        ]
      }
    ]
  },
  {
    id: 'b2',
    label: 'B栋',
    type: 'building',
    children: [
      {
        id: 'f3',
        label: '1楼',
        type: 'floor',
        children: [
          { id: 'r5', label: '101室', type: 'room' },
          { id: 'r6', label: '102室', type: 'room' }
        ]
      }
    ]
  }
])

// 当前选中的场景
const currentScene = ref({
  image: '',
  config: null
})

// 场景图片和组态配置映射（模拟数据）
const sceneMap = {
  'r1': {
    image: 'https://dummyimage.com/600x400/007bff/ffffff&text=Room+101 ',
    config: { devices: ['light1', 'sensor1'], layout: 'grid' }
  },
  'r2': {
    image: 'https://dummyimage.com/600x400/28a745/ffffff&text=Room+102 ',
    config: { devices: ['camera1', 'sensor2'], layout: 'list' }
  },
  'r3': {
    image: 'https://dummyimage.com/600x400/ffc107/ffffff&text=Room+201 ',
    config: { devices: ['ac1', 'sensor3'], layout: 'custom' }
  },
  'r4': {
    image: 'https://dummyimage.com/600x400/fc3549/ffffff&text=Room+202 ',
    config: { devices: ['light2', 'sensor4'], layout: 'grid' }
  },
  'r5': {
    image: 'https://dummyimage.com/600x400/17a2b8/ffffff&text=Room+101+B ',
    config: { devices: ['light3', 'sensor5'], layout: 'list' }
  },
  'r6': {
    image: 'https://dummyimage.com/600x400/20c997/ffffff&text=Room+102+B ',
    config: { devices: ['camera2', 'sensor6'], layout: 'custom' }
  }
}

// 组态编辑对话框显示控制
const dialogVisible = ref(false)

// 当前编辑的配置
const configForm = ref({
  devices: '',
  layout: ''
})

// 处理树节点点击事件
const handleNodeClick = (data) => {
  if (data.type === 'room') {
    // 加载对应房间的场景图和组态配置
    const sceneData = sceneMap[data.id]
    if (sceneData) {
      currentScene.value = sceneData
      configForm.value.devices = sceneData.config.devices.join(', ')
      configForm.value.layout = sceneData.config.layout
    } else {
      currentScene.value = { image: '', config: null }
    }
  } else {
    // 如果是楼栋或楼层，清空场景图
    currentScene.value = { image: '', config: null }
  }
}

// 编辑配置
const editConfig = () => {
  if (currentScene.value.config) {
    dialogVisible.value = true
  } else {
    ElMessage.warning('请先选择一个房间以编辑配置')
  }
}

// 保存配置
const saveConfig = () => {
  if (currentScene.value.config) {
    currentScene.value.config.devices = configForm.value.devices.split(',').map(device => device.trim())
    currentScene.value.config.layout = configForm.value.layout
    ElMessage.success('配置保存成功')
    dialogVisible.value = false
  }
}
</script>

<style scoped lang="scss">
.space-scene-container {
  display: flex;
  height: 100vh;
  padding: 20px;

  .tree-card {
    width: 300px;
    margin-right: 20px;

    h3 {
      margin-bottom: 10px;
      font-size: 18px;
      color: #333;
    }

    .custom-tree-node {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }
  }

  .scene-card {
    flex: 1;

    h3 {
      margin-bottom: 10px;
      font-size: 18px;
      color: #333;
    }

    .scene-view {
      text-align: center;
      margin-bottom: 20px;

      .scene-image {
        max-width: 100%;
        max-height: 400px;
        border: 1px solid #ddd;
        border-radius: 5px;
      }
    }

    .config-info {
      pre {
        background-color: #f5f5f5;
        padding: 10px;
        border-radius: 5px;
        font-size: 14px;
        overflow-x: auto;
      }

      .el-button {
        margin-top: 10px;
      }
    }
  }
}
</style>
