<template>
  <div class="app-container">
    <el-card class="main-card">
      <!-- 楼层切换按钮 -->
      <div class="floor-switcher">
        <el-button :type="currentFloor === 1 ? 'primary' : ''" class="floor-btn" size="large" @click="switchFloor(1)">
          <i class="el-icon-office-building"/>
          一楼
        </el-button>
        <el-button :type="currentFloor === 2 ? 'primary' : ''" class="floor-btn" size="large" @click="switchFloor(2)">
          <i class="el-icon-office-building"/>
          二楼
        </el-button>
        <el-button :type="currentFloor === 3 ? 'primary' : ''" class="floor-btn" size="large" @click="switchFloor(3)">
          <i class="el-icon-office-building"/>
          三楼
        </el-button>
      </div>

      <!-- 一楼 -->
      <div v-show="currentFloor === 1" class="floor">
        <!-- 一楼控制按钮 -->
        <div class="floor-controls">
          <el-button
            :loading="loadingAll"
            type="success"
            class="control-btn"
            size="large"
            @click="confirmToggleAllLights(1, true)">
            <i class="el-icon-open"/>
            全部开启
          </el-button>
          <el-button
            :loading="loadingAll"
            type="danger"
            class="control-btn"
            size="large"
            @click="confirmToggleAllLights(1, false)">
            <i class="el-icon-turn-off"/>
            全部关闭
          </el-button>
          <div class="floor-stats">
            <span class="stat-item">开启: {{ getFloorStats(1).on }}</span>
            <span class="stat-item">关闭: {{ getFloorStats(1).off }}</span>
            <span class="stat-item">总数: {{ getFloorStats(1).total }}</span>
          </div>
        </div>
        <div class="floor-content">
          <!-- 左侧区域 -->
          <div class="area-group left-group">
            <div class="area-column group1">
              <div class="light-area" @click="toggleLight('Tag_JY_Control_Light_177_1')">
                <div :class="{ on: getLightStatus('Tag_JY_Control_Light_177_1') }" class="light-indicator">
                  <div v-if="getLightStatus('Tag_JY_Control_Light_177_1')" class="light-glow"/>
                </div>
                <span class="area-label">1F_177_1</span>
              </div>
              <div class="light-area" @click="toggleLight('Tag_JY_Control_Light_177_2')">
                <div :class="{ on: getLightStatus('Tag_JY_Control_Light_177_2') }" class="light-indicator">
                  <div v-if="getLightStatus('Tag_JY_Control_Light_177_2')" class="light-glow"/>
                </div>
                <span class="area-label">1F_177_2</span>
              </div>
            </div>
            <div class="area-column group2">
              <div class="light-area" @click="toggleLight('Tag_JY_Control_Light_172_4')">
                <div :class="{ on: getLightStatus('Tag_JY_Control_Light_172_4') }" class="light-indicator">
                  <div v-if="getLightStatus('Tag_JY_Control_Light_172_4')" class="light-glow"/>
                </div>
                <span class="area-label">1F_172_4</span>
              </div>
              <div class="light-area" @click="toggleLight('Tag_JY_Control_Light_172_3')">
                <div :class="{ on: getLightStatus('Tag_JY_Control_Light_172_3') }" class="light-indicator">
                  <div v-if="getLightStatus('Tag_JY_Control_Light_172_3')" class="light-glow"/>
                </div>
                <span class="area-label">1F_172_3</span>
              </div>
              <div class="light-area" @click="toggleLight('Tag_JY_Control_Light_172_2')">
                <div :class="{ on: getLightStatus('Tag_JY_Control_Light_172_2') }" class="light-indicator">
                  <div v-if="getLightStatus('Tag_JY_Control_Light_172_2')" class="light-glow"/>
                </div>
                <span class="area-label">1F_172_2</span>
              </div>
              <div class="light-area" @click="toggleLight('Tag_JY_Control_Light_172_1')">
                <div :class="{ on: getLightStatus('Tag_JY_Control_Light_172_1') }" class="light-indicator">
                  <div v-if="getLightStatus('Tag_JY_Control_Light_172_1')" class="light-glow"/>
                </div>
                <span class="area-label">1F_172_1</span>
              </div>
            </div>
          </div>

          <!-- 中间区域 -->
          <div class="area-group center-group">
            <div v-for="(rowNum, rowIndex) in [176, 175, 174, 173, 171]" :key="rowIndex" class="area-row">
              <div
                v-for="(areaNum, areaIndex) in [4, 3, 2, 1]"
                :key="areaIndex"
                class="light-area"
                @click="toggleLight('Tag_JY_Control_Light_' + rowNum + '_' + areaNum)">
                <div
                  :class="{ on: getLightStatus('Tag_JY_Control_Light_' + rowNum + '_' + areaNum) }"
                  class="light-indicator">
                  <div v-if="getLightStatus('Tag_JY_Control_Light_' + rowNum + '_' + areaNum)" class="light-glow"/>
                </div>
                <span class="area-label">1F_{{ rowNum }}_{{ areaNum }}</span>
              </div>
            </div>
          </div>

          <!-- 右侧区域 -->
          <div class="area-group right-group">
            <div class="area-column">
              <div
                v-for="(areaNum, index) in [4, 3, 2, 1]"
                :key="index"
                class="light-area"
                @click="toggleLight('Tag_JY_Control_Light_170_' + areaNum)">
                <div :class="{ on: getLightStatus('Tag_JY_Control_Light_170_' + areaNum) }" class="light-indicator">
                  <div v-if="getLightStatus('Tag_JY_Control_Light_170_' + areaNum)" class="light-glow"/>
                </div>
                <span class="area-label">1F_170_{{ areaNum }}</span>
              </div>
            </div>
          </div>

          <div class="north-gate-label">
            <div class="north-arrow">↑</div>
            <div class="north-text">北大门</div>
          </div>
        </div>
      </div>

      <!-- 二楼 -->
      <div v-show="currentFloor === 2" class="floor">
        <!-- 二楼控制按钮 -->
        <div class="floor-controls">
          <el-button
            :loading="loadingAll"
            type="success"
            class="control-btn"
            size="large"
            @click="confirmToggleAllLights(2, true)">
            <i class="el-icon-open"/>
            全部开启
          </el-button>
          <el-button
            :loading="loadingAll"
            type="danger"
            class="control-btn"
            size="large"
            @click="confirmToggleAllLights(2, false)">
            <i class="el-icon-turn-off"/>
            全部关闭
          </el-button>
          <div class="floor-stats">
            <span class="stat-item">开启: {{ getFloorStats(2).on }}</span>
            <span class="stat-item">关闭: {{ getFloorStats(2).off }}</span>
            <span class="stat-item">总数: {{ getFloorStats(2).total }}</span>
          </div>
        </div>
        <div class="floor-content second-floor-content">
          <!-- 二楼区域布局 -->
          <div class="area-group second-floor-group">
            <!-- 上方区域 - 铺满一行 -->
            <div class="top-area">
              <div
                v-for="light in 4"
                :key="light"
                class="light-area"
                @click="toggleLight('Tag_JY_Control_Light_185_' + light)">
                <div :class="{ on: getLightStatus('Tag_JY_Control_Light_185_' + light) }" class="light-indicator">
                  <div v-if="getLightStatus('Tag_JY_Control_Light_185_' + light)" class="light-glow"/>
                </div>
                <span class="area-label">2F_185_{{ light }}</span>
              </div>
            </div>

            <!-- 中间区域 -->
            <div class="middle-area">
              <!-- 中间左侧四分之一 -->
              <div class="middle-left">
                <div class="room-label">立库</div>
                <div class="light-area" @click="toggleLight('Tag_JY_Control_Light_183_4')">
                  <div :class="{ on: getLightStatus('Tag_JY_Control_Light_183_4') }" class="light-indicator">
                    <div v-if="getLightStatus('Tag_JY_Control_Light_183_4')" class="light-glow"/>
                  </div>
                  <span class="area-label">2F_183_4</span>
                </div>
                <div class="light-area" @click="toggleLight('Tag_JY_Control_Light_183_1')">
                  <div :class="{ on: getLightStatus('Tag_JY_Control_Light_183_1') }" class="light-indicator">
                    <div v-if="getLightStatus('Tag_JY_Control_Light_183_1')" class="light-glow"/>
                  </div>
                  <span class="area-label">2F_183_1</span>
                </div>
                <div class="light-area" @click="toggleLight('Tag_JY_Control_Light_183_3')">
                  <div :class="{ on: getLightStatus('Tag_JY_Control_Light_183_3') }" class="light-indicator">
                    <div v-if="getLightStatus('Tag_JY_Control_Light_183_3')" class="light-glow"/>
                  </div>
                  <span class="area-label">2F_183_3</span>
                </div>
                <div class="light-area" @click="toggleLight('Tag_JY_Control_Light_183_2')">
                  <div :class="{ on: getLightStatus('Tag_JY_Control_Light_183_2') }" class="light-indicator">
                    <div v-if="getLightStatus('Tag_JY_Control_Light_183_2')" class="light-glow"/>
                  </div>
                  <span class="area-label">2F_183_2</span>
                </div>
              </div>

              <!-- 中间右侧四分之三 -->
              <div class="middle-right">
                <div class="light-row">
                  <div
                    v-for="light in 4"
                    :key="light"
                    class="light-area"
                    @click="toggleLight('Tag_JY_Control_Light_184_' + light)">
                    <div :class="{ on: getLightStatus('Tag_JY_Control_Light_184_' + light) }" class="light-indicator">
                      <div v-if="getLightStatus('Tag_JY_Control_Light_184_' + light)" class="light-glow"/>
                    </div>
                    <span class="area-label">2F_184_{{ light }}</span>
                  </div>
                </div>
                <div class="light-row">
                  <div
                    v-for="light in 4"
                    :key="light"
                    class="light-area"
                    @click="toggleLight('Tag_JY_Control_Light_181_' + light)">
                    <div :class="{ on: getLightStatus('Tag_JY_Control_Light_181_' + light) }" class="light-indicator">
                      <div v-if="getLightStatus('Tag_JY_Control_Light_181_' + light)" class="light-glow"/>
                    </div>
                    <span class="area-label">2F_181_{{ light }}</span>
                  </div>
                </div>
              </div>

              <div class="middle-area1">
                <div class="light-area" @click="toggleLight('Tag_JY_Control_Light_180_2')">
                  <div :class="{ on: getLightStatus('Tag_JY_Control_Light_180_2') }" class="light-indicator">
                    <div v-if="getLightStatus('Tag_JY_Control_Light_180_2')" class="light-glow"/>
                  </div>
                  <span class="area-label">2F_180_2</span>
                </div>
                <div class="light-area" @click="toggleLight('Tag_JY_Control_Light_180_1')">
                  <div :class="{ on: getLightStatus('Tag_JY_Control_Light_180_1') }" class="light-indicator">
                    <div v-if="getLightStatus('Tag_JY_Control_Light_180_1')" class="light-glow"/>
                  </div>
                  <span class="area-label">2F_180_1</span>
                </div>
              </div>
              <div class="middle-area2">
                <div class="light-area" @click="toggleLight('Tag_JY_Control_Light_180_3')">
                  <div :class="{ on: getLightStatus('Tag_JY_Control_Light_180_3') }" class="light-indicator">
                    <div v-if="getLightStatus('Tag_JY_Control_Light_180_3')" class="light-glow"/>
                  </div>
                  <span class="area-label">2F_180_3</span>
                </div>
                <div class="light-area" @click="toggleLight('Tag_JY_Control_Light_180_4')">
                  <div :class="{ on: getLightStatus('Tag_JY_Control_Light_180_4') }" class="light-indicator">
                    <div v-if="getLightStatus('Tag_JY_Control_Light_180_4')" class="light-glow"/>
                  </div>
                  <span class="area-label">2F_180_4</span>
                </div>
              </div>
            </div>

            <!-- 下方区域 -->
            <div class="bottom-area">
              <!-- 第一行 182 -->
              <div class="light-row">
                <div
                  v-for="light in 4"
                  :key="'182-' + light"
                  class="light-area"
                  @click="toggleLight('Tag_JY_Control_Light_182_' + light)">
                  <div :class="{ on: getLightStatus('Tag_JY_Control_Light_182_' + light) }" class="light-indicator">
                    <div v-if="getLightStatus('Tag_JY_Control_Light_182_' + light)" class="light-glow"/>
                  </div>
                  <span class="area-label">2F_182_{{ light }}</span>
                </div>
              </div>
              <!-- 第二行 186 -->
              <div class="light-row">
                <div
                  v-for="light in [4, 3, 2, 1]"
                  :key="'186-' + light"
                  class="light-area"
                  @click="toggleLight('Tag_JY_Control_Light_186_' + light)">
                  <div :class="{ on: getLightStatus('Tag_JY_Control_Light_186_' + light) }" class="light-indicator">
                    <div v-if="getLightStatus('Tag_JY_Control_Light_186_' + light)" class="light-glow"/>
                  </div>
                  <span class="area-label">2F_186_{{ light }}</span>
                </div>
              </div>
            </div>

            <div class="north-gate-label">
              <div class="north-arrow">↑</div>
              <div class="north-text">北大门</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 三楼 -->
      <div v-show="currentFloor === 3" class="floor">
        <!-- 三楼控制按钮 -->
        <div class="floor-controls">
          <el-button
            :loading="loadingAll"
            type="success"
            class="control-btn"
            size="large"
            @click="confirmToggleAllLights(3, true)">
            <i class="el-icon-open"/>
            全部开启
          </el-button>
          <el-button
            :loading="loadingAll"
            type="danger"
            class="control-btn"
            size="large"
            @click="confirmToggleAllLights(3, false)">
            <i class="el-icon-turn-off"/>
            全部关闭
          </el-button>
          <div class="floor-stats">
            <span class="stat-item">开启: {{ getFloorStats(3).on }}</span>
            <span class="stat-item">关闭: {{ getFloorStats(3).off }}</span>
            <span class="stat-item">总数: {{ getFloorStats(3).total }}</span>
          </div>
        </div>
        <div class="floor-content third-floor-content">
          <!-- 三楼区域布局 -->
          <div class="area-group third-floor-group">
            <!-- 左侧三分之二区域 -->
            <div class="third-left">
              <!-- 第一行 -->
              <div class="third-row1">
                <div class="third-subrow">
                  <div
                    v-for="light in [4, 3]"
                    :key="light"
                    class="light-area"
                    @click="toggleLight('Tag_JY_Control_Light_191_' + light)">
                    <div :class="{ on: getLightStatus('Tag_JY_Control_Light_191_' + light) }" class="light-indicator">
                      <div v-if="getLightStatus('Tag_JY_Control_Light_191_' + light)" class="light-glow"/>
                    </div>
                    <span class="area-label">3F_191_{{ light }}</span>
                  </div>
                </div>
                <div class="third-subrow">
                  <div
                    v-for="light in [2, 1]"
                    :key="light"
                    class="light-area"
                    @click="toggleLight('Tag_JY_Control_Light_191_' + light)">
                    <div :class="{ on: getLightStatus('Tag_JY_Control_Light_191_' + light) }" class="light-indicator">
                      <div v-if="getLightStatus('Tag_JY_Control_Light_191_' + light)" class="light-glow"/>
                    </div>
                    <span class="area-label">3F_191_{{ light }}</span>
                  </div>
                </div>
              </div>

              <!-- 第二行 -->
              <div class="third-row2">
                <!-- 左侧 -->
                <div class="third-left-col">
                  <!-- 上半部分 -->
                  <div class="third-top">
                    <div class="room-label">喷漆房1</div>
                    <div
                      v-for="light in [1, 2, 3]"
                      :key="light"
                      class="light-area"
                      @click="toggleLight('Tag_JY_Control_Light_192_' + light)">
                      <div :class="{ on: getLightStatus('Tag_JY_Control_Light_192_' + light) }" class="light-indicator">
                        <div v-if="getLightStatus('Tag_JY_Control_Light_192_' + light)" class="light-glow"/>
                      </div>
                      <span class="area-label">3F_192_{{ light }}</span>
                    </div>
                  </div>
                  <!-- 下半部分 -->
                  <div class="third-bottom">
                    <div class="room-label">喷漆房2</div>
                    <div
                      v-for="light in [3, 2, 1]"
                      :key="light"
                      class="light-area"
                      @click="toggleLight('Tag_JY_Control_Light_193_' + light)">
                      <div :class="{ on: getLightStatus('Tag_JY_Control_Light_193_' + light) }" class="light-indicator">
                        <div v-if="getLightStatus('Tag_JY_Control_Light_193_' + light)" class="light-glow"/>
                      </div>
                      <span class="area-label">3F_193_{{ light }}</span>
                    </div>
                  </div>
                </div>

                <!-- 右侧 -->
                <div class="third-right-col">
                  <div class="third-subrow">
                    <div
                      v-for="light in [4, 3]"
                      :key="light"
                      class="light-area"
                      @click="toggleLight('Tag_JY_Control_Light_190_' + light)">
                      <div :class="{ on: getLightStatus('Tag_JY_Control_Light_190_' + light) }" class="light-indicator">
                        <div v-if="getLightStatus('Tag_JY_Control_Light_190_' + light)" class="light-glow"/>
                      </div>
                      <span class="area-label">3F_190_{{ light }}</span>
                    </div>
                  </div>
                  <div class="third-subrow">
                    <div
                      v-for="light in [2, 1]"
                      :key="light"
                      class="light-area"
                      @click="toggleLight('Tag_JY_Control_Light_190_' + light)">
                      <div :class="{ on: getLightStatus('Tag_JY_Control_Light_190_' + light) }" class="light-indicator">
                        <div v-if="getLightStatus('Tag_JY_Control_Light_190_' + light)" class="light-glow"/>
                      </div>
                      <span class="area-label">3F_190_{{ light }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="north-gate-label">
              <div class="north-arrow">↑</div>
              <div class="north-text">北大门</div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      currentFloor: 1, // 默认显示一楼
      loadingAll: false,
      pollTimer: null, // 轮询定时器
      pollInterval: 3000, // 轮询间隔5秒
      // 所有灯光ID列表
      allLightIds: [
        // 一楼灯光
        'Tag_JY_Control_Light_177_1', 'Tag_JY_Control_Light_177_2',
        'Tag_JY_Control_Light_172_4', 'Tag_JY_Control_Light_172_3', 'Tag_JY_Control_Light_172_2', 'Tag_JY_Control_Light_172_1',
        'Tag_JY_Control_Light_176_4', 'Tag_JY_Control_Light_176_3', 'Tag_JY_Control_Light_176_2', 'Tag_JY_Control_Light_176_1',
        'Tag_JY_Control_Light_175_4', 'Tag_JY_Control_Light_175_3', 'Tag_JY_Control_Light_175_2', 'Tag_JY_Control_Light_175_1',
        'Tag_JY_Control_Light_174_4', 'Tag_JY_Control_Light_174_3', 'Tag_JY_Control_Light_174_2', 'Tag_JY_Control_Light_174_1',
        'Tag_JY_Control_Light_173_4', 'Tag_JY_Control_Light_173_3', 'Tag_JY_Control_Light_173_2', 'Tag_JY_Control_Light_173_1',
        'Tag_JY_Control_Light_171_4', 'Tag_JY_Control_Light_171_3', 'Tag_JY_Control_Light_171_2', 'Tag_JY_Control_Light_171_1',
        'Tag_JY_Control_Light_170_4', 'Tag_JY_Control_Light_170_3', 'Tag_JY_Control_Light_170_2', 'Tag_JY_Control_Light_170_1',

        // 二楼灯光
        'Tag_JY_Control_Light_185_1', 'Tag_JY_Control_Light_185_2', 'Tag_JY_Control_Light_185_3', 'Tag_JY_Control_Light_185_4',
        'Tag_JY_Control_Light_183_4', 'Tag_JY_Control_Light_183_1', 'Tag_JY_Control_Light_183_3', 'Tag_JY_Control_Light_183_2',
        'Tag_JY_Control_Light_184_1', 'Tag_JY_Control_Light_184_2', 'Tag_JY_Control_Light_184_3', 'Tag_JY_Control_Light_184_4',
        'Tag_JY_Control_Light_181_1', 'Tag_JY_Control_Light_181_2', 'Tag_JY_Control_Light_181_3', 'Tag_JY_Control_Light_181_4',
        'Tag_JY_Control_Light_180_2', 'Tag_JY_Control_Light_180_1', 'Tag_JY_Control_Light_180_3', 'Tag_JY_Control_Light_180_4',
        'Tag_JY_Control_Light_182_1', 'Tag_JY_Control_Light_182_2', 'Tag_JY_Control_Light_182_3', 'Tag_JY_Control_Light_182_4',
        'Tag_JY_Control_Light_186_4', 'Tag_JY_Control_Light_186_3', 'Tag_JY_Control_Light_186_2', 'Tag_JY_Control_Light_186_1',

        // 三楼灯光
        'Tag_JY_Control_Light_191_4', 'Tag_JY_Control_Light_191_3', 'Tag_JY_Control_Light_191_2', 'Tag_JY_Control_Light_191_1',
        'Tag_JY_Control_Light_192_1', 'Tag_JY_Control_Light_192_2', 'Tag_JY_Control_Light_192_3',
        'Tag_JY_Control_Light_193_3', 'Tag_JY_Control_Light_193_2', 'Tag_JY_Control_Light_193_1',
        'Tag_JY_Control_Light_190_4', 'Tag_JY_Control_Light_190_3', 'Tag_JY_Control_Light_190_2', 'Tag_JY_Control_Light_190_1'
      ],
      // 灯光状态数据
      lightsStatus: {},
      userRole: null // 用户角色编号
    }
  },
  mounted() {
    this.getUserInfo().then(() => {
      this.loadAllLightsStatus()
      this.startPolling()
    }).catch(() => {
      // 如果获取用户信息失败，仍然继续加载灯光状态
      this.loadAllLightsStatus()
      this.startPolling()
    })
  },
  beforeDestroy() {
    this.stopPolling()
  },
  methods: {
    switchFloor(floor) {
      this.currentFloor = floor
    },

    // 生成UUID
    generateUUID() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        const r = Math.random() * 16 | 0
        const v = c === 'x' ? r : (r & 0x3 | 0x8)
        return v.toString(16)
      })
    },

    // 构建API请求数据
    buildRequestData(tagList, cmd = 'Cmd_Opc_Write') {
      return {
        success: false,
        code: 1000,
        msg: '默认值',
        req_code: this.generateUUID(),
        req_from: 'LightControlWeb',
        req_cmd: cmd,
        req_param: {
          TagList: JSON.stringify(tagList)
        },
        res_data: null
      }
    },

    // 读取所有灯光状态
    async loadAllLightsStatus() {
      try {
        const tagList = this.allLightIds.map(tagId => ({
          Code: -1,
          Message: '',
          TimeStamp: '',
          TagID: tagId,
          ItemName: '',
          TagOrderBy: '',
          OpName: '',
          TagTypeCodeID: -1,
          TagValue: '0'
        }))

        const requestData = this.buildRequestData(tagList, 'Cmd_Opc_Read')

        const response = await axios.post('http://192.168.1.27:9981/api/zk/control_light', requestData)

        if (response.data.success && response.data.res_data) {
          const resultData = JSON.parse(response.data.res_data.StructSerialize)

          // 更新灯光状态
          resultData.forEach(item => {
            if (item.Code === 0) {
              // 使用 $set 确保响应式更新
              this.$set(this.lightsStatus, item.TagID, item.TagValue === '1')
            }
          })

          console.log('灯光状态已更新')
        }
      } catch (error) {
        console.error('读取灯光状态失败:', error)
        // 不显示错误消息，避免频繁弹窗
      }
    },
    startPolling() {
      this.stopPolling() // 先停止之前的轮询
      this.pollTimer = setInterval(() => {
        this.loadAllLightsStatus()
      }, this.pollInterval)
    },

    // 停止轮询
    stopPolling() {
      if (this.pollTimer) {
        clearInterval(this.pollTimer)
        this.pollTimer = null
      }
    },
    // 获取灯光状态
    getLightStatus(lightId) {
      return this.lightsStatus[lightId] || false
    },

    // 切换单个灯光状态
    async toggleLight(lightId) {
      const currentStatus = this.getLightStatus(lightId)
      const newStatus = !currentStatus

      this.$confirm(`确定要${newStatus ? '开启' : '关闭'} ${lightId} 吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(async() => {
        try {
          const tagList = [{
            Code: -1,
            Message: '',
            TimeStamp: '',
            TagID: lightId,
            ItemName: '',
            TagOrderBy: '',
            OpName: '',
            TagTypeCodeID: -1,
            TagValue: newStatus ? '1' : '0'
          }]

          const requestData = this.buildRequestData(tagList)

          const response = await axios.post('http://192.168.1.27:9981/api/zk/control_light', requestData)

          if (response.data.success) {
            // 只有在API调用成功后才更新状态
            this.$set(this.lightsStatus, lightId, newStatus)
            this.$message({
              type: 'success',
              message: `${lightId} ${newStatus ? '已开启' : '已关闭'}!`
            })
          } else {
            this.$message.error('操作失败')
          }
        } catch (error) {
          console.error('控制灯光失败:', error)
          this.$message.error('控制灯光失败')
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },

    // 确认切换所有灯光状态
    confirmToggleAllLights(floor, status) {
      const action = status ? '开启' : '关闭'
      this.$confirm(`确定要${action} ${floor}楼所有灯光吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.toggleAllLights(floor, status)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },

    // 切换楼层所有灯光状态
    async toggleAllLights(floor, status) {
      this.loadingAll = true
      try {
        const prefixes = this.getFloorPrefix(floor)
        const floorLights = this.allLightIds.filter(lightId =>
          prefixes.some(prefix => lightId.includes(prefix))
        )

        // 构建TagList数组，确保不为空
        const tagList = floorLights.map(lightId => ({
          Code: -1,
          Message: '',
          TimeStamp: '',
          TagID: lightId,
          ItemName: '',
          TagOrderBy: '',
          OpName: '',
          TagTypeCodeID: -1,
          TagValue: status ? '1' : '0'
        }))

        // 检查TagList是否为空
        if (tagList.length === 0) {
          this.$message.warning('该楼层没有可控制的灯光')
          return
        }

        const requestData = this.buildRequestData(tagList)

        const response = await axios.post('http://192.168.1.27:9981/api/zk/control_light', requestData)

        if (response.data.success) {
          // 只有在API调用成功后才更新所有状态
          floorLights.forEach(lightId => {
            this.$set(this.lightsStatus, lightId, status)
          })

          this.$message({
            type: 'success',
            message: `${floor}楼所有灯光已${status ? '开启' : '关闭'}!`
          })
        } else {
          this.$message.error('操作失败')
        }
      } catch (error) {
        console.error('控制所有灯光失败:', error)
        this.$message.error('控制所有灯光失败')
      } finally {
        this.loadingAll = false
      }
    },

    // 获取楼层前缀
    getFloorPrefix(floor) {
      if (floor === 1) return ['_170_', '_171_', '_172_', '_173_', '_174_', '_175_', '_176_', '_177_']
      if (floor === 2) return ['_180_', '_181_', '_182_', '_183_', '_184_', '_185_', '_186_']
      if (floor === 3) return ['_190_', '_191_', '_192_', '_193_']

      return []
    },

    // 获取楼层统计信息
    getFloorStats(floor) {
      const prefixes = this.getFloorPrefix(floor)
      const floorLights = this.allLightIds.filter(lightId =>
        prefixes.some(prefix => lightId.includes(prefix))
      )

      const on = floorLights.filter(lightId => this.lightsStatus[lightId]).length
      const off = floorLights.filter(lightId => !this.lightsStatus[lightId]).length
      const total = floorLights.length

      return { on, off, total }
    },
    // 获取用户信息
    async getUserInfo() {
      try {
        // 假设token存储在localStorage或vuex中
        const token = localStorage.getItem('token') || this.$store.state.token

        if (!token) {
          console.warn('未找到用户token')
          return
        }

        const response = await this.$api.getInfo(token)

        if (response && response.data && response.data.length > 0) {
          this.userRole = response.data[0].角色编号
          console.log('获取用户角色成功:', this.userRole)
        }
      } catch (error) {
        console.error('获取用户信息失败:', error)
      }
    },

    // 修改构建API请求数据方法，包含用户角色信息
    buildRequestData(tagList, cmd = 'Cmd_Opc_Write') {
      // 构建req_from字段，包含角色编号
      let reqFrom = 'LightControlWeb'
      if (this.userRole) {
        reqFrom = `LightControlWeb_Role${this.userRole}`
      }

      return {
        success: false,
        code: 1000,
        msg: '默认值',
        req_code: this.generateUUID(),
        req_from: reqFrom, // 包含角色编号
        req_cmd: cmd,
        req_param: {
          TagList: JSON.stringify(tagList)
        },
        res_data: null
      }
    }
  }
}
</script>

