<!--
 * @Author: chris
 * @Date: 2025-09-05 09:29:59
 * @LastEditors: chris
 * @LastEditTime: 2025-09-11 17:11:53
-->
<script setup>
import LiveData from './components/LiveData.vue'
import WeatherChart from './components/WeatherChart.vue';
import { useSettings } from '@/hooks/useSettings';
import { getFormattedWeatherData } from './mock';

const { hasTags } = useSettings()

const liveData = ref({})
const chartData = ref({ dates: [], values: []})
const weatherType = ref('temperature')
const selectedTimeRange = ref(7)
const chartLoading = ref(false) 

getChartData()

function getChartData() {
  chartLoading.value = true
  setTimeout(() => {
    console.log(getFormattedWeatherData(weatherType.value, selectedTimeRange.value))
    chartData.value = getFormattedWeatherData(weatherType.value, selectedTimeRange.value)
    chartLoading.value = false
  }, 300)
  return chartData.value
}

function handleSelectionChange(selection) {
  console.log(selection)
}

function handleSelectWeatherItem(item) {
  weatherType.value = item.type
  getChartData()
}

function handleTimeRangeChange(range) {
  selectedTimeRange.value = range
  getChartData()
}
</script>

<template>
  <div :class="['weather-monitor-page', 'page-height', { 'hasTagsView': hasTags }]">
    <el-row :gutter="20">
      <el-col class="real-time-data" :span="6">
        <live-data :data="liveData" @select="handleSelectWeatherItem"/>
      </el-col>
      <el-col class="history-data" :span="18">
        <weather-chart :weather-type="weatherType" :chart-data="chartData" :selected-time-range="selectedTimeRange" :loading="chartLoading" @time-range-change="handleTimeRangeChange" /> 
        <!-- <search-form v-model:params="queryParams" class="mb-12px" />
        <history-table :dataList="historyList" :columns="columnsConfig" @selection-change="handleSelectionChange" /> -->
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.weather-monitor-page {
  @apply p-20px;

  > .el-row {
    @apply h-full;
  }
}
</style>
