<template>
  <view class="main">
	<view class="head" :class="headShow?'head_show':''" :style="{'opacity':headShow?opacity:'1','padding-top':statusBartop+'px'}">
		<view class="head_cont" :style="{'width': statusHeight+'px','height':statusHeight+'px'}">
			<view class="head_back"  @click="handleBack()" :style="{'width': statusHeight+'px','height':statusHeight+'px'}">
				<image class="head_back_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/newPD/zhBack.png" mode="widthFix"></image>
			</view>
			<view class="head_title" :style="{'width':pageWidth+'px','height':statusHeight+'px'}">AI学做菜</view>
		</view>
	</view>
	<view class="content" :style="{'padding-top':statusBartop+statusHeight+10+'px'}">
		<view class="content_greetings">
			<view class="content_greetings_l">
				<image class="content_greetings_img" :src="timeImg" mode="widthFix"></image>
				<view class="content_greetings_btn" @click="onChat()">
					<image class="content_greetings_btnimg" src="../../static/userserve/Chatting.png"></image>
					<text  class="content_greetings_text">开始聊天</text>
				</view>
			</view>
			<image class="content_greetings_r" src="../../static/userserve/Robot.png" mode="widthFix"></image>
		</view>
		<view class="content_hot">
			<view class="content_hot_title">热门问题</view>
			<view class="content_hot_danmu">
				<view class="content_hot_danmu_li"
				v-for="(item,index) in danmuList"
				:key="index"
				:style="{ top: item.top + 'px', animationDuration: item.duration + 's' }"
				>
					<image class="content_hot_danmu_liimg" src="../../static/userserve/197.png" mode="widthFix"></image>
					<text class="content_hot_danmu_li_text">{{item.text}}</text>
				</view>
			</view>
		</view>
		<view class="content_list">
			<image class="content_list_img" src="https://i2.chuimg.com/cf03e5621d75418b8babb983415423aa_1080w_864h.jpg" mode="aspectFill"></image>
			<view class="content_list_script">
				<view class="content_list_title">甜口红烧肉做法</view>
				<view class="content_list_desc">甜口红烧肉是一道经典的中式家常菜，特点是色泽红亮、肥而不腻、甜咸适中</view>
			</view>
		</view>
		<view class="content_list">
			<image class="content_list_img" src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="aspectFill"></image>
			<view class="content_list_script">
				<view class="content_list_title">甜口红烧肉做法</view>
				<view class="content_list_desc">甜口红烧肉是一道经典的中式家常菜，特点是色泽红亮、肥而不腻、甜咸适中</view>
			</view>
		</view>
		<view class="content_list">
			<image class="content_list_img" src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="aspectFill"></image>
			<view class="content_list_script">
				<view class="content_list_title">甜口红烧肉做法</view>
				<view class="content_list_desc">甜口红烧肉是一道经典的中式家常菜，特点是色泽红亮、肥而不腻、甜咸适中</view>
			</view>
		</view>
		<view class="content_list">
			<image class="content_list_img" src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg" mode="aspectFill"></image>
			<view class="content_list_script">
				<view class="content_list_title">甜口红烧肉做法</view>
				<view class="content_list_desc">甜口红烧肉是一道经典的中式家常菜，特点是色泽红亮、肥而不腻、甜咸适中</view>
			</view>
		</view>
	</view>
	<view style="height: 200px;"></view>
  </view>
</template>

