<!--
 * @Author: chris
 * @Date: 2025-10-23 16:55:09
 * @LastEditors: chris
 * @LastEditTime: 2026-01-19 17:52:20
-->
<script setup lang="ts">
// import type { IWarning, IWarningListQuery } from '@/api/warning'
import type { IWarning, IWarningQuery } from '@/api/pest/warning'
import { getWarningList } from '@/api/pest/warning'
import { formatDate } from '@/utils/date'

definePage({
  style: {
    navigationBarTitleText: '预警信息',
  },
})

const queryParams = ref<IWarningQuery>({
  deptId: 0,
  beginTime: '',
  endTime: '',
  pageSize: 10,
  pageNum: 1,
})

const isLoading = ref<boolean>(false)
const dateRange = ref<number[]>([null, null])
const warningList = ref<IWarning[]>([{
  id: 1,
  deptId: 1,
  notifyContent: '监测到果园东区荔枝蒂蛀虫密度异常增高，预计48小时内可能大规模爆发可能大规模爆发可能大规模爆发123123123123',
  createTime: '2026-01-19 17:46:57',
}, {
  id: 2,
  deptId: 1,
  notifyContent: '监测到果园东区荔枝蒂蛀虫密度异常增高，预计48小时内可能大规模爆发可能大规模爆发可能大规模爆发123123123123',
  createTime: '2026-01-19 17:46:57',
}, {
  id: 3,
  deptId: 1,
  notifyContent: '监测到果园东区荔枝蒂蛀虫密度异常增高，预计48小时内可能大规模爆发可能大规模爆发可能大规模爆发123123123123',
  createTime: '2026-01-19 17:46:57',
}, {
  id: 4,
  deptId: 1,
  notifyContent: '监测到果园东区荔枝蒂蛀虫密度异常增高，预计48小时内可能大规模爆发可能大规模爆发可能大规模爆发123123123123',
  createTime: '2026-01-19 17:46:57',
}, {
  id: 5,
  deptId: 1,
  notifyContent: '监测到果园东区荔枝蒂蛀虫密度异常增高，预计48小时内可能大规模爆发可能大规模爆发可能大规模爆发123123123123',
  createTime: '2026-01-19 17:46:57',
}, {
  id: 6,
  deptId: 1,
  notifyContent: '监测到果园东区荔枝蒂蛀虫密度异常增高，预计48小时内可能大规模爆发可能大规模爆发可能大规模爆发123123123123',
  createTime: '2026-01-19 17:46:57',
}, {
  id: 7,
  deptId: 1,
  notifyContent: '监测到果园东区荔枝蒂蛀虫密度异常增高，预计48小时内可能大规模爆发可能大规模爆发可能大规模爆发123123123123',
  createTime: '2026-01-19 17:46:57',
}])

async function loadData() {
  isLoading.value = true
  try {
    const res = await getWarningList(queryParams.value)
    warningList.value = res || []
  }
  finally {
    isLoading.value = false
  }
}

function handleConfirm(value: number[]) {
  console.log(value)
  queryParams.value.beginTime = formatDate(dateRange.value[0]).split(' ')[0]
  queryParams.value.endTime = formatDate(dateRange.value[1]).split(' ')[0]
  console.log('handleConfirm', queryParams.value)
}

function handleSubmit(value: number[]) {
  console.log(value)
  queryParams.value.pageNum = 1
  loadData()
}

function handleScrollLower() {
  console.log('scroll lower')
}
</script>

<template>
  <view class="warning-page">
    <wd-drop-menu>
      <wd-drop-menu-item title="筛选">
        <view class="filter-container">
          <wd-calendar v-model="dateRange" type="daterange" @confirm="handleConfirm" />
          <wd-button class="submit-btn" type="primary" block @click="handleSubmit">
            查询
          </wd-button>
        </view>
      </wd-drop-menu-item>
    </wd-drop-menu>
    <scroll-view scroll-y @scrolltolower="handleScrollLower">
      <view class="warning-list">
        <wd-card v-for="(item, index) in warningList" :key="index" class="warning-item">
          <view class="warning-content">
            <wd-text :text="item.notifyContent" />
            <view class="warning-time">
              <wd-text size="12px" :text="item.createTime" />
            </view>
          </view>
        </wd-card>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss" scoped>
.warning-page {
  @apply bg-[#f5f5f5];
}

.filter-container {
  @apply p-20px;

  .submit-btn {
    @apply mt-30px;
  }
}

scroll-view {
  @apply h-[calc(100vh-48px)];
}

.warning-list {
  @apply py-15px;
}

.warning-content {
  @apply py-10px;
}

.warning-time {
  @apply mt-20px text-right;

  > .wd-text {
    @apply py-2px px-6px bg-[#f5f5f5] rounded-8px;
  }
}
</style>
