<!--
 * @Author: chris
 * @Date: 2025-08-18 09:24:26
 * @LastEditors: chris
 * @LastEditTime: 2025-09-05 09:06:57
-->
<script setup name="PestStatistics">
import { useSettings } from "@/hooks/useSettings";
import DeviceList from './components/DeviceList.vue';
import SearchForm from './components/SearchForm.vue';
import StatisticsChart from './components/StatisticsChart.vue';
import ChartAction from "./components/chartAction.vue";
import { devices } from './mockData'

const { hasTags } = useSettings()

const deviceList = ref(devices);
const tableData = ref([]);
const queryParams = ref({});

function getList () {

}

function handleSelect(items) {
  console.log(items);
}

function exportView() {
  console.log('导出视图')
}

function resetQuery() {
  console.log('重置查询')
}
</script>

<template>
  <div :class="['pest-statistics-page', 'page-height', { 'hasTagsView': hasTags }]">
    <el-row :gutter="40" class="h-100%">
      <el-col :span="4">
        <device-list :devices="deviceList" @select="handleSelect"></device-list>
      </el-col>
      <el-col :span="20">
        <search-form v-model:params="queryParams" @reset="resetQuery" @query="getList" @export="exportView" />
        <chart-action v-model:params="queryParams" :options="options" class="action" />
        <statistics-chart :tableData="tableData" class="chart"/>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.pest-statistics-page {
  @apply p-20px
}
.action {
  @apply mt-20px;
}
.chart {
  @apply h-88% w-100% mt-10px;
}
</style>
