<!--
 * @Author: chris
 * @Date: 2025-10-23 16:55:09
 * @LastEditors: chris
 * @LastEditTime: 2025-10-24 10:13:44
-->
<script setup lang="ts">
interface Form {
  beginTime: string
  endTime: string
  pageSize: number
  pageNum: number
}

interface Warning {
  title: string
  time: string
}

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

const form = ref<Form>({
  beginTime: '',
  endTime: '',
  pageSize: 10,
  pageNum: 1,
})

const dateRange = ref<number[]>([null, null])
const warningList = ref<Warning[]>([{
  title: '监测到果园东区荔枝蒂蛀虫密度异常增高，预计48小时内可能大规模爆发可能大规模爆发可能大规模爆发123123123123',
  time: '2小时前',
}, {
  title: '监测到果园东区荔枝蒂蛀虫密度异常增高，预计48小时内可能大规模爆发可能大规模爆发可能大规模爆发123123123123',
  time: '2小时前',
}, {
  title: '监测到果园东区荔枝蒂蛀虫密度异常增高，预计48小时内可能大规模爆发可能大规模爆发可能大规模爆发123123123123',
  time: '2小时前',
}, {
  title: '监测到果园东区荔枝蒂蛀虫密度异常增高，预计48小时内可能大规模爆发可能大规模爆发可能大规模爆发123123123123',
  time: '2小时前',
}, {
  title: '监测到果园东区荔枝蒂蛀虫密度异常增高，预计48小时内可能大规模爆发可能大规模爆发可能大规模爆发123123123123',
  time: '2小时前',
}, {
  title: '监测到果园东区荔枝蒂蛀虫密度异常增高，预计48小时内可能大规模爆发可能大规模爆发可能大规模爆发123123123123',
  time: '2小时前',
}, {
  title: '监测到果园东区荔枝蒂蛀虫密度异常增高，预计48小时内可能大规模爆发可能大规模爆发可能大规模爆发123123123123',
  time: '2小时前',
}])

function handleConfirm(value: number[]) {
  console.log(value)
  form.value.beginTime = dateRange.value[0] as any
  form.value.endTime = dateRange.value[1] as any
}

function handleSubmit(value: number[]) {
  console.log(value)
}

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.title" />
            <view class="warning-time">
              <wd-text size="12px" :text="item.time" />
            </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>
