<script setup lang="ts">
    import { reactive, ref } from 'vue'
    import { onPullDownRefresh } from '@dcloudio/uni-app'
    import dayjs from 'dayjs'
    import { closeSplashscreenAndChechUpgrade } from '@/utils/upgrade'
    import * as WeatherAPI from '@/api/model/weather'
    import * as HomeAPI from '@/api/model/home'
    import * as UserAPI from '@/api/model/userInfo'
    import { useDictStore } from '@/store/modules/dict'
    import Navigate from '@/utils/page/navigate'
    import * as AreaDict from '@/utils/dict/area'
    import { getList } from '@/api/model/news'
    import { getList as getVideoList } from '@/api/model/knowledgeVideo'

    const dictStore = useDictStore()
    const model = reactive({
        // 湖南省人民政府
        location: '112.982931,28.116698',
    })

    // 位置获取频率控制
    const lastLocationTime = ref(0)
    const LOCATION_CACHE_TIME = 5 * 60 * 1000 // 5分钟缓存时间

    onLoad(() => {
        // 关闭启动页并检查更新
        closeSplashscreenAndChechUpgrade()
    })

    onShow(() => {
        // 检查是否需要重新获取位置（5分钟缓存）
        const currentTime = Date.now()
        const cachedLocation = uni.getStorageSync('location')

        // 添加延迟调用，避免频繁触发
        setTimeout(() => {
            if (
                cachedLocation &&
                cachedLocation.lon &&
                cachedLocation.lat &&
                currentTime - lastLocationTime.value < LOCATION_CACHE_TIME
            ) {
                // 使用缓存的位置数据
                console.log('使用缓存的位置数据')
                pageData.weather.lon = cachedLocation.lon
                pageData.weather.lat = cachedLocation.lat
                model.location = `${cachedLocation.lon},${cachedLocation.lat}`

                // 更新详细地址（仅在缓存存在时）
                if (cachedLocation.lat && cachedLocation.lon) {
                    UserAPI.location({ lat: cachedLocation.lat, lon: cachedLocation.lon })
                        .then((res) => {
                            console.log('UserAPI.location', res)
                            pageData.weather.detailedLocation = `${res.province}-${res.city}-${res.country}-${
                                res.road
                            }-${res.town}-${res.address}`
                        })
                        .catch(() => {
                            // 地址获取失败时使用默认显示
                            pageData.weather.detailedLocation = '获取中'
                        })
                }

                reloadWeather()
            } else {
                // 需要重新获取位置
                uni.getLocation({
                    type: 'wgs84',
                    success(res) {
                        console.log(`经度：${res.longitude}`)
                        console.log(`纬度：${res.latitude}`)

                        if (res.longitude === 0 || res.latitude === 0) {
                            console.log('无效的位置数据，使用缓存')
                            if (cachedLocation && cachedLocation.lon && cachedLocation.lat) {
                                pageData.weather.lon = cachedLocation.lon
                                pageData.weather.lat = cachedLocation.lat
                                model.location = `${cachedLocation.lon},${cachedLocation.lat}`
                                reloadWeather()
                            }
                            return
                        }

                        // 更新最后获取位置的时间
                        lastLocationTime.value = currentTime

                        UserAPI.location({ lat: res.latitude, lon: res.longitude })
                            .then((res) => {
                                console.log('UserAPI.location', res)
                                pageData.weather.detailedLocation = `${res.province}-${res.city}-${res.country}-${
                                    res.road
                                }-${res.town}-${res.address}`
                            })
                            .catch(() => {
                                // 地址获取失败时使用默认显示
                                pageData.weather.detailedLocation = '获取中'
                            })

                        pageData.weather.lon = res.longitude
                        pageData.weather.lat = res.latitude
                        uni.setStorageSync('location', {
                            // 缓存地址
                            lon: res.longitude,
                            lat: res.latitude,
                        })
                        model.location = `${res.longitude},${res.latitude}`
                        reloadWeather()
                    },
                    fail(res) {
                        console.log('获取位置失败:', res)

                        // 即使失败也尝试使用缓存数据
                        if (cachedLocation && cachedLocation.lon && cachedLocation.lat) {
                            console.log('获取位置失败，使用缓存数据')
                            pageData.weather.lon = cachedLocation.lon
                            pageData.weather.lat = cachedLocation.lat
                            model.location = `${cachedLocation.lon},${cachedLocation.lat}`
                            reloadWeather()
                        } else {
                            reloadWeather()
                            uni.showToast({
                                title: '获取地址失败，将导致部分功能不可用',
                                icon: 'none',
                            })
                        }
                    },
                })
            }
        }, 300) // 延迟300毫秒执行，避免频繁触发

        // 获取字典列表
        dictStore.setDictList()
        AreaDict.refreshDictData()

        // 查询金刚区数据
        getServiceItems()
        // 查询天气信息
        getWarningInfo()
        // 获取热点新闻
        getNews()
        // 服务展示窗
        getServiceStatsList()
        // 农技课堂
        getAgricultureClassList()
        // 预警信息
        getWarning()
    })

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

    function getWeatherRecommend(weather: string) {
        switch (weather) {
            case '晴':
                return '宜喷药'
            case '阴':
                return '宜少浇水'
            case '小雨':
                return '宜播种'
            case '中雨':
                return '注意防涝'
            default:
                return '无建议'
        }
    }

    // 刷新天气信息
    function reloadWeather() {
        WeatherAPI.now(model.location).then((res) => {
            console.log('WeatherAPI.now', res)

            pageData.weather.temperature = `${res.data.now.temp}°C`
            pageData.weather.condition = `${res.data.now.text} | ${getWeatherRecommend(res.data.now.text)}`
            pageData.weather.icon = `${res.data.now.icon}`
        })
        WeatherAPI.forecast(model.location).then((res) => {
            console.log('WeatherAPI.forecast', res)

            const weekDays = ['日', '一', '二', '三', '四', '五', '六']
            pageData.weather.forecast = res.data.daily.slice(1, 4).map((item: any, index: number) => {
                return {
                    day: index === 0 ? '明天' : `周${weekDays[dayjs(item.fxDate).day()]}`,
                    temp: `${item.tempMin}~${item.tempMax}°`,
                    icon: item.iconDay || item.iconNight,
                }
            })
        })
    }

    // 页面数据
    const pageData = reactive({
        // 顶部标题和搜索
        header: {
            title: $app.name,
            searchPlaceholder: '请输入搜索内容',
        },

        // 天气信息
        weather: {
            icon: '100',
            location: '长沙',
            detailedLocation: '获取中', // 详细位置信息
            date: `${dayjs().format('MM-DD')} ${dayjs().toLunarDay().getName()}`,
            temperature: '-°C',
            condition: '晴｜适宜喷药',
            forecast: [
                { day: '明天', temp: '24-28°', icon: '100' },
                { day: '周三', temp: '25-29°', icon: '101' },
                { day: '周四', temp: '26-31°', icon: '102' },
            ],
            warning: '',
            lon: null,
            lat: null,
        },

        // 功能菜单
        menuItems: [],

        // 其他服务
        serviceItems: [],

        // 预警信息
        warnings: [],

        // 新闻资讯
        newsItems: [],

        // 服务展示窗
        serviceStats: [
            // {
            //     id: 1,
            //     name: '农场入驻',
            //     value: '2,360',
            //     unit: '个',
            //     icon: '/static/images/codefun/15911306636a361a8dc16ce0283f3830.png',
            // },
            // {
            //     id: 2,
            //     name: '空闲农机',
            //     value: '126',
            //     unit: '台',
            //     icon: '/static/images/codefun/1d0cd168eeffbaf37a90aa949c6ad806.png',
            // },
            // {
            //     id: 3,
            //     name: '产销对接',
            //     value: '156',
            //     unit: '笔',
            //     icon: '/static/images/codefun/24dd00386672f240ef00394b746c2ff0.png',
            // },
            // {
            //     id: 4,
            //     name: '服务农户',
            //     value: '12,580',
            //     unit: '人',
            //     icon: '/static/images/codefun/3fd6a50eaf22431687a6151df0581156.png',
            // },
            // {
            //     id: 5,
            //     name: '覆盖面积',
            //     value: '268',
            //     unit: 'km',
            //     icon: '/static/images/codefun/87773a17a1b64dc686bf935708262002.png',
            // },
            // {
            //     id: 6,
            //     name: '覆盖区县',
            //     value: '21',
            //     unit: '个',
            //     icon: '/static/images/codefun/329a4404092545f2924ad095c531cc66.png',
            // },
        ],

        // 农技课堂
        agricultureClass: {
            title: '',
            // expert: '张教授',
            time: '',
            videoList: [],
        },
        current: 0,
    })

    function getServiceItems() {
        HomeAPI.zoneList({
            pageNo: 1,
            pageSize: 8,
            status: 1,
            type: 1,
        }).then((res) => {
            const { records } = res
            pageData.serviceItems = []
            pageData.serviceItems = records
        })
    }
    function getWarningInfo() {
        if (!pageData.weather.lon || !pageData.weather.lat) {
            return
        }

        HomeAPI.warningInfo({
            lon: pageData.weather.lon,
            lat: pageData.weather.lat,
        }).then((res) => {
            pageData.weather.warning = res[0].criteria
        })
    }

    function getServiceStatsList() {
        HomeAPI.serviceStatsList({
            status: 1,
        }).then((res) => {
            const { records } = res
            pageData.serviceStats = records
        })
    }
    function getAgricultureClassList() {
        getVideoList({ pageNo: 1, pageSize: 3, status: 1 }).then((res) => {
            const { records } = res
            pageData.agricultureClass.videoList = records
            pageData.agricultureClass.title = records[0]?.title
        })
    }

    function getWarning() {
        HomeAPI.warning().then((res) => {
            const { records } = res
            pageData.warnings = records
        })
    }

    function getNews() {
        getList({ pageNo: 1, pageSize: 2 }).then((res) => {
            const { records } = res
            pageData.newsItems = records
        })
    }

    // 菜单点击事件
    function onMenuItemClick(item: any) {
        console.log('点击菜单项:', item)
        // 在这里添加具体的菜单点击逻辑

        if (item.jump_target?.startsWith('/')) {
            const tabbarKeyWords = [
                '/pages/shouye/shouye',
                '/pages/nongchang/nongchang',
                '/pages/fuwu/fuwu',
                '/pages/chanxiao/chanxiao',
            ]
            if (tabbarKeyWords.includes(item.jump_target)) {
                uni.switchTab({
                    url: item.jump_target,
                })
            } else {
                Navigate.to(item.jump_target).catch(() => {
                    Message.alert(`${item.jump_target} 页面打开失败`, item.name)
                })
            }
        } else if (item.jump_target?.startsWith('http')) {
            Navigate.webview(item.jump_target, item.name)
        } else {
            if (item.jump_target?.startsWith('#')) {
                const value = item.jump_target?.substring(1)
                if (/^[+-]?\d+(\.\d+)?$/.test(value)) {
                    uni.pageScrollTo({
                        scrollTop: Number(value),
                    })
                } else {
                    uni.pageScrollTo({
                        selector: item.jump_target,
                    })
                }
            } else {
                uni.showModal({
                    title: item.name,
                    content: '功能暂未开放',
                })
            }
        }
    }

    // 查看更多农技课堂
    function onViewMoreClass() {
        uni.navigateTo({
            url: '/pages/knowledgeVideo/index',
        })
    }

    // 轮播视频切换的时候触发
    function handleChangeVideo(e: any) {
        const currentIndex = e.detail.current
        pageData.current = currentIndex
        pageData.agricultureClass.title = pageData.agricultureClass.videoList[currentIndex]?.title

        console.log('当前索引:', currentIndex)

        // // 延迟处理视频切换，避免卡顿
        // setTimeout(() => {
        //     // 停止所有其他视频的播放（只暂停，不重置位置）
        //     pageData.agricultureClass.videoList.forEach((_, index) => {
        //         if (index !== currentIndex) {
        //             try {
        //                 const videoContext = uni.createVideoContext(`video${index}`)
        //                 videoContext.pause()
        //                 // 不重置到开头，保留播放位置
        //             } catch (error) {
        //                 console.log('停止视频失败:', error)
        //             }
        //         } else {
        //             // 当前视频：尝试播放
        //             try {
        //                 const videoContext = uni.createVideoContext(`video${index}`)
        //                 // 自动播放当前视频
        //                 videoContext.play()
        //             } catch (error) {
        //                 console.log('播放视频失败:', error)
        //             }
        //         }
        //     })
        // }, 100)
    }

    // 处理swiper过渡动画
    function handleTransition(e: any) {
        // 过渡期间可以做一些优化处理
        console.log('swiper过渡中...')
    }

    // 视频暂停事件处理
    function handleVideoPause(currentIndex) {
        console.log(`视频${currentIndex}暂停`)
    }

    function handleFullscreenChange(e: any, index) {
        console.log(`视频${index}全屏状态改变`)
        if (!e.detail.fullScreen) {
            const videoContext = uni.createVideoContext(`video${index}`)
            videoContext.pause()
        }
    }

    // 获取视频时长
    function handleMetadataLoaded(e: any) {
        pageData.agricultureClass.time = e.target.duration
    }
    // 解决轮播视频切换时，上一个视频不停止播放的问题
    function handleVideoPlay(currentIndex) {
        pageData.agricultureClass.videoList.forEach((_, index) => {
            if (index !== currentIndex) {
                const videoContext = uni.createVideoContext(`video${index}`)
                videoContext.pause()
            }
        })
    }

    function playVideo(index) {
        const videoContext = uni.createVideoContext(`video${index}`)
        videoContext.requestFullScreen({ direction: 0 })
        videoContext.play()
    }

    function onClickWarning(item) {
        console.log('点击预警信息:', item)
        // 在这里添加具体的点击逻辑

        uni.showModal({
            title: '预警信息',
            content: item.title,
            showCancel: false,
        })
    }
    function toNewsList() {
        uni.navigateTo({
            url: '/pages/news/index',
        })
    }

    function toNewsDetail(item) {
        uni.navigateTo({
            url: `/pages/news/detail?id=${item.id}`,
        })
    }

    onHide(() => {
        // 停止所有其他视频的播放（只暂停，不重置位置）
        pageData.agricultureClass.videoList.forEach((_, index) => {
            try {
                const videoContext = uni.createVideoContext(`video${index}`)
                videoContext.pause()
                // 不重置到开头，保留播放位置
            } catch (error) {
                console.log('停止视频失败:', error)
            }
        })
    })
