<template>
	<view :class="theme_view">
        <view v-if="tabs.length > 0" class=" pr">
            <!-- 搜索框 -->
            <view class="top-search bg-white spacing-mb">
                <view class="flex-row align-c" :style="top_content_style + menu_button_info">
                    <!-- 支付宝小程序自带返回按钮，这里就不给返回按钮了，这里给留出一点空间就行 -->
                    <!-- #ifndef MP-ALIPAY -->
                    <view v-if="is_show_back" class="cp" @tap="handle_back">
                        <iconfont name="icon-arrow-left " size="36rpx" color="#333" class="ml-10 mr-10"></iconfont>
                    </view>
                    <!-- #endif -->
                    <view class="wh-auto" :style="header_padding_left">
                        <component-search propIsDisabled @disabledSearch="handle_search"/>
                    </view>
                </view>
            </view>
            <!-- 轮播 -->
            <view v-if="slider_list.length > 0" class="padding-horizontal-main">
                <component-banner :propData="slider_list" propBackgroundColor="#333" propSelectedBackgroundColor="#999"></component-banner>
            </view>
            <template v-if="tabs.length > 0">
                <!-- 导航栏 -->
                <view class="nav-tabs bs-bb" :class="{ 'bg-white': is_nav_sticky }" :style="nav_sticky_style">
                    <scroll-view scroll-x :show-scrollbar="false" class="tabs-scroll nowrap">
                        <view class="tabs-scroll-content">
                            <view v-for="(item, index) in tabs" :key="index" class="tab-item flex-row align-c gap-5" :class="{ active: current_tabs_index === index }" :data-index="index" :data-id="item.id" @tap="switch_tab">
                                <image v-if="!isEmpty(item.icon)" class="tabs-scroll-image radius va-m" :src="item.icon" mode="aspectFill"></image>
                                <text class="va-m">{{ item.name }}</text>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </template>
            <template v-if="recommend_videos.length > 0">
                <!-- 推荐视频卡片区域 -->
                <view class="recommend-videos">
                    <view class="video-grid">
                        <view v-for="(item, index) in recommend_videos" :key="index" class="video-card-item">
							<view class="video-card" :data-value="item.url" @tap="url_event">
								<image class="video-thumbnail" :src="item.cover" mode="widthFix"></image>
								<view class="video-info flex-col jc-c"> 
									<view class="video-title text-line-2">{{ item.title }}</view>
									<view class="flex-row align-c jc-sb">
										<view class="video-date">{{ item.add_time_date }}</view>
										<view class="video-likes flex-row align-c gap-4">
											<iconfont name="icon-eye" size="24rpx"></iconfont>
											<text>{{ item.access_count }}</text>
										</view>
									</view>
								</view>
							</view>
                        </view>
                    </view>
                </view>
                <!-- 结尾 -->
                <component-bottom-line :propStatus="true"></component-bottom-line>
            </template>
            <template v-else>
                <component-no-data :propStatus="data_list_loding_status" :propMsg="data_list_loding_msg" propLoadingLogoTop="50vh"></component-no-data>
            </template>
        </view>
		<template v-else>
			<component-no-data :propStatus="data_tabs_loding_status" :propMsg="data_tabs_loding_msg"></component-no-data>
		</template>

		<!-- 公共 -->
        <component-common ref="common"></component-common>
	</view>
</template>