<script setup>
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
const counterStore = useCounterStore(); // 使用 Store
const { proxy } = getCurrentInstance();
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop,ButtonWidth,ButtonHeight } = storeToRefs(counterStore);
const headShow = ref(false);
const showBack = ref(false);
const pageWidth = ref(0);
const opacity = ref(1);
const timeImg = ref('');
const danmuList = ref([])
// 获取页面宽度
const updatePageWidth = () => {
  const systemInfo = uni.getSystemInfoSync();
  pageWidth.value = systemInfo.windowWidth;
};
const searchWidth = computed(() => {
	return pageWidth.value - statusHeight.value - ButtonWidth.value - 35;
});
// 判断是否有上一页
const getPages = () => {
  const pages = getCurrentPages();
  return pages.length > 1;
};
const handleBack = () => {
  if (getPages()) {
    // 如果有上一页，返回上一页
    uni.navigateBack();
  } else {
    // 如果没有上一页，返回首页
    uni.switchTab({
      url: '/pages/index/index',
    });
  }
};
const detail=()=>{
	uni.navigateTo({
		url:`/userserve/clientservedetail/clientservedetail`
	})
};
const timeFun=()=>{
	// 获取当前时间
	const now = new Date();
	// 获取当前小时数（24 小时制）
	const hour = now.getHours();
	// 判断时间段
	let timePeriod;
	if (hour >= 0 && hour < 6) {
	    timePeriod = '../../static/userserve/evening.png';//'凌晨';
	} else if (hour >= 6 && hour < 9) {
	    timePeriod = '../../static/userserve/morning.png';//'早上';
	} else if (hour >= 9 && hour < 12) {
	    timePeriod = '../../static/userserve/morning.png';//'上午';
	} else if (hour === 12) {
	    timePeriod = '../../static/userserve/lunchtime.png';//'中午';
	} else if (hour > 12 && hour < 18) {
	    timePeriod = '../../static/userserve/Afternoon.png';//'下午';
	} else if (hour >= 18 && hour < 24) {
	    timePeriod = '../../static/userserve/evening.png';//晚上
	} else {
	    timePeriod = '未知时间段';
	}
	timeImg.value = timePeriod;
}
const sendDanmu =()=> {
	// 生成弹幕数据
	const danmu = [
		{
			id: 1, // 唯一 ID
			text: '肉的做法', // 弹幕文本
			top: Math.random(), // 随机 top 值（控制弹幕位置）
			duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
		},
		{
			id:2, // 唯一 ID
			text: '番茄滑肉煲｜肉片超级嫩滑！天冷来上一锅太暖了', // 弹幕文本
			top: Math.random() * 50, // 随机 top 值（控制弹幕位置）
			duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
		},
		{
			id:3, // 唯一 ID
			text: '蚂蚁上树——肉末粉条的完美结合', // 弹幕文本
			top: Math.random() * 100, // 随机 top 值（控制弹幕位置）
			duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
		},
		{
			id:3, // 唯一 ID
			text: '水煮肉片（肯定不翻车）', // 弹幕文本
			top: Math.random() * 150, // 随机 top 值（控制弹幕位置）
			duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
		},
		{
			id:4, // 唯一 ID
			text: '香菜拌牛肉', // 弹幕文本
			top: Math.random() * 200, // 随机 top 值（控制弹幕位置）
			duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
		},
		{
			id:5, // 唯一 ID
			text: '香煎五花肉', // 弹幕文本
			top: Math.random() * 250, // 随机 top 值（控制弹幕位置）
			duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
		},
		{
			id:6, // 唯一 ID
			text: '东北溜肉段（酸甜口，极简版）', // 弹幕文本
			top: Math.random() * 300, // 随机 top 值（控制弹幕位置）
			duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
		},
		{
			id:7, // 唯一 ID
			text: '绝绝子！甩饭店几条街的粉蒸肉（粉蒸排骨）', // 弹幕文本
			top: Math.random() * 350, // 随机 top 值（控制弹幕位置）
			duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
		},
		{
			id:8, // 唯一 ID
			text: '孩子爱吃的蒸肉饼', // 弹幕文本
			top: Math.random() * 400, // 随机 top 值（控制弹幕位置）
			duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
		},
		{
			id:9, // 唯一 ID
			text: '又香又嫩的小炒牛肉（巨好吃，手残党也能做）', // 弹幕文本
			top: Math.random() * 450, // 随机 top 值（控制弹幕位置）
			duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
		},
		{
			id:10, // 唯一 ID
			text: '湖南农家小炒肉', // 弹幕文本
			top: Math.random() * 500, // 随机 top 值（控制弹幕位置）
			duration: Math.random() * 5 + 5, // 随机动画时长（5-10 秒）
		}
	];
	// 添加到弹幕列表
	danmuList.value = (danmu);
}
const onChat=()=>{
	uni.navigateTo({
		url:`/userserve/aichitchat/aichitchat`
	})
}
onLoad((options) => {
	//初始化时判断是否显示返回按钮
	showBack.value = getPages();
	updatePageWidth();
	timeFun();
	sendDanmu();
});
onShow(() => {});
onPageScroll((e)=>{
	const top = e.scrollTop;
	// 导航条颜色透明渐变
	if (top <= 50) {
	  headShow.value = false
	} else {
	  if( 50 < top && top <= 200 ){ 
		opacity.value = top / 200
	  }else{
		opacity.value = 1
	  }
	  headShow.value = true
	}
}),
onReady(()=>{})
onPullDownRefresh(()=>{})
onReachBottom(()=>{})
</script>

<style lang="scss">
	@import './style.scss';
</style>