</script>

<template>
    <view class="codefun-flex-col page">
        <view class="codefun-flex-col group">
            <view class="codefun-flex-row flex-center section justify-between">
                <view class="flex-center gap-2">
                    <image class="w-64 h-64" src="/static/images/home/icon.png" />
                    <text class="text">{{ pageData.header.title }}</text>
                </view>
                <text class="text" style="font-family: alimamashuheiti">湖南省</text>
            </view>
            <view class="codefun-flex-col codefun-relative group_3">
                <view class="codefun-flex-col">
                    <view class="codefun-flex-col codefun-self-stretch group_4">
                        <view class="codefun-flex-col section_3">
                            <view class="codefun-flex-row codefun-justify-between" style="align-items: center">
                                <view
                                    class="codefun-flex-row codefun-items-center codefun-relative codefun-overflow-hidden"
                                >
                                    <!-- 定位图标 -->
                                    <image
                                        class="codefun-shrink-0 image_13 codefun-mr-4"
                                        src="/static/images/local-address.png"
                                    />
                                    <!-- 滚动位置信息 -->
                                    <view
                                        class="codefun-flex-row codefun-items-center codefun-overflow-hidden text-wrapper_2"
                                        style="width: 400rpx"
                                    >
                                        <up-notice-bar
                                            v-if="pageData.weather.detailedLocation != '获取中'"
                                            icon=""
                                            bgColor="#FFFFFF00"
                                            color="#5db66f"
                                            class="text_3"
                                            :text="pageData.weather.detailedLocation"
                                            scrollable
                                            :speed="50"
                                            style="width: 100%; height: auto"
                                        />
                                        <view v-else class="text_3">{{ pageData.weather.detailedLocation }}</view>
                                    </view>
                                    <!-- <image
                                        class="image_6 codefun-ml-6"
                                        src="/static/images/codefun/a2f290fb1b65d093b844e73ddae1aed9.png"
                                    /> -->
                                </view>
                                <view class="codefun-flex-col codefun-justify-start codefun-items-start text-wrapper_2">
                                    <text class="text_3">{{ pageData.weather.date }}</text>
                                </view>
                            </view>
                            <view class="codefun-flex-row group_5">
                                <view class="codefun-flex-row codefun-items-center group_8">
                                    <image
                                        class="codefun-shrink-0 image_8"
                                        :src="`/static/images/weather/${pageData.weather.icon}.svg`"
                                    />
                                    <view class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-ml-10">
                                        <text class="text_5">{{ pageData.weather.temperature }}</text>
                                        <text class="font_2 text_8 !text-24rpx codefun-mt-16">{{
                                            pageData.weather.condition
                                        }}</text>
                                    </view>
                                </view>
                                <view class="codefun-flex-col group_6 ml-2">
                                    <view class="codefun-flex-row codefun-justify-between group_7">
                                        <!-- <image
                                            class="image_9"
                                            src="/static/images/codefun/78e80b7080b127271004edad2f6e6234.png"
                                        />
                                        <image class="image_7" src="/static/images/codefun/cloud.png" />
                                        <image
                                            class="image_7"
                                            src="/static/images/codefun/c785818f2c08b7682aa5188542b2dede.png"
                                        /> -->

                                        <image
                                            class="image_7"
                                            :src="`/static/images/weather/${forecast.icon}.svg`"
                                            v-for="forecast in pageData.weather.forecast"
                                            :key="forecast.day"
                                        />
                                    </view>
                                    <view class="codefun-flex-row codefun-justify-between codefun-items-center group_9">
                                        <view
                                            class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_9"
                                        >
                                            <text class="font_3 text_6">{{ pageData.weather.forecast[0].day }}</text>
                                        </view>
                                        <view
                                            class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3"
                                        >
                                            <text class="font_3 text_52">{{ pageData.weather.forecast[1].day }}</text>
                                        </view>
                                        <text class="font_3 text_7">{{ pageData.weather.forecast[2].day }}</text>
                                    </view>
                                    <view class="codefun-flex-row codefun-justify-center">
                                        <view
                                            class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
                                        >
                                            <text class="font_4 text_9">{{ pageData.weather.forecast[0].temp }}</text>
                                        </view>
                                        <view
                                            class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_1 ml-17"
                                        >
                                            <text class="font_4 text_10">{{ pageData.weather.forecast[1].temp }}</text>
                                        </view>
                                        <view
                                            class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4 ml-17"
                                        >
                                            <text class="font_4 text_9">{{ pageData.weather.forecast[2].temp }}</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view class="mt-2 mb-3" v-if="pageData.weather.warning">
                                <fui-notice-bar
                                    :content="pageData.weather.warning"
                                    scrollable
                                    :padding="['0', '32rpx']"
                                >
                                    <view class="fui-icon__box">
                                        <fui-icon name="notice" :size="36" color="#FF2B2B" />
                                    </view>
                                </fui-notice-bar>
                            </view>
                            <!-- <view class="codefun-flex-row section_4" v-if="pageData.weather.warning">
                                <image
                                    class="codefun-shrink-0 image_10"
                                    src="/static/images/codefun/344155285176a7ac7ccd670a2a1daf19.png"
                                />
                                <view
                                    class="codefun-flex-col codefun-justify-start codefun-shrink-0 text-wrapper_5 codefun-ml-6"
                                >
                                    <text class="text_12">{{ pageData.weather.warning }}</text>
                                </view>
                            </view>
                            </view> -->
                        </view>
                        <view class="codefun-flex-row section_5">
                            <view
                                v-show="item.status"
                                v-for="item in pageData.serviceItems"
                                :key="item.id"
                                class="codefun-flex-col codefun-items-center group_10"
                                @click="onMenuItemClick(item)"
                            >
                                <image class="image_11" :src="item.icon_url" />
                                <text class="font_2 mt-11">{{ item.name }}</text>
                            </view>
                        </view>
                        <swiper
                            :autoplay="true"
                            :interval="5000"
                            :duration="500"
                            :circular="true"
                            :vertical="true"
                            :indicator-dots="false"
                            class="codefun-flex-row codefun-justify-between codefun-items-center section_6 warn-scroll"
                            v-if="pageData.warnings.length"
                        >
                            <swiper-item
                                id="scroll-view-content"
                                v-for="item of pageData.warnings"
                                :key="item.id"
                                class="codefun-flex-col"
                                @click="onClickWarning(item)"
                            >
                                <view class="codefun-flex-row codefun-items-baseline" style="align-items: center">
                                    <view class="font_5 text_17">最新预警</view>
                                    <view
                                        class="codefun-flex-row"
                                        style="
                                            flex-flow: column;
                                            justify-content: space-around;
                                            height: 90rpx;
                                            width: calc(100% - 110rpx);
                                        "
                                    >
                                        <view
                                            class="font_2 text_18 ml-11"
                                            style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
                                            >{{ item.title }}</view
                                        >
                                        <text class="text-26 text_20 text_21 ml-11">{{ item.warningDate }}</text>
                                    </view>
                                    <image
                                        class="warn-image"
                                        src="/static/images/codefun/64d85a99ca3de5fab9ce0e8dc71aa791.png"
                                    />
                                </view>
                            </swiper-item>
                        </swiper>
                    </view>
                    <view class="codefun-self-end section_7" />
                </view>
                <view class="codefun-flex-row codefun-justify-between codefun-items-baseline group_12">
                    <text class="font_6">热点新闻</text>
                    <text class="text-28 font-extralight color-#5DB66F mr-4" @click="toNewsList">
                        更多<fui-icon name="right" size="30" color="#5DB66F" />
                    </text>
                </view>
                <view class="codefun-flex-col equal-division bg-#fff border-rd-lg">
                    <view
                        v-for="news in pageData.newsItems"
                        :key="news.id"
                        class="w-full h-auto flex flex-row justify-around p-2"
                        @click="toNewsDetail(news)"
                    >
                        <view class="w-70% flex flex-col justify-between" :class="news.image ? 'w-70%' : 'w-full'">
                            <view class="ellipsis-multiline text-25 color-#333333 mb-1">{{ news.title }}</view>
                            <view class="text-25 color-#686868">{{
                                dayjs(news.publishDate).format('YYYY年MM月DD日')
                            }}</view>
                        </view>
                        <view v-show="news.image" class="w-30% h-150">
                            <image class="w-full h-full border-rd" :src="news.image" />
                        </view>
                    </view>
                </view>
                <view class="codefun-flex-row codefun-justify-between codefun-items-baseline group_15">
                    <text class="font_12 text_28">服务展示窗</text>
                    <!-- <text class="font_7 text_20 text_29">实时数据</text> -->
                </view>
                <view class="codefun-flex-row equal-division_2 group_16">
                    <view
                        v-for="stat in pageData.serviceStats"
                        :key="stat.id"
                        class="codefun-flex-col section_12 section_19"
                    >
                        <view
                            class="codefun-flex-row codefun-justify-center codefun-items-center codefun-self-stretch codefun-relative group_27"
                        >
                            <image class="image_5 mr-1" :class="`pos_${stat.id}`" :src="stat.icon" />
                            <text
                                class="font_13"
                                :class="`text_${stat.id === 1 ? 30 : stat.id === 2 ? 1 : stat.id > 4 ? 46 : 37}`"
                            >
                                {{ stat.name }}
                            </text>
                        </view>
                        <view class="codefun-flex-row codefun-justify-center codefun-items-baseline mt-11 group_30">
                            <text class="font_12 text_37">{{ stat.num }}</text>
                            <text class="font_7 text_31">{{ stat.unit }}</text>
                        </view>
                    </view>
                </view>
                <view class="codefun-flex-row codefun-justify-between codefun-items-center group_19">
                    <text class="font_6 text_32">农技课堂</text>
                    <text class="font_7 text_33" @click="onViewMoreClass">查看全部</text>
                </view>
                <view class="codefun-flex-col section_13 !relative">
                    <fui-swiper-dot
                        :items="pageData.agricultureClass.videoList"
                        :current="pageData.current"
                        :styles="{
                            height: 10,
                            activeWidth: 40,
                            background: '#dff0e2',
                            activeBackground: '#5db66f',
                            bottom: 10,
                        }"
                    >
                        <swiper
                            class="fui-banner__wrap"
                            circular
                            :indicator-dots="false"
                            :autoplay="false"
                            :interval="8000"
                            :duration="300"
                            :disable-touch="false"
                            :touch-angle="45"
                            :threshold="50"
                            @change="handleChangeVideo"
                            @transition="handleTransition"
                        >
                            <swiper-item v-for="(video, index) in pageData.agricultureClass.videoList" :key="index">
                                <image
                                    :src="video.thumbnailPath"
                                    mode="scaleToFill"
                                    class="w-654rpx h-358rpx"
                                    @click="playVideo(index)"
                                />
                                <video
                                    :id="`video${index}`"
                                    :src="video.url"
                                    :poster="video.thumbnailPath"
                                    :title="video.title"
                                    :controls="true"
                                    style="width: 654rpx; height: 358rpx"
                                    :autoplay="false"
                                    :muted="false"
                                    :loop="true"
                                    :show-play-btn="true"
                                    :show-center-play-btn="true"
                                    :enable-progress-gesture="true"
                                    :show-progress="true"
                                    :direction="0"
                                    object-fit="contain"
                                    @loadedmetadata="handleMetadataLoaded"
                                    @play="handleVideoPlay(index)"
                                    @pause="handleVideoPause(index)"
                                    @fullscreenchange="handleFullscreenChange($event, index)"
                                    class="!hidden"
                                ></video>
                                <view class="describe relative">
                                    <text class="codefun-self-start font text_34">{{
                                        pageData.agricultureClass.title
                                    }}</text>
                                    <view
                                        class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch mt-13"
                                    >
                                        <image
                                            src="/static/images/codefun/play.png"
                                            mode="scaleToFill"
                                            class="absolute w-64 h-64 top--150 left-275"
                                            @click="playVideo(index)"
                                        />
                                        <text class="font_14 text_36">{{ pageData.agricultureClass.time }}</text>
                                    </view>
                                </view>
                            </swiper-item>
                        </swiper>
                    </fui-swiper-dot>
                </view>
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
    .ml-17 {
        margin-left: 34rpx;
    }

    .ml-43 {
        margin-left: 86rpx;
    }

    .mt-13 {
        margin-top: 26rpx;
    }

    .ml-11 {
        margin-left: 22rpx;
    }

    .ml-3 {
        margin-left: 6rpx;
    }

    .ml-19 {
        margin-left: 38rpx;
    }

    .mt-11 {
        margin-top: 22rpx;
    }

    .ml-5 {
        margin-left: 10rpx;
    }

    .mt-3 {
        margin-top: 6rpx;
    }

    .page {
        background-color: #e6f5e8;
        mix-blend-mode: NOTTHROUGH;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        height: auto !important;
        padding-bottom: 20rpx;

        .group {
            .section {
                padding: 10rpx 28rpx 220rpx;
                padding-top: calc(10rpx + var(--status-bar-height));
                background-image: url('/static/images/codefun/1086a098c06f7f52e77bd7a646747a13.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;

                .group_2 {
                    padding-left: 16rpx;

                    .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;
                    }
                }

                .text {
                    color: #ffffffe6;
                    font-size: 36rpx;
                    letter-spacing: 4.32rpx;
                    font-family: meixin;
                }

                .section_2 {
                    margin-top: 25.8rpx;
                    padding: 14rpx 18rpx 16rpx;
                    background-color: #ffffff4d;
                    border-radius: 1998rpx;
                    mix-blend-mode: NOTTHROUGH;
                    border: solid 1rpx #ffffff7d;

                    .text_2 {
                        line-height: 25.5rpx;
                    }
                }
            }

            .group_3 {
                margin-top: -200rpx;
                padding-left: 28rpx;

                .group_4 {
                    // height: 864rpx;
                    .section_3 {
                        width: 694rpx;
                        // margin-right: 28rpx;
                        padding: 20rpx 28rpx 58rpx;
                        background-image: linear-gradient(180deg, #dcfce7 0%, #f8fef9 100%);
                        border-radius: 16rpx;
                        mix-blend-mode: NOTTHROUGH;

                        .text-wrapper {
                            padding: 7.6rpx 0 6.76rpx;
                            overflow: hidden;
                            width: 56rpx;
                            height: 40rpx;

                            .text_4 {
                                color: #5db66f;
                                line-height: 25.64rpx;
                            }
                        }

                        .image_6 {
                            width: 16rpx;
                            height: 10rpx;
                        }

                        .text-wrapper_2 {
                            overflow: hidden;
                            // width: 140rpx;
                            // height: 40rpx;

                            .text_3 {
                                margin-left: 9.28rpx;
                                color: #5db66f;
                                font-size: 28rpx;
                            }
                        }

                        .group_5 {
                            margin-top: 16rpx;

                            .group_8 {
                                margin: 4rpx 0;
                                flex: 1 1 300.68rpx;

                                .image_8 {
                                    mix-blend-mode: NOTTHROUGH;
                                    width: 112rpx;
                                    height: 112rpx;
                                }

                                .text_5 {
                                    color: #06280b;
                                    font-size: 48rpx;
                                    line-height: 34.28rpx;
                                }

                                .text_8 {
                                    color: #555555;
                                    line-height: 26.88rpx;
                                }
                            }

                            .group_6 {
                                flex: 1 1 300.68rpx;

                                .group_7 {
                                    padding: 0 8rpx;

                                    .image_9 {
                                        margin-top: 4rpx;
                                        width: 54rpx;
                                        height: 42rpx;
                                    }

                                    .image_7 {
                                        margin-right: 4rpx;
                                        margin-bottom: 4rpx;
                                        width: 56rpx;
                                        height: 42rpx;
                                    }
                                }

                                .group_9 {
                                    margin-top: 10rpx;
                                    padding: 0 12rpx;

                                    .text-wrapper_9 {
                                        padding: 6.8rpx 0 4.6rpx;
                                        overflow: hidden;
                                        width: 48rpx;
                                        height: 32rpx;

                                        .text_6 {
                                            line-height: 20.6rpx;
                                        }
                                    }

                                    .text-wrapper_3 {
                                        padding: 6.54rpx 0 4.92rpx;
                                        overflow: hidden;
                                        width: 48rpx;
                                        height: 32rpx;

                                        .text_52 {
                                            line-height: 20.54rpx;
                                        }
                                    }

                                    .font_3 {
                                        font-size: 24rpx;
                                        line-height: 22.04rpx;
                                        color: #6b7280;
                                    }

                                    .text_7 {
                                        margin-right: 9rpx;
                                        line-height: 20.54rpx;
                                    }
                                }

                                .text-wrapper_4 {
                                    padding: 7.84rpx 0 7.02rpx;
                                    overflow: hidden;
                                    width: 76rpx;
                                    height: 32rpx;

                                    .text_9 {
                                        line-height: 17.14rpx;
                                    }
                                }

                                .text-wrapper_1 {
                                    padding: 7.84rpx 0 6.98rpx;
                                    overflow: hidden;
                                    width: 76rpx;
                                    height: 32rpx;

                                    .text_10 {
                                        line-height: 17.18rpx;
                                    }
                                }
                            }
                        }

                        .section_4 {
                            margin-top: 30rpx;
                            padding: 10rpx 20rpx;
                            background-color: #fb81461f;
                            border-radius: 12rpx;
                            mix-blend-mode: NOTTHROUGH;

                            .image_10 {
                                width: 40rpx;
                                height: 40rpx;
                            }

                            .text-wrapper_5 {
                                margin-right: 180rpx;
                                width: 90%;
                                height: 40rpx;

                                .text_12 {
                                    margin-left: 2.3rpx;
                                    margin-right: 13.7rpx;
                                    font-size: 28rpx;
                                    line-height: 40rpx;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    /*  超出以 ...显示 */
                                    display: -webkit-box;
                                    -webkit-line-clamp: 1;
                                    /* // 显示1行 */
                                    -webkit-box-orient: vertical;
                                    color: #ff612c;
                                }
                            }
                        }
                    }

                    .section_5 {
                        flex-wrap: wrap;
                        margin-right: 28rpx;
                        margin-top: -34rpx;
                        padding: 30rpx 0 30rpx;
                        background-color: #ffffff;
                        border-radius: 16rpx;

                        .image_11 {
                            border-radius: 88rpx;
                            width: 96rpx;
                            height: 96rpx;
                        }

                        .group_10 {
                            margin-bottom: 15rpx;
                            flex: 1 1 173.5rpx;

                            .text_50 {
                                line-height: 25.76rpx;
                            }

                            .text_13 {
                                line-height: 24.58rpx;
                            }

                            .text_51 {
                                line-height: 25.78rpx;
                            }
                        }

                        .group_43 {
                            padding-bottom: 10rpx;
                        }

                        .group_42 {
                            padding-bottom: 10rpx;
                        }

                        .group_37 {
                            padding-bottom: 10.06rpx;
                        }

                        .group_40 {
                            padding-bottom: 10.06rpx;
                        }

                        .group_11 {
                            padding-left: 31.3rpx;
                            padding-right: 25.86rpx;

                            .group_38 {
                                padding: 0 9.7rpx;

                                .image_12 {
                                    border-radius: 88rpx;
                                    mix-blend-mode: NOTTHROUGH;
                                    width: 88rpx;
                                    height: 88rpx;
                                }
                            }

                            .text_14 {
                                line-height: 25.62rpx;
                            }

                            .text_15 {
                                line-height: 25.76rpx;
                            }

                            .text_16 {
                                line-height: 25.78rpx;
                            }
                        }
                    }

                    .font_2 {
                        font-size: 28rpx;
                        line-height: 25.7rpx;
                        color: #1d2129;
                    }

                    .section_6 {
                        margin-right: 28rpx;
                        margin-top: 24rpx;
                        padding: 18rpx 18rpx 12.32rpx 22.78rpx;
                        background-color: #ffffff;
                        border-radius: 16rpx;
                        mix-blend-mode: NOTTHROUGH;

                        .font_5 {
                            font-size: 28rpx;
                            line-height: 44rpx;
                            color: #5db66f;
                        }

                        .text_17 {
                            width: 80rpx;
                            font-size: 30rpx;
                            font-family: alimamashuheiti;
                            word-break: break-all;
                            white-space: normal;
                            line-height: 1.2;
                            display: block;
                            text-align: center;
                        }

                        .text_18 {
                            color: #000000;
                            line-height: 26.16rpx;
                        }

                        .text_19 {
                            font-size: 30rpx;
                            font-family: alimamashuheiti;
                        }

                        .text_21 {
                            line-height: 17.18rpx;
                        }
                    }
                    .warn-scroll {
                        width: 655rpx;
                        height: 90rpx;

                        .warn-image {
                            border-radius: 16rpx;
                            mix-blend-mode: NOTTHROUGH;
                            width: 32rpx;
                            height: 32rpx;
                        }
                    }
                    .image_13 {
                        border-radius: 16rpx;
                        mix-blend-mode: NOTTHROUGH;
                        width: 32rpx;
                        height: 32rpx;
                    }
                    .codefun-mr-4 {
                        margin-right: 10rpx;
                    }
                    .font_4 {
                        font-size: 20rpx;
                        line-height: 18.3rpx;
                        color: #000000;
                    }
                }

                .section_7 {
                    margin-right: 8rpx;
                    background-color: #00000000;
                    width: 24rpx;
                    height: 24rpx;
                }

                .group_12 {
                    margin-top: 17.72rpx;

                    .text_22 {
                        margin-right: 30.72rpx;
                        color: #33333399;
                        line-height: 22.16rpx;
                    }
                }

                .equal-division {
                    margin-right: 28rpx;
                    margin-top: 32.72rpx;

                    .group_13 {
                        flex: 0 0 33.33%;
                        text-align: center;

                        .group_41 {
                            padding: 10rpx 0 4.92rpx;
                            width: 106rpx;
                        }

                        .section_10 {
                            margin: 24rpx 0 0 0;
                            padding: 0 14rpx;
                            background-color: #da14141a;
                            border-radius: 1998rpx;
                            mix-blend-mode: NOTTHROUGH;
                        }

                        .text-wrapper_6 {
                            margin-top: 40rpx;
                            padding: 17.3rpx 0 16.66rpx;
                            background-color: #5db66f29;
                            border-radius: 1998rpx;
                            mix-blend-mode: NOTTHROUGH;

                            .font_11 {
                                font-size: 24rpx;
                                line-height: 22.04rpx;
                                color: #16a34a;
                            }
                        }

                        .group_20 {
                            padding: 10rpx 0 4.92rpx;
                            width: 100rpx;
                        }

                        .font_8 {
                            font-size: 28rpx;
                            line-height: 72rpx;
                            color: #333333;
                        }

                        .text_23 {
                            width: 100%;
                        }

                        .font_9 {
                            font-size: 36rpx;
                            line-height: 25.7rpx;
                            color: #f26464;
                        }

                        .group_1 {
                            padding: 10rpx 0 4.92rpx;

                            // width: 106rpx;
                            .text_24 {
                                color: #5db66f;
                            }
                        }

                        .section_11 {
                            margin: 24rpx 0 0 0;
                            padding: 0 14rpx;
                            background-color: rgba(93, 182, 111, 0.2);
                            border-radius: 1998rpx;
                            mix-blend-mode: NOTTHROUGH;

                            .text_26 {
                                color: #5db66f;
                                padding-left: 10rpx;
                            }
                        }

                        .image_14 {
                            mix-blend-mode: NOTTHROUGH;
                            width: 28rpx;
                            height: 16rpx;
                            margin: 0 8rpx;
                        }

                        .font_10 {
                            font-size: 24rpx;
                            line-height: 56rpx;
                            color: #f44336;
                        }
                    }

                    .group_17 {
                        padding: 0 31.34rpx 12rpx 32rpx;
                    }

                    .section_9 {
                        flex-shrink: 0;
                        margin: 10.62rpx 0 10rpx;
                    }

                    .horiz-divider {
                        background-color: #fafafa;
                        width: 2rpx;
                        height: 288rpx;
                    }

                    .group_39 {
                        padding: 0 30.66rpx 12rpx 32.66rpx;
                    }

                    .group_21 {
                        padding: 0 30rpx 12rpx 33.34rpx;
                    }
                }

                .section_8 {
                    padding: 16rpx 0 16rpx;
                    background-color: #ffffff;
                    border-radius: 16rpx;
                    mix-blend-mode: NOTTHROUGH;
                    overflow: scroll;
                }

                .group_15 {
                    margin-top: 41.54rpx;

                    .text_28 {
                        line-height: 29.56rpx;
                    }

                    .text_29 {
                        margin-right: 24.44rpx;
                    }
                }

                .font_7 {
                    font-size: 24rpx;
                    line-height: 22.04rpx;
                    color: #000000;
                }

                .text_20 {
                    opacity: 0.6;
                }

                .equal-division_2 {
                    margin-top: 32.9rpx;

                    .section_12 {
                        flex: 0 0 calc(33.33% - 14rpx);

                        .group_25 {
                            padding: 5.24rpx 0 4.8rpx;

                            .pos_4 {
                                position: absolute;
                                left: 0;
                                top: 50%;
                                transform: translateY(-50%);
                            }

                            .text_30 {
                                line-height: 21.96rpx;
                            }
                        }

                        .group_28 {
                            margin-left: 5.82rpx;
                            line-height: 26.88rpx;

                            .text_47 {
                                line-height: 26.88rpx;
                            }

                            .text_49 {
                                line-height: 21.62rpx;
                            }
                        }

                        .group_26 {
                            padding: 5.2rpx 0 4.72rpx;

                            .pos_5 {
                                position: absolute;
                                left: 0;
                                top: 50%;
                                transform: translateY(-50%);
                            }

                            .text_1 {
                                line-height: 22.08rpx;
                            }
                        }

                        .font_13 {
                            font-size: 24rpx;
                            line-height: 22.04rpx;
                            color: #666666;
                        }

                        .group_18 {
                            margin-left: 5.24rpx;
                            line-height: 22.84rpx;

                            .text_48 {
                                line-height: 22.84rpx;
                            }
                        }

                        .group_27 {
                            padding: 5.3rpx 0 4.52rpx;

                            .text_46 {
                                line-height: 22.18rpx;
                            }
                        }

                        .group_30 {
                            margin-left: 7.24rpx;
                            line-height: 22.84rpx;

                            .text_37 {
                                line-height: 22.84rpx;
                            }

                            .text_31 {
                                line-height: 21.46rpx;
                            }
                        }
                    }

                    .section_18 {
                        padding: 32rpx 20rpx 38rpx;
                        background-color: #ffffff;
                        border-radius: 8rpx;
                        mix-blend-mode: NOTTHROUGH;
                        height: 150rpx;
                    }

                    .section_1 {
                        padding: 32rpx 22rpx 39.98rpx;
                        background-color: #ffffff;
                        border-radius: 8rpx;
                        mix-blend-mode: NOTTHROUGH;
                        height: 150rpx;
                    }

                    .section_19 {
                        padding: 32rpx 20rpx 40.4rpx;
                        background-color: #ffffff;
                        border-radius: 8rpx;
                        mix-blend-mode: NOTTHROUGH;
                        height: 150rpx;
                    }
                }

                .group_16 {
                    flex-wrap: wrap;
                    gap: 20rpx;
                    justify-content: center;
                    align-items: center;
                    margin-right: 10px;
                }

                .font_12 {
                    font-size: 32rpx;
                    line-height: 22.04rpx;
                    color: #000000;
                }

                .group_19 {
                    margin-top: 38rpx;

                    .text_32 {
                        line-height: 29.48rpx;
                    }

                    .text_33 {
                        margin-right: 25.48rpx;
                        color: #5db66f;
                        line-height: 21.86rpx;
                    }
                }

                .font_6 {
                    font-size: 32rpx;
                    line-height: 29.56rpx;
                    color: #333333;
                }

                .section_13 {
                    position: relative;
                    margin-right: 28rpx;
                    margin-top: 32.86rpx;
                    height: 428rpx;
                    // padding: 271.06rpx 36.64rpx 22rpx 48rpx;
                    padding: 20rpx;
                    padding-bottom: 10rpx;
                    background-color: #ffffff;
                    border-radius: 16rpx;
                    mix-blend-mode: NOTTHROUGH;

                    // background-image: url('/static/images/codefun/de7f2f0177d74c2b9c784b3825ea9832.png');
                    // background-size: 94%;
                    // background-repeat: no-repeat;
                    // background-position-x: 20rpx;
                    // background-position-y: 20rpx;
                    .fui-banner__item {
                        height: 358rpx;
                        border-radius: 20rpx;
                    }

                    .fui-banner__wrap {
                        height: 358rpx;

                        :deep(.uni-video-cover) {
                            .uni-video-cover-play-button {
                                width: 70rpx;
                                height: 70rpx;
                                line-height: 40rpx;
                                font-size: 56rpx;
                            }
                        }
                    }

                    .describe {
                        width: 88%;
                        position: absolute;
                        bottom: 0rpx;
                        left: 10rpx;
                        z-index: 1;
                    }

                    .text_34 {
                        line-height: 26.58rpx;
                    }

                    .image_15 {
                        mix-blend-mode: NOTTHROUGH;
                        border-radius: 50%;
                        width: 48rpx;
                        height: 48rpx;
                    }

                    .font_14 {
                        font-size: 24rpx;
                        line-height: 22.04rpx;
                        color: #ffffff;
                    }

                    .text_35 {
                        line-height: 21.76rpx;
                    }

                    .text_36 {
                        line-height: 23.04rpx;
                    }

                    .section_14 {
                        background-color: #5db66f;
                        border-radius: 12rpx;
                        mix-blend-mode: NOTTHROUGH;
                        width: 40rpx;
                        height: 12rpx;
                    }

                    .image-wrapper {
                        width: 40rpx;

                        .image_16 {
                            width: 40rpx;
                            height: 12rpx;
                        }
                    }

                    .section_15 {
                        background-color: #5db66f33;
                        mix-blend-mode: NOTTHROUGH;
                        border-radius: 50%;
                        width: 12rpx;
                        height: 12rpx;
                    }
                }
            }

            .font {
                font-size: 28rpx;
                line-height: 25.7rpx;
                color: #ffffff;
            }
        }

        .equal-division_3 {
            padding: 10rpx 7.98rpx 15.66rpx 7.98rpx;
            background-color: #ffffff;
            mix-blend-mode: NOTTHROUGH;
            border-top: solid 1rpx #e7e7e7;

            .group_22 {
                flex: 1 1 146.82rpx;

                .font_15 {
                    font-size: 20rpx;
                    line-height: 18.3rpx;
                    color: #666666;
                }

                .text_44 {
                    line-height: 18.4rpx;
                }

                .text_45 {
                    line-height: 18.48rpx;
                }
            }

            .group_32 {
                padding: 12rpx 0 11.68rpx;
            }

            .group_33 {
                padding: 12rpx 0 10rpx;
            }

            .group_34 {
                padding: 12rpx 0 11.48rpx;
            }

            .group_35 {
                padding: 12rpx 0 11.38rpx;
            }

            .group_36 {
                padding: 12rpx 0 11.84rpx;
            }
        }

        .image_5 {
            width: 32rpx;
            height: 32rpx;
        }
    }
    .u-notice-bar {
        padding: unset !important;
        font-size: 28rpx !important;
    }
    :v-deep .u-notice-bar {
        padding: unset !important;
        font-size: 28rpx;
    }
    .ellipsis-multiline {
        display: -webkit-box; /* 必须 */
        -webkit-box-orient: vertical; /* 垂直排列 */
        -webkit-line-clamp: 2; /* 限制显示3行 */
        overflow: hidden; /* 隐藏超出内容 */
        text-overflow: ellipsis; /* 可选，部分浏览器不生效 */
    }
</style>
