<script setup lang="ts">
    import { computed, reactive, ref } from 'vue'
    import dayjs from 'dayjs'

    const nowText = ref('')
    function tick() {
        nowText.value = dayjs().format('YYYY年MM月DD日 dddd HH:mm:ss')
    }
    tick()
    setInterval(tick, 1000)

    const pageData = reactive({
        banner: {
            image: '/static/images/codefun/farm.jpg',
            name: '西区茶油基地',
        },
        search: '',
        categories: [
            { id: 'all', name: '全部' },
            { id: 'irrigation', name: '灌溉系统' },
            { id: 'soil', name: '土壤监测' },
            { id: 'camera', name: '摄像监控' },
            { id: 'weather', name: '气象站' },
        ],
        currentCategory: 'all',
        areas: [
            { id: 1, name: '北区灌溉系统', type: 'irrigation' },
            { id: 2, name: '南区灌溉系统', type: 'irrigation' },
            { id: 3, name: '西区灌溉系统', type: 'irrigation' },
            { id: 4, name: '东区灌溉系统', type: 'irrigation' },
            { id: 5, name: '南区土壤监测', type: 'soil' },
            { id: 6, name: '北区土壤监测', type: 'soil' },
            { id: 7, name: '北区土壤监测', type: 'soil' },
            { id: 8, name: '西区摄像监控', type: 'camera' },
            { id: 9, name: '东区摄像监控', type: 'camera' },
            { id: 10, name: '南区摄像监控', type: 'camera' },
            { id: 11, name: '北区摄像监控', type: 'camera' },
            { id: 12, name: '东区摄像监控', type: 'camera' },
            { id: 13, name: '北区气象站', type: 'weather' },
            { id: 14, name: '南区气象站', type: 'weather' },
            { id: 15, name: '西区气象站', type: 'weather' },
        ],
    })

    const filteredAreas = computed(() => {
        const kw = pageData.search.trim()
        return pageData.areas.filter((a) => {
            const byCat = pageData.currentCategory === 'all' || a.type === pageData.currentCategory
            const byKw = !kw || a.name.includes(kw)
            return byCat && byKw
        })
    })

    function selectCategory(id: string) {
        pageData.currentCategory = id
    }

    function onSearchConfirm() {}

    function openArea(item: any) {
        uni.navigateTo({ url: `/pages/device/device?area=${encodeURIComponent(item.name)}` })
    }
</script>

<template>
    <view class="page">
        <view class="banner">
            <image class="banner-img" :src="pageData.banner.image" mode="aspectFill" />
            <view class="banner-time">{{ nowText }}</view>
            <view class="banner-label">
                <text class="label-text">{{ pageData.banner.name }}</text>
                <fui-icon name="share" :size="36" color="#fff" />
            </view>
        </view>

        <view class="section">
            <fui-search-bar
                v-model="pageData.search"
                :height="72"
                :radius="80"
                placeholder="请输入搜索内容"
                inputBackground="#fff"
                :cancel="false"
                @search="onSearchConfirm"
            />

            <scroll-view class="chip-row" scroll-x show-scrollbar="false">
                <view class="chip-wrap">
                    <fui-tag
                        v-for="c in pageData.categories"
                        :key="c.id"
                        :text="c.name"
                        :theme="pageData.currentCategory === c.id ? 'dark' : 'light'"
                        type="success"
                        :padding="['16rpx', '32rpx']"
                        :radius="40"
                        :marginRight="16"
                        @click="selectCategory(c.id)"
                    />
                </view>
            </scroll-view>

            <view class="grid-box">
                <fui-grid :columns="3" :showBorder="false" :square="false">
                    <fui-grid-item
                        v-for="(item, idx) in filteredAreas"
                        :key="item.id"
                        :index="idx"
                        backgroundColor="#FFFFFF"
                        @click="() => openArea(item)"
                    >
                        <view class="card" :class="{ active: item.name.includes('西区摄像监控') }">
                            <text class="card-text">{{ item.name }}</text>
                        </view>
                    </fui-grid-item>
                </fui-grid>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
    .page {
        background: #e6f5e8;
        min-height: 100vh;
    }
    .banner {
        position: relative;
        margin: 24rpx;
        border-radius: 16rpx;
        overflow: hidden;
        height: 280rpx;
    }
    .banner-img {
        width: 100%;
        height: 100%;
    }
    .banner-time {
        position: absolute;
        left: 24rpx;
        top: 20rpx;
        color: #fff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        font-size: 24rpx;
    }
    .banner-label {
        position: absolute;
        right: 16rpx;
        bottom: 16rpx;
        display: flex;
        align-items: center;
        gap: 12rpx;
    }
    .label-text {
        color: #fff;
        font-size: 28rpx;
    }
    .section {
        padding: 24rpx;
    }
    .chip-row {
        width: 100%;
    }
    .chip-wrap {
        display: flex;
        flex-direction: row;
        gap: 16rpx;
    }
    .grid-box {
        margin-top: 24rpx;
    }
    .card {
        height: 120rpx;
        margin: 12rpx;
        border-radius: 16rpx;
        border: 1rpx solid #eaeef1;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
    }
    .card.active {
        background: #5db66f;
        color: #fff;
        border-color: #5db66f;
    }
    .card-text {
        font-size: 28rpx;
        color: #2a2a2a;
    }
</style>
