# 楼层选择组件 (FloorSelector)

## 功能描述

楼层选择组件是一个三层级联选择器，用于选择楼层、区域和单元。组件会根据接口返回的树形数据自动渲染选择项。

## 接口数据格式

组件期望的接口返回格式：

```json
{
  "msg": "操作成功",
  "code": 200,
  "data": [
    {
      "id": "12",
      "label": "寒山寺",
      "type": 1,
      "children": [
        {
          "id": "1",
          "label": "1F",
          "type": 2,
          "children": [
            {
              "id": "23",
              "label": "A区",
              "type": 3,
              "children": [
                {
                  "id": "16",
                  "label": "A01",
                  "type": 4,
                  "children": null
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}
```

## 组件属性 (Props)

| 属性名         | 类型   | 默认值 | 说明             |
| -------------- | ------ | ------ | ---------------- |
| defaultFloorId | String | ''     | 默认选中的楼层ID |
| defaultAreaId  | String | ''     | 默认选中的区域ID |
| defaultUnitId  | String | ''     | 默认选中的单元ID |

## 事件 (Events)

| 事件名           | 参数                  | 说明               |
| ---------------- | --------------------- | ------------------ |
| selection-change | { floor, area, unit } | 选择发生变化时触发 |

## 方法 (Methods)

| 方法名              | 参数 | 返回值 | 说明               |
| ------------------- | ---- | ------ | ------------------ |
| getCurrentSelection | -    | Object | 获取当前选中信息   |
| resetSelection      | -    | -      | 重置选择到默认状态 |

## 使用示例

### 基础使用

```vue
<template>
  <FloorSelector @selection-change="handleSelectionChange" />
</template>

<script>
  import FloorSelector from './compositons/floorSelector.vue'

  export default {
    components: {
      FloorSelector,
    },
    methods: {
      handleSelectionChange(selection) {
        console.log('选择变化:', selection)
        // selection 包含 { floor, area, unit }
      },
    },
  }
</script>
```

### 设置默认选中项

```vue
<template>
  <FloorSelector
    :default-floor-id="'1'"
    :default-area-id="'23'"
    :default-unit-id="'16'"
    @selection-change="handleSelectionChange"
  />
</template>
```

### 获取当前选择

```vue
<template>
  <FloorSelector ref="floorSelector" />
  <button @click="getSelection">获取选择</button>
</template>

<script>
  export default {
    methods: {
      getSelection() {
        const selection = this.$refs.floorSelector.getCurrentSelection()
        console.log('当前选择:', selection)
      },
    },
  }
</script>
```

## 样式定制

组件使用了以下主要颜色：

- 背景色: `#FFFBF5`
- 边框色: `#C7A26D`
- 未选中按钮: `#F5E6D3`
- 选中按钮: `#8B4513`
- 文字颜色: `#695347`

可以通过修改组件的样式来调整外观。

## 注意事项

1. 组件会自动调用 `/app/memorial/listTree` 接口获取数据
2. 选择楼层时会自动选中第一个区域
3. 选择区域时会自动选中第一个单元
4. 如果接口返回空数据，会显示空状态
5. 网络异常时会显示错误提示