<script>
import componentSearch from '@/pages/plugins/video/components/search.vue';
import componentNoData from '@/components/no-data/no-data';
import componentBottomLine from '@/components/bottom-line/bottom-line';
import componentBanner from '@/components/slider/slider';
import componentCommon from '@/components/common/common';
import { video_get_top_left_padding, isEmpty } from '@/common/js/common/common.js';
const app = getApp();
// 状态栏高度
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
// #ifdef MP-TOUTIAO || H5
bar_height = 0;
// #endif
export default {
	components: {
		componentSearch,
		componentNoData,
        componentBottomLine,
		componentBanner,
		componentCommon
	},
	data() {
		return {
            theme_view: app.globalData.get_theme_value_view(),
			// 5,7,0 是误差，， 10 是下边距，66是高度，bar_height是不同小程序下的导航栏距离顶部的高度
			// #ifdef MP
			top_content_style: 'padding-top:' + (bar_height + 5) + 'px;padding-bottom:10px;',
			// #endif
			// #ifdef H5 || MP-TOUTIAO
			top_content_style: 'padding-top:' + (bar_height + 7) + 'px;padding-bottom:10px;',
			// #endif
			// #ifdef APP
			top_content_style: 'padding-top:' + bar_height + 'px;padding-bottom:10px;',
			// #endif
            is_first: true,
			is_show_back: true,
			tabs: [],
			current_tabs_index: 0,
			current_tabs_id: '',
			recommend_videos: [],
			isLoadingMore: false,
			data_list_loding_status: 1,
			data_tabs_loding_status: 1,
			data_tabs_loding_msg: '',
			data_list_loding_msg: '',
			menu_button_info: '',
			header_padding_left: '',
			slider_list: [],
			is_nav_sticky: false, // 控制nav-tabs是否处于粘性状态
			nav_sticky_threshold: 0, // 粘性阈值，与CSS中的top值对应
			nav_sticky_style: '',
		};
	},
    
    onLoad(params) {
        // 调用公共事件方法
        app.globalData.page_event_onload_handle(params);
    
        // 设置参数
        this.setData({
            params: params,
        });
    },

	onShow() {
        // 调用公共事件方法
        app.globalData.page_event_onshow_handle();
        
        // 加载数据
        this.init();
        
        // 公共onshow事件
        if ((this.$refs.common || null) != null) {
            this.$refs.common.on_show();
        }
        
        // 分享菜单处理
        app.globalData.page_share_handle();
	},
    
    // 下拉刷新
    onPullDownRefresh() {
        this.init_data(true);
    },

	// 滚动事件处理
	onPageScroll(e) {
		// 当滚动距离大于等于阈值时，设置nav-tabs为粘性状态（背景变白）
		this.setData({
			is_nav_sticky: e.scrollTop >= this.nav_sticky_threshold
		});
	},

	methods: {
		isEmpty,
        // 初始化
		init() {
			// 小程序下，获取小程序胶囊的宽度
			let menu_button_info = 'max-width:100%';
			// #ifndef MP-TOUTIAO
				// #ifdef MP
				// 判断是否有胶囊
				const is_current_single_page = app.globalData.is_current_single_page();
				// 如果有胶囊的时候，做处理
				if (is_current_single_page == 0) {
					const custom = uni.getMenuButtonBoundingClientRect();
					menu_button_info = `max-width:calc(100% - ${custom.width + 10}px);`;
				}
				// #endif
			// #endif
			let padding_left = '';
			// #ifdef MP-ALIPAY
				padding_left = video_get_top_left_padding();
			// #endif
			let pages = getCurrentPages();
			this.setData({
				is_show_back: pages.length > 1 && !app.globalData.is_tabbar_pages(),
				header_padding_left: padding_left,
				menu_button_info: menu_button_info,
			});
			// 初始化数据
			this.init_data(!this.is_first);
		},
        
        // 初始化数据
		init_data(is_list_loading = false) {
			// 获取数据
			uni.request({
				url: app.globalData.get_request_url("indexinit", "index", "video"),
				method: 'POST',
				dataType: 'json',
				success: res => {
                    uni.stopPullDownRefresh();
					const data = res.data;
					if (data.code == 0) {
						const new_data = data.data;
						this.setData({
                            is_first: false,
							tabs: new_data.category_list,
							current_tabs_id: new_data.category_list.length > 0 ? new_data.category_list[this.current_tabs_index].id : '',
							data_tabs_loding_status: 0,
							slider_list: new_data.slider_list,
						});
						// 获取第一个分类的视频列表
						this.get_video_list(this.current_tabs_id, is_list_loading);

                        // 获取节点位置
                        let self = this;
                        setTimeout(() => {
                            let query = uni.createSelectorQuery().in(this);
                            query.select('.top-search').boundingClientRect();
                            query.exec(function (res) {
                                self.setData({
                                    nav_sticky_threshold: res[0].height,
                                    nav_sticky_style: 'top:' + res[0].height + 'px;',
                                });
                            });
                        }, 100);
					} else {
						this.setData({
							data_tabs_loding_status: 2,
							data_tabs_loding_msg: data.msg,
						});
					}
				},
				fail: (err) => {
                    uni.stopPullDownRefresh();
					this.setData({
						data_tabs_loding_status: 2,
						data_list_loding_msg: this.$t('common.internet_error_tips'),
					});
				}
			});
		},
        
        // 获取数据列表
		get_video_list(id = '', is_list_loading = false) {
			this.setData({
				data_list_loding_status: 1,
				data_list_loding_msg: '',
                recommend_videos: is_list_loading ? this.recommend_videos : [],
			});
			// 获取数据
			uni.request({
				url: app.globalData.get_request_url("indexdatalist", "index", "video"),
				method: 'POST',
				data: {
					id: id,
				},
				dataType: 'json',
				success: res => {
					const data = res.data;
					if (data.code == 0) {
						const new_data = data.data;
						this.setData({
							recommend_videos: new_data.data_list,
							data_list_loding_status: 0,
						});
					} else {
						this.setData({
							data_list_loding_status: 2,
							data_list_loding_msg: data.msg,
						});
					}
				},
				fail: (err) => {
					this.setData({
						data_list_loding_status: 2,
						data_list_loding_msg: this.$t('common.internet_error_tips'),
					});
				}
			})
		},

        // 搜索事件
		handle_search() {
			// 跳转到搜索记录页面
			app.globalData.url_open(`/pages/plugins/video/search-record/search-record`, false);
		},

        // 选项卡切换事件
		switch_tab(e) {
			const id = e?.currentTarget?.dataset?.id || 0;
			const index = e?.currentTarget?.dataset?.index || 0;
			this.setData({
				current_tabs_index: index,
				current_tabs_id: id,
			});
			// 根据当前标签加载对应的数据
			this.get_video_list(id);
		},

        // url事件
        url_event(e) {
            app.globalData.url_event(e);
        },

        // 返回上一页事件
		handle_back() {
			app.globalData.page_back_prev_event();
		}
	}
};
</script>
<style lang="scss" scoped>
    @import './index.css';
</style>