<script setup lang="ts">
    import { reactive } from 'vue'
    import { onPullDownRefresh } from '@dcloudio/uni-app'

    // 下拉刷新
    onPullDownRefresh(() => {
        setTimeout(function () {
            uni.stopPullDownRefresh()
            Message.toast('刷新成功')
        }, 1000)
    })

    // 页面数据
    const pageData = reactive({
        // 用户信息
        userInfo: {
            avatar: '/static/images/codefun/8653455b786fbf94ae1c3946f11e7d40.png',
            farmName: '007农场',
            certification: {
                icon: '/static/images/codefun/b6079649e1f0ba231d158cb10bea118f.png',
                text: '已认证农场主',
            },
            farmDescription: '华北绿色农业示范基地',
            settingsIcon: '/static/images/codefun/1458747d012f7cb820f99627876e8fa6.png',
        },

        // 统计数据
        statistics: [
            { id: 1, value: '44', label: '我的基地' },
            { id: 2, value: '¥3266', label: '累计收益' },
            { id: 3, value: '8', label: '服务订单' },
        ],

        // 消息中心
        messageCenter: {
            icon: '/static/images/codefun/41d4366b8b071c40d285a8f48c696d8a.png',
            title: '消息中心',
            description: '预警通知/服务进度/订单状态',
            notificationCount: '6',
            arrowIcon: '/static/images/codefun/f29a8c39eb37da965d0a764a567a1c77.png',
        },

        // 功能模块
        features: [
            {
                id: 1,
                icon: '/static/images/codefun/a1b5d5fd677e3e3c32cdfe7a476aee19.png',
                title: '资源库',
                count: '38个资源可用',
                description: '合同模板/政策文件/财务表',
                status: '离线可用',
                statusClass: 'text_14',
                arrowIcon: '/static/images/codefun/f29a8c39eb37da965d0a764a567a1c77.png',
            },
            {
                id: 2,
                icon: '/static/images/codefun/d38158bc612aa1c6a022fae41afd8a42.png',
                title: '物联设备',
                count: '2台在线',
                description: '灌溉设备/气象站绑定管理',
                actionText: '添加设备',
                arrowIcon: '/static/images/codefun/f29a8c39eb37da965d0a764a567a1c77.png',
                addIcon: '/static/images/codefun/2ff61f748e26b18760ca166aa8cfa15a.png',
            },
        ],

        // 常用资源
        commonResources: {
            title: '常用资源',
            actionText: '全部',
            resources: [
                {
                    id: 1,
                    icon: '/static/images/codefun/38f8cccf12ace58fd9cd4612dce944b0.png',
                    title: '水稻种植合同模版',
                    size: '125kb',
                    actionText: '下载',
                },
                {
                    id: 2,
                    icon: '/static/images/codefun/38f8cccf12ace58fd9cd4612dce944b0.png',
                    title: '玉米种植技术指南',
                    size: '210kb',
                    actionText: '下载',
                },
                {
                    id: 3,
                    icon: '/static/images/codefun/38f8cccf12ace58fd9cd4612dce944b0.png',
                    title: '肥料使用记录表',
                    size: '86kb',
                    actionText: '下载',
                },
            ],
        },

        // 我的设备
        myDevices: {
            title: '我的设备',
            actionText: '添加设备',
            devices: [
                {
                    id: 1,
                    image: '/static/images/codefun/8bd62352939b47e71f09a93a6ab344b2.png',
                    name: '智能灌溉控制器',
                    lastConnection: '上次链接：10分钟前',
                    status: '正常',
                    statusIcon: '/static/images/codefun/e9da7be7465ae5310ccbc8a61ec653af.png',
                    statusClass: 'text_24',
                },
                {
                    id: 2,
                    image: '/static/images/codefun/81937c2666c800cf5966c29c2891b7c4.png',
                    name: '土壤监测传感器',
                    lastConnection: '上次链接：10分钟前',
                    status: '离线',
                    statusIcon: '/static/images/codefun/1d16bdeaf73b863640e5855843a54682.png',
                },
            ],
        },

        // 客服与帮助
        support: {
            services: [
                {
                    id: 1,
                    icon: '/static/images/codefun/e4267d4e96c1020d60dfbbf315b662cb.png',
                    title: '在线客服',
                    arrowIcon: '/static/images/codefun/543b9b7cb3072527207b45b678ca5794.png',
                },
            ],
            helps: [
                {
                    id: 1,
                    icon: '/static/images/codefun/46ebd858a611104ee741fc252ca6f0ce.png',
                    title: '帮助中心',
                    arrowIcon: '/static/images/codefun/0314db942874f91963bc16e91b9798bc.png',
                },
                {
                    id: 2,
                    icon: '/static/images/codefun/559cc3a424e888da63761cafa26dad82.png',
                    title: '问题反馈',
                    arrowIcon: '/static/images/codefun/0314db942874f91963bc16e91b9798bc.png',
                },
            ],
        },
    })

    // 用户信息设置点击事件
    function onSettingsClick() {
        console.log('点击设置')
        // 在这里添加具体的设置点击逻辑
    }

    // 消息中心点击事件
    function onMessageCenterClick() {
        console.log('点击消息中心')
        // 在这里添加具体的消息中心点击逻辑
    }

    // 功能模块点击事件
    function onFeatureClick(feature: any) {
        console.log('点击功能模块:', feature)
        // 在这里添加具体的功能模块点击逻辑
    }

    // 常用资源点击事件
    function onResourceClick(resource: any) {
        console.log('点击资源:', resource)
        // 在这里添加具体的资源点击逻辑
    }

    // 资源下载点击事件
    function onDownloadClick(resource: any) {
        console.log('点击下载:', resource)
        // 在这里添加具体的下载点击逻辑
    }

    // 查看所有资源
    function onViewAllResources() {
        console.log('查看所有资源')
        // 在这里添加具体的查看所有资源逻辑
    }

    // 我的设备标题点击事件
    function onMyDevicesTitleClick() {
        console.log('点击我的设备标题')
        // 在这里添加具体的设备标题点击逻辑
    }

    // 设备点击事件
    function onDeviceClick(device: any) {
        console.log('点击设备:', device)
        // 在这里添加具体的设备点击逻辑
    }

    // 客服点击事件
    function onServiceClick(service: any) {
        console.log('点击客服:', service)
        // 在这里添加具体的客服点击逻辑
    }

    // 帮助点击事件
    function onHelpClick(help: any) {
        console.log('点击帮助:', help)
        // 在这里添加具体的帮助点击逻辑
    }
