<!--
 * @Author: chris
 * @Date: 2025-01-13 09:34:10
 * @LastEditors: chris
 * @LastEditTime: 2025-10-31 14:18:26
-->
<template>
  <div class="app-container home" :class="{ 'hasTagsView': hasTags }">
    <section class="home-top">
      <device-overview :deviceData="formateData" />
    </section>
    <section class="home-content">
      <el-row :gutter="12" class="h-100%">
        <el-col :span="4">
          <el-card class="device-list">
            <template #header>
              <span class="card-title">设备列表</span>
            </template>
            <!-- <device-list /> -->
            <device-flat-list @change="handleChangeDevice" :list="deviceList"/>
          </el-card>
        </el-col>
        <el-col :span="20" class="!flex flex-col">
          <el-row :gutter="12" class="flex-1">
            <el-col :span="15">
              <el-card class="device-map h-100%">
                <template #header>
                <span class="card-title">设备地图</span>
              </template>
              <device-map :deviceList="deviceList" :currentDevice="currentDevice"/>
              </el-card>
            </el-col>
            <el-col :span="9">
              <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 deviceMap from './indexComponents/deviceMap'
import deviceInfo from './indexComponents/deviceInfo'
import { listDevice } from '@/api/device'


const settingsStore = useSettingsStore()

const deviceList = ref([])
const formateData = ref({})
const currentDevice = ref(null);
const loading = ref(false)
const queryParams = ref({})

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

getDeviceList()

async function getDeviceList() {
  loading.value = true
  try {
    const res = await listDevice(queryParams.value)
    deviceList.value = res.rows || []
    formateData.value = formatDeviceData(deviceList.value)
  } catch (error) {
    proxy.$modal.msgError('获取设备数据失败: ' + (error.message || '未知错误'))
    console.error('Failed to get pest list:', error)
  } finally {
    loading.value = false
  }
}

function formatDeviceData (devices) {
  const dataOfType = { // 类型 1: 虫情检测 2:土壤墒情监测 3:气象视频监测
    1: [],
    2: [],
    3: [],
    4: []
  }
  const dataOfStatus = { // 状态 0: 离线 1: 在线
    0: [],
    1: [],
  }
  devices.forEach(device => {
    const type = device.type
    const status = device.onlineStatus 
    dataOfType[type] && dataOfType[type].push(device)
    dataOfStatus[status] && dataOfStatus[status].push(device)
  })

  return {
    dataOfType,
    dataOfStatus,
  }
}

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%;
}

:deep(.device-map) {
  .el-card__body {
    height: calc(100% - 43px);
  }
}
</style>