<style scoped>
/* 原有的所有CSS样式保持不变 */
.main-card {
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3) !important;
  position: relative;
}

/* 楼层切换按钮 */
.floor-switcher {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  display: flex;
  gap: 15px;
}

.floor-btn {
  background: linear-gradient(135deg, #3498db, #2980b9) !important;
  border: none !important;
  color: white !important;
  font-weight: bold;
  font-size: 16px;
  padding: 15px 25px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  border-radius: 8px !important;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floor-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

.floor-btn:active {
  transform: translateY(1px);
}

.floor-btn:focus {
  background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
}

/* 调整楼层内容的上边距，为按钮留出空间 */
.floor {
  width: 100%;
  height: 740px;
  margin-bottom: 20px;
  position: relative;
  background: linear-gradient(145deg, #34495e, #2c3e50);
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  margin-top: 100px;
  /* 为按钮留出空间 */
}

.floor-name {
  text-align: center;
  height: 30px;
  width: 100%;
  font-size: 1.2rem;
  font-weight: bold;
  color: #3498db;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  margin-bottom: 10px;
}

.floor-content {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 二楼专用样式 */
.second-floor-content {
  padding: 0;
}

.second-floor-group {
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: space-around;
  border-radius: 8px;
  padding: 15px;
}

/* 二楼上方区域 */
.top-area {
  display: flex;
  justify-content: space-around;
  width: 86%;
  height: 50px;
  align-items: center;
  border-radius: 6px;
  /* 添加圆角 */
  padding: 10px;
  /* 添加内边距 */
}

/* 二楼中间区域 */
.middle-area {
  display: flex;
  width: 100%;
  height: 215px;
  gap: 15px;
  position: relative;
}

.middle-area1 {
  width: 250px;
  /* 增加宽度以匹配长文字 */
  height: 380px;
  position: absolute;
  top: -150px;
  right: 550px;
  /* 使用 right 而不是 left */

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border-radius: 6px;
  padding: 10px;
  z-index: 10;
}

.middle-area2 {
  width: 600px;
  height: 74px;
  position: absolute;
  bottom: -100px;
  /* 使用 bottom 而不是 top */
  right: 740px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  border-radius: 6px;
  padding: 10px;
}

.middle-left {
  width: 25%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  border-radius: 6px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
  /* 添加背景阴影 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 添加阴影效果 */
}

.middle-left .light-area {
  display: flex;
  align-items: center;
  justify-content: center;
}

.middle-left .light-area:nth-child(1) {
  grid-area: 1 / 2 / 2 / 3;
}

/* 4 */
.middle-left .light-area:nth-child(2) {
  grid-area: 1 / 1 / 2 / 2;
}

/* 1 */
.middle-left .light-area:nth-child(3) {
  grid-area: 2 / 1 / 3 / 2;
}

/* 3 */
.middle-left .light-area:nth-child(4) {
  grid-area: 2 / 2 / 3 / 3;
}

/* 2 */

.middle-right {
  width: 75%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 6px;
  padding: 10px;
}

.light-row {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

/* 二楼下方区域 */
.bottom-area {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 66.67%;
  /* 三分之二 */
  height: 120px;
  /* 增加高度以适应两行 */
  align-items: center;
  border-radius: 6px;
  padding: 10px 20px;
  gap: 35px;
}

.bottom-area .light-row {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.area-group {
  display: flex;
  gap: 80px;
  height: 100%;
}

/* 三楼样式 - 横向排列 */
.third-floor-group {
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
}

.area-row {
  display: flex;
  justify-content: space-around;
  width: 100%;
  gap: 10px;
}

/* 一楼左侧区域 */
.left-group {
  flex-direction: column;
  width: 250px;
  height: 100%;
  justify-content: flex-start;
  gap: 20px;
}

.group1,
.group2 {
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.group1 {
  height: 130px;
}

.group2 {
  height: 160px;
  gap: 12px;
  flex-grow: 1;
}

/* 一楼中间区域 */
.center-group {
  flex: 1;
  max-width: 1550px;
  flex-direction: column;
  justify-content: center;

  border-radius: 8px;

  gap: 70px;
}

/* 一楼右侧区域 */
.right-group {
  width: 250px;
  height: 100%;
}

.right-group .area-column {
  border-radius: 8px;
  padding: 15px;
  height: 100%;
  display: flex;
  /* 添加此行 */
  flex-direction: column;
  /* 添加此行 */
  justify-content: space-between;
  /* 添加此行 */
  width: 100%;
}

.light-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 5px;
  border-radius: 5px;
  transition: all 0.3s ease;
  width: 100%;
  flex: 1;
  /* 添加此行，使每个区域均分高度 */
  min-height: 0;
  /* 防止内容溢出 */
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin: 2px 0;
}

.light-area:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.light-area:active {
  transform: translateY(1px);
}

.light-indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  box-shadow: 0 0 8px rgba(231, 76, 60, 0.5);
  transition: all 0.3s ease;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.light-indicator.on {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  box-shadow: 0 0 12px rgba(46, 204, 113, 0.7);
  animation: pulse 2s infinite;
}

.light-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(46, 204, 113, 0.4);
  filter: blur(5px);
  z-index: 1;
  animation: glow-pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(46, 204, 113, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
  }
}

@keyframes glow-pulse {

  0%,
  100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

.area-label {
  color: #ecf0f1;
  font-size: 0.8rem;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .center-group {
    max-width: 600px;
    margin: 0 20px;
  }
}

@media (max-width: 768px) {
  .floor-content {
    flex-direction: column;
    overflow-y: auto;
  }

  .left-group,
  .center-group,
  .right-group {
    width: 100%;
    margin: 10px 0;
  }

  .floor-switcher {
    position: relative;
    top: 0;
    left: 0;
    justify-content: center;
    margin-bottom: 20px;
  }
}

/* 三楼专用样式 */
.third-floor-content {
  padding: 0;
  width: 100%;
  height: 100%;
}

.third-floor-group {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 15px;
}

/* 左侧三分之二区域 */
.third-left {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  border-radius: 8px;
  padding: 15px;
}

/* 第一行 - 占50%高度 */
.third-row1 {
  height: 28%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.third-subrow {
  flex: 1;
  display: flex;
  gap: 10px;
}

.third-subrow .light-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 第二行 - 占50%高度 */
.third-row2 {
  height: 70%;
  display: flex;
  gap: 15px;
}

.third-left-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.third-top,
.third-bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 8px;
  position: relative;
}

.room-label {
  position: absolute;
  top: 5px;
  left: 5px;
  color: #ecf0f1;
  font-size: 0.7rem;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.5);
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 5;
}

.third-top .light-area,
.third-bottom .light-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
}

.third-right-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.third-right-col .third-subrow {
  flex: 1;
  display: flex;
  gap: 10px;
}

.third-right-col .light-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 右侧三分之一区域 */

/* 响应式设计 */
@media (max-width: 768px) {
  .third-floor-group {
    flex-direction: column;
  }

  .third-left,
  .third-right {
    width: 100%;
    height: 50%;
  }
}

.floor-controls {
  position: absolute;
  top: -80px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 10;
}

.control-btn {
  font-weight: bold;
  font-size: 16px;
  padding: 15px 25px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  border-radius: 8px !important;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

.control-btn:active {
  transform: translateY(1px);
}

.floor-stats {
  display: flex;
  gap: 20px;
  padding: 15px 25px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  background: rgba(68, 68, 68, 0.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  min-height: 50px;
  align-items: center;
}

.stat-item {
  color: #383838;
  font-weight: bold;
  font-size: 1rem;
}

.north-gate-label {
  position: absolute;
  right: 23%;
  /* 从右数三分之一处 */
  bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
  background: rgba(52, 152, 219, 0.8);
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.north-arrow {
  font-size: 24px;
  color: white;
  font-weight: bold;
  margin-bottom: 2px;
}

.north-text {
  color: white;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
</style>
