<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'
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()
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.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 openAITools() {
	uni.navigateTo({
		animationType: 'slide-in-bottom',
		// 最新版 SDK Webview 嵌入版本，支持绑定用户 ID，支持自定义样式等
		url: `/pages/common/chat/webview?token=&userId=${userStore.getUserInfo?.id}`,
	})
}
	
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: {
        videoList: [],
    },
})

function getServiceItems() {
    HomeAPI.zoneList({
        pageNo: 1,
        pageSize: 8,
        status: 1,
        type: 1,
    }).then((res) => {
        const { records } = res
		console.log("菜单数据");
		console.log(records);
		records[0].jump_target = "/pages/nongyezhengce/nongyezhengce";
        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: 10, status: 1 }).then((res) => {
        const { records } = res
        pageData.agricultureClass.videoList = records
    })
}

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 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) {
    // 视频时长信息可在需要时使用
}
// 解决轮播视频切换时，上一个视频不停止播放的问题
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>
            <!-- ai助手 -->
            <!-- <FuiMovableView top="650" right="-12" zIndex="99999">
                <view class="h-80rpx flex items-center" @click="openAITools">
                    <image class="w-117rpx h-118rpx" src="/static/images/codefun/ai.png" alt="" />
                </view>
            </FuiMovableView> -->
			<view class="top-movable-area">
				<movable-area class="movable-area">
					<movable-view class="movable-view" direction="vertical" y="650rpx">
						<view class="ai_icon" @click="openAITools">
							<image class="ai_icon" src="/static/images/codefun/ai.png" alt="" />
						</view>
					</movable-view>
				</movable-area>
			</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 mt-5" @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" style="min-height: 150rpx;"
                        @click="toNewsDetail(news)">
                        <view class="flex flex-col justify-between"
                            :style="news.posterUrl ? 'width: 68%' : 'width: 100%'">
                            <view class="ellipsis-multiline fontsize_28 color-#333333 mb-1">{{ news.title }}</view>
                            <view class="fontsize_24 color-#686868">{{
                                dayjs(news.publishDate).format('YYYY年MM月DD日')
                            }}</view>
                        </view>
                        <view v-show="news.posterUrl" class="w-30% h-130">
                            <image class="w-full h-full border-rd" :src="news.posterUrl" />
                        </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  rounded-lg" style="margin-left: -28rpx;">
                    <fui-waterfall topGap="20" leftGap="20" rightGap="20" bottomGap="20">
                        <fui-waterfall-item v-for="(video, index) in pageData.agricultureClass.videoList" :key="index"
                            :src="video.thumbnailPath" @click="playVideo(index)">
                            <view class="flex flex-col justify-between pl-2 pr-2 pb-2">
                                <view class="fontsize_28 mt-1 mb-2 font-13">{{ video.title }}</view>
                                <view class="flex justify-between text-25 color-#686868">
                                    <view class="mr-1 flex-center">
                                        <!-- <image class="mt-0.2 mr-1 w-30 h-26" src="/static/images/news/views.png" /> -->
                                        <view class="flex-center text-24 lh-24rpx">{{ video.viewCount || 0 }}次播放</view>
                                    </view>
                                    <text>{{ dayjs(video.publishDate).format('MM-DD') }}</text>
                                </view>
                            </view>
                            <video :id="`video${index}`" :src="video.url" :poster="video.thumbnailPath"
                                :title="video.title" :controls="true" :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>
                        </fui-waterfall-item>
                    </fui-waterfall>
                </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: 00rpx 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: 28rpx;
                        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;
                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;
    /* 可选，部分浏览器不生效 */
}
.top-movable-area{
	height: 100vh;
	width: 122rpx;
	position: fixed;
	top: 0rpx;
	right:0rpx;
	z-index: 9999;
	overflow: hidden;
	.movable-area{
		height: 100vh;
		width: 122rpx;
		.movable-view,.ai_icon{
			width: 120rpx;
			height: 120rpx;
		}
	}
}

</style>
