<!--
 * @Author: chris
 * @Date: 2025-01-13 09:34:10
 * @LastEditors: chris
 * @LastEditTime: 2025-08-06 16:12:04
-->
<template>
  <div class="app-container home" :class="{ 'hasTagsView': hasTags }">
    <section class="home-top">
      <device-overview />
    </section>
    <section class="home-content">
      <el-row :gutter="12" class="h-100%">
        <el-col :span="3">
          <el-card class="device-list">
            <template #header>
              <span class="card-title">设备列表</span>
            </template>
            <!-- <device-list /> -->
            <device-flat-list @change="handleChangeDevice"/>
          </el-card>
        </el-col>
        <el-col :span="21" class="!flex flex-col">
          <el-row :gutter="12" class="m-b-12px flex-1">
            <el-col :span="14">
              <el-card class="device-map h-100%">
                <template #header>
                <span class="card-title">设备地图</span>
              </template>
              </el-card>
            </el-col>
            <el-col :span="10">
              <el-card class="device-info h-100%">
                <template #header>
                  <span class="card-title">设备信息</span>
                </template>
                <device-info :device="currentDevice" />
              </el-card>
            </el-col>
          </el-row>
          <el-card class="live-data h-350px">
            <template #header>
              <span class="card-title">实时数据</span>
            </template>
            <live-data />
          </el-card>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script setup name="Index">
import useSettingsStore from '@/store/modules/settings'
import deviceOverview from './indexComponents/deviceOverview.vue'
import liveData from './indexComponents/liveData.vue'
import deviceFlatList from '@/components//deviceFlatList'
import deviceInfo from './indexComponents/deviceInfo'


const settingsStore = useSettingsStore()

const currentDevice = ref(null);

const hasTags = computed(() => settingsStore.tagsView);

const handleChangeDevice = (device) => {
  currentDevice.value = device;
};
</script>

<style scoped lang="scss">
.home {
  height: calc(100vh - 50px); 
  
  &.hasTagsView {
    height: calc(100vh - 84px);
  }
}

.home-top {
  @apply m-b-12px;  
}

.home-content {
  height: calc(100% - 86px);
}

.device-list {
  height: 100%;
}
</style>

