<!--
 * @Author: chris
 * @Date: 2025-10-17 11:52:06
 * @LastEditors: chris
 * @LastEditTime: 2025-10-22 14:16:01
-->
<script setup>
const echarts = require('../../uni_modules/lime-echart_1.0.5/static/echarts.min2.js')

import LineChart from './components/lineChart.vue'
import PieChart from './components/pieChart.vue'

definePage({
  style: {
    navigationBarTitleText: '虫情监测',
  },
})

const { proxy } = getCurrentInstance()
const query = uni.createSelectorQuery().in(proxy)

const chartSize = ref({
  lineChart: {
    width: 0,
    height: 0,
  },
  pieChart: {
    width: 0,
    height: 0,
  },
})

onMounted(async () => {
  // await getChartCanvasSize('lineChart')
  // await getChartCanvasSize('pieChart')
})

async function getCanvasSize(id) {
  return new Promise((resolve, reject) => {
    query.select(`#${id}`).boundingClientRect((info) => {
      resolve(info)
    }).exec()
  })
}

async function getChartCanvasSize(id) {
  const { width = 0, height = 0 } = await getCanvasSize(id)
  chartSize.value[id].width = width
  chartSize.value[id].height = height
}
</script>

<template>
  <view class="pest-monitor-page">
    <wd-card class="pest-info-card">
      <view class="pest-total-title">
        <view class="title-text">
          虫害总数(近7天)
        </view>
        <view class="update-time">
          更新时间: {{ '2023-10-17 11:52:06' }}
        </view>
      </view>
      <view class="pest-total-count">
        {{ 12345 }}
      </view>
    </wd-card>

    <!-- 折线图区域 -->
    <wd-card class="chart-card">
      <!-- <view class="chart-title">
        近7天虫害趋势
      </view> -->
      <!-- <l-echart id="lineChart" ref="lineChartRef" class="chart" /> -->
      <line-chart id="lineChart" :echarts="echarts" />
    </wd-card>

    <!-- 饼图区域 -->
    <wd-card class="chart-card">
      <!-- <view class="chart-title">
        虫害类型分布
      </view> -->
      <pie-chart id="pieChart" :echarts="echarts" />
    </wd-card>
  </view>
</template>

<style lang="scss" scoped>
$bg-color: #f5f7fa;

.pest-monitor-page {
  @apply py-15px min-h-[100vh];
  background-color: $bg-color;

  > .wd-card {
    @apply p-15px;
  }
}

.pest-info-card {
  .pest-total-title {
    @apply flex flex-col items-center justify-between mb-20px;

    .title-text {
      @apply text-20px font-bold tracking-[4px] mb-2px;
      color: $-color-theme;
    }
    .update-time {
      @apply text-12px;
      color: $-color-secondary;
    }
  }

  .pest-total-count {
    @apply text-center font-size-20px font-600;
    color: $-color-warning;
  }
}

.chart-card {
  .chart-title {
    @apply mb-20px font-bold;
  }
}

.chart {
  @apply w-[100%] h-[300px];
}
</style>