</script>

<template>
    <view class="codefun-flex-col page">
        <view class="codefun-flex-col group">
            <view class="codefun-flex-col section">
                <view class="codefun-flex-row codefun-justify-between codefun-items-center group_4">
                    <view class="codefun-flex-row">
                        <image class="image_6" :src="pageData.userInfo.avatar" />
                        <view class="codefun-flex-col group_5 codefun-ml-8">
                            <view class="codefun-flex-row codefun-items-center codefun-self-stretch">
                                <text class="font_2 text_2">{{ pageData.userInfo.farmName }}</text>
                                <view
                                    class="codefun-flex-row codefun-items-center codefun-shrink-0 section_2 codefun-ml-6"
                                >
                                    <image
                                        class="codefun-shrink-0 image_7"
                                        :src="pageData.userInfo.certification.icon"
                                    />
                                    <text class="font_3 text_3 codefun-ml-4">{{
                                        pageData.userInfo.certification.text
                                    }}</text>
                                </view>
                            </view>
                            <text class="codefun-self-start font_1 codefun-mt-10">{{
                                pageData.userInfo.farmDescription
                            }}</text>
                        </view>
                    </view>
                    <image class="image_8 image_9" :src="pageData.userInfo.settingsIcon" @click="onSettingsClick" />
                </view>
                <view class="codefun-flex-col codefun-justify-start section_3">
                    <view class="codefun-flex-row">
                        <view
                            v-for="stat in pageData.statistics"
                            :key="stat.id"
                            class="codefun-flex-col codefun-items-center group_6 equal-division-item"
                            :class="{ 'codefun-ml-32': stat.id > 1 }"
                        >
                            <text class="font_4">{{ stat.value }}</text>
                            <text class="font_5 codefun-mt-16">{{ stat.label }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="codefun-flex-col codefun-relative group_7">
                <view class="codefun-flex-col">
                    <view
                        class="codefun-flex-row codefun-justify-between codefun-items-center section_12"
                        @click="onMessageCenterClick"
                    >
                        <view class="codefun-flex-row group_8">
                            <image class="image_10" :src="pageData.messageCenter.icon" />
                            <view class="codefun-flex-col group_9 codefun-ml-12">
                                <text class="codefun-self-start font">{{ pageData.messageCenter.title }}</text>
                                <view
                                    class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-stretch text-wrapper_2 codefun-mt-4"
                                >
                                    <text class="font_7">{{ pageData.messageCenter.description }}</text>
                                </view>
                            </view>
                        </view>
                        <view class="codefun-flex-row codefun-items-center group_10">
                            <view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
                                <text class="font_1 !lh-26rpx">{{ pageData.messageCenter.notificationCount }}</text>
                            </view>
                            <image class="image_11 codefun-ml-12" :src="pageData.messageCenter.arrowIcon" />
                        </view>
                    </view>
                    <view class="codefun-flex-row equal-division codefun-mt-12">
                        <view
                            v-for="(feature, index) in pageData.features"
                            :key="feature.id"
                            class="codefun-flex-col section_5 section_11"
                            :class="{ 'codefun-ml-12': index > 0 }"
                            @click="onFeatureClick(feature)"
                        >
                            <view class="codefun-flex-row codefun-self-stretch">
                                <view class="codefun-flex-row codefun-items-center codefun-flex-1">
                                    <image class="codefun-shrink-0 image_10" :src="feature.icon" />
                                    <view class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-ml-8">
                                        <text class="font">{{ feature.title }}</text>
                                        <text class="font_8 codefun-mt-8">{{ feature.count }}</text>
                                    </view>
                                </view>
                                <image
                                    class="codefun-shrink-0 codefun-self-start image_11"
                                    :class="{
                                        image_12: feature.id === 1,
                                        image_13: feature.id === 2,
                                        'codefun-ml-8': feature.id === 1,
                                    }"
                                    :src="feature.arrowIcon"
                                />
                            </view>
                            <text class="codefun-self-stretch font_7 codefun-mt-10">{{ feature.description }}</text>
                            <view
                                v-if="feature.status"
                                class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-start view mt-2"
                            >
                                <text class="font_6" :class="feature.statusClass">{{ feature.status }}</text>
                            </view>
                            <view
                                v-if="feature.actionText && feature.addIcon"
                                class="codefun-flex-row codefun-justify-evenly codefun-items-center codefun-self-start view_2 mt-2"
                            >
                                <image class="image_14" :src="feature.addIcon" />
                                <text class="font_3">{{ feature.actionText }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="codefun-flex-col codefun-mt-24">
                    <view class="codefun-flex-row codefun-justify-between codefun-items-center group_13">
                        <text class="font_2">{{ pageData.commonResources.title }}</text>
                        <text class="font_3 text_16" @click="onViewAllResources">{{
                            pageData.commonResources.actionText
                        }}</text>
                    </view>
                    <view class="codefun-flex-col list">
                        <view
                            class="codefun-flex-row codefun-justify-between codefun-items-center list-item codefun-mt-24"
                            v-for="resource in pageData.commonResources.resources"
                            :key="resource.id"
                            @click="onResourceClick(resource)"
                        >
                            <view class="codefun-flex-row">
                                <image class="image_15" :src="resource.icon" />
                                <view class="codefun-flex-col codefun-items-start group_14 codefun-ml-12">
                                    <text class="font_9">{{ resource.title }}</text>
                                    <text class="font_6 codefun-mt-12">{{ resource.size }}</text>
                                </view>
                            </view>
                            <view
                                class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
                                @click.stop="onDownloadClick(resource)"
                            >
                                <text class="font_10">{{ resource.actionText }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="codefun-flex-col codefun-mt-24">
                    <view class="codefun-flex-row codefun-justify-between codefun-items-baseline">
                        <text class="font_2">{{ pageData.myDevices.title }}</text>
                        <text class="font_3 text_22" @click="onMyDevicesTitleClick">{{
                            pageData.myDevices.actionText
                        }}</text>
                    </view>
                    <view class="codefun-flex-col codefun-mt-16">
                        <view class="codefun-flex-col section_12">
                            <view
                                class="codefun-flex-row codefun-justify-between codefun-items-center"
                                v-for="(device, index) in pageData.myDevices.devices"
                                :key="device.id"
                                :class="{ 'codefun-mt-16': index > 0 }"
                                @click="onDeviceClick(device)"
                            >
                                <view class="codefun-flex-row codefun-items-center">
                                    <image class="image_17" :src="device.image" />
                                    <view class="codefun-flex-col codefun-items-start codefun-ml-8">
                                        <text class="font_11">{{ device.name }}</text>
                                        <text class="font_6 codefun-mt-12">{{ device.lastConnection }}</text>
                                    </view>
                                </view>
                                <view class="codefun-flex-row codefun-items-center">
                                    <image class="codefun-shrink-0 image_18" :src="device.statusIcon" />
                                    <text
                                        class="font_6"
                                        :class="device.statusClass || ''"
                                        :style="{ color: device.status === '正常' ? '#13e000' : '#999999' }"
                                    >
                                        {{ device.status }}
                                    </text>
                                </view>
                            </view>
                        </view>
                        <view class="codefun-flex-col section_9 codefun-mt-12">
                            <view
                                class="codefun-flex-row codefun-justify-between codefun-items-center"
                                v-for="service in pageData.support.services"
                                :key="service.id"
                                @click="onServiceClick(service)"
                            >
                                <view class="codefun-flex-row codefun-items-center">
                                    <image class="codefun-shrink-0 image_19" :src="service.icon" />
                                    <text class="font_13 codefun-ml-8">{{ service.title }}</text>
                                </view>
                                <image class="image_20" :src="service.arrowIcon" />
                            </view>
                            <view class="codefun-flex-col codefun-mt-20">
                                <view
                                    class="codefun-flex-row codefun-justify-between codefun-items-center"
                                    v-for="help in pageData.support.helps"
                                    :key="help.id"
                                    :class="{ 'codefun-mt-20': help.id > 1 }"
                                    @click="onHelpClick(help)"
                                >
                                    <view class="codefun-flex-row codefun-items-center">
                                        <image class="codefun-shrink-0 image_21" :src="help.icon" />
                                        <text class="font_13 codefun-ml-8">{{ help.title }}</text>
                                    </view>
                                    <image class="image_20" :src="help.arrowIcon" />
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
    .page {
        background-color: #e6f5e8;
        mix-blend-mode: NOTTHROUGH;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%;
        padding-bottom: 44rpx;

        .group {
            .section {
                padding: 24rpx 20rpx 88rpx;
                background-image: url('/static/images/codefun/7a5dc4ee864fe55da98b41c14ee3b931.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                .group_2 {
                    margin-right: 8rpx;
                    padding: 0 12rpx;
                    .image {
                        border-radius: 64rpx;
                        width: 108rpx;
                        height: 42rpx;
                    }
                    .image_2 {
                        mix-blend-mode: NOTTHROUGH;
                        width: 34rpx;
                        height: 22rpx;
                    }
                    .image_3 {
                        mix-blend-mode: NOTTHROUGH;
                        width: 30rpx;
                        height: 22rpx;
                    }
                    .image_4 {
                        width: 48rpx;
                        height: 22rpx;
                    }
                }
                .group_3 {
                    margin-right: 8rpx;
                    margin-top: 42rpx;
                    padding: 16rpx 8rpx 0;
                    .text {
                        color: #ffffffe6;
                    }
                    .image_5 {
                        mix-blend-mode: NOTTHROUGH;
                        width: 44rpx;
                        height: 42rpx;
                    }
                    .pos {
                        position: absolute;
                        right: 8rpx;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
                .group_4 {
                    .image_6 {
                        mix-blend-mode: NOTTHROUGH;
                        border-radius: 50%;
                        width: 96rpx;
                        height: 96rpx;
                    }
                    .group_5 {
                        margin-top: 8rpx;
                        margin-bottom: 8rpx;
                        .text_2 {
                            color: #ffffff;
                        }
                        .section_2 {
                            padding: 8rpx;
                            background-color: #ffffff;
                            border-radius: 400rpx;
                            mix-blend-mode: NOTTHROUGH;
                            height: 42rpx;
                            .image_7 {
                                mix-blend-mode: NOTTHROUGH;
                                width: 18rpx;
                                height: 12rpx;
                            }
                            .text_3 {
                                font-size: 22rpx;
                                line-height: 22rpx;
                            }
                        }
                    }
                    .image_9 {
                        margin-right: 8rpx;
                    }
                }
                .section_3 {
                    margin-right: 16rpx;
                    margin-top: 24rpx;
                    padding: 32rpx 0;
                    background-color: #ffffff;
                    border-radius: 16rpx;
                    mix-blend-mode: NOTTHROUGH;
                    .group_6 {
                        flex: 1 1 186.88rpx;
                        .font_4 {
                            font-size: 36rpx;
                            line-height: 36rpx;
                            font-weight: 600;
                            color: #20602d;
                        }
                        .font_5 {
                            font-size: 28rpx;
                            line-height: 28rpx;
                            color: #4e5969;
                        }
                    }
                }
            }
            .group_7 {
                margin-top: -64rpx;
                padding: 0 20rpx;
                .section_12 {
                    margin-right: 16rpx;
                    padding: 24rpx;
                    background-color: #ffffff;
                    border-radius: 16rpx;
                    mix-blend-mode: NOTTHROUGH;
                    .group_8 {
                        overflow: hidden;
                        width: 411.4rpx;
                        height: 80rpx;
                        .group_9 {
                            padding-top: 8rpx;
                            overflow: hidden;
                            width: 307.4rpx;
                            height: 80rpx;
                            .text-wrapper_2 {
                                padding: 8rpx 0;
                                overflow: hidden;
                                width: 308rpx;
                            }
                        }
                    }
                    .group_10 {
                        margin-right: 8rpx;
                        .text-wrapper {
                            padding: 8rpx 0;
                            background-color: #ff5454;
                            border-radius: 20000rpx;
                            mix-blend-mode: NOTTHROUGH;
                            width: 40rpx;
                            height: 40rpx;
                        }
                    }
                    .image_17 {
                        border-radius: 24rpx;
                        width: 92rpx;
                        height: 92rpx;
                    }
                    .font_11 {
                        font-size: 28rpx;
                        line-height: 28rpx;
                        color: #15161a;
                    }
                    .image_18 {
                        width: 72rpx;
                        height: 12rpx;
                    }
                    .text_24 {
                        color: #13e000;
                    }
                }
                .equal-division {
                    margin-right: 16rpx;
                    .section_5 {
                        flex: 1 1 336rpx;
                        .font_8 {
                            font-size: 24rpx;
                            line-height: 24rpx;
                            color: #4cd964;
                        }
                        .image_12 {
                            margin-right: 8rpx;
                            margin-top: 8rpx;
                        }
                        .view {
                            padding: 12rpx 16rpx;
                            border-radius: 12rpx;
                            overflow: hidden;
                            background-color: #4fc5fd33;
                            mix-blend-mode: NOTTHROUGH;
                            .text_14 {
                                color: #4fbdfb;
                            }
                        }
                        .group_12 {
                            margin-left: 16rpx;
                        }
                        .image_13 {
                            margin: 8rpx 8rpx 0 40rpx;
                        }
                        .view_2 {
                            padding: 12rpx 16rpx;
                            border-radius: 12rpx;
                            overflow: hidden;
                            background-color: rgba(93, 182, 111, 0.2);
                            mix-blend-mode: NOTTHROUGH;
                            width: 152rpx;
                            .image_14 {
                                width: 20rpx;
                                height: 20rpx;
                            }
                        }
                    }
                    .section_11 {
                        padding: 20rpx 24rpx;
                        background-color: #ffffff;
                        border-radius: 16rpx;
                        mix-blend-mode: NOTTHROUGH;
                        height: 220rpx;
                    }
                }
                .image_10 {
                    border-radius: 16rpx;
                    width: 80rpx;
                    height: 80rpx;
                }
                .image_11 {
                    mix-blend-mode: NOTTHROUGH;
                    width: 12rpx;
                    height: 22rpx;
                }
                .font_7 {
                    font-size: 22rpx;
                    line-height: 22rpx;
                    color: #6b7280;
                }
                .group_13 {
                    padding-bottom: 32rpx;
                    .text_16 {
                        margin-right: 8rpx;
                    }
                }
                .list {
                    margin-right: 16rpx;
                    padding: 32rpx 24rpx;
                    background-color: #ffffff;
                    border-radius: 16rpx;
                    mix-blend-mode: NOTTHROUGH;
                    .list-item {
                        &:first-child {
                            margin-top: 0;
                        }
                        .image_15 {
                            width: 54rpx;
                            height: 72rpx;
                        }
                        .group_14 {
                            margin-top: 8rpx;
                            .font_9 {
                                font-size: 28rpx;
                                line-height: 28rpx;
                                color: #333333;
                            }
                        }
                        .text-wrapper_4 {
                            padding: 16rpx 0;
                            background-color: #5db66f26;
                            border-radius: 400rpx;
                            mix-blend-mode: NOTTHROUGH;
                            width: 136rpx;
                            .font_10 {
                                font-size: 24rpx;
                                line-height: 24rpx;
                                color: #16a34a;
                            }
                        }
                    }
                }
                .font_6 {
                    font-size: 24rpx;
                    line-height: 24rpx;
                    color: #999999;
                }
                .text_22 {
                    margin-right: 16rpx;
                }
                .section_9 {
                    margin-right: 16rpx;
                    padding: 28rpx 24rpx;
                    background-color: #ffffff;
                    border-radius: 16rpx;
                    mix-blend-mode: NOTTHROUGH;
                    .image_19 {
                        width: 40rpx;
                        height: 40rpx;
                    }
                    .font_13 {
                        font-size: 28rpx;
                        line-height: 28rpx;
                        color: #1d2129;
                    }
                    .image_21 {
                        width: 38rpx;
                        height: 38rpx;
                    }
                }
            }
            .font {
                font-size: 32rpx;
                line-height: 32rpx;
                color: #000000;
            }
            .font_1 {
                font-size: 24rpx;
                line-height: 24rpx;
                color: #ffffff;
            }
            .font_3 {
                font-size: 24rpx;
                line-height: 24rpx;
                color: #5db66f;
            }
            .font_2 {
                font-size: 32rpx;
                line-height: 32rpx;
                font-weight: 600;
                color: #333333;
            }
            .image_8 {
                width: 36rpx;
                height: 36rpx;
            }
        }
        .equal-division_2 {
            margin-right: 8rpx;
            .group_15 {
                flex: 1 1 148.4rpx;
                .font_14 {
                    font-size: 20rpx;
                    line-height: 20rpx;
                    color: #666666;
                }
            }
        }
        .section_6 {
            padding: 16rpx 0;
            background-color: #ffffff;
            mix-blend-mode: NOTTHROUGH;
            border-top: solid 1rpx #e7e7e7;
        }
        .equal-division-item {
            padding: 8rpx 0;
        }
        .image_20 {
            width: 32rpx;
            height: 32rpx;
        }
    }
</style>
