<template>
	<view class="xingma-lab-container">
		<!-- 第一层：顶部导航 -->
		<view class="top-navigation">
			<view class="nav-left">
				<image class="back-btn" src="../../static/xingmaLab/1001/backBtn.png" mode="aspectFit" @click="handleBack" />
			</view>
			<view class="nav-center">
				<text class="nav-title">星妈Lab</text>
			</view>
			<view class="nav-right"></view>
		</view>

		<!-- 第二层：内容区域 -->
		<view class="content-area">
			<!-- 藏馆内容 - 单列瀑布流 -->
			<scroll-view v-if="activeTab === 'cangguang'" scroll-y="true" class="cangguang-content" @scrolltolower="handleScroll">
				<view class="banner_content">
					<image class="banner_img" src="../../static/xingmaLab/1001/bannerImg0.png" mode="aspectFill"  />
				</view>
				
				<view 
					v-for="(item, index) in cangguangList" 
					:key="index" 
					class="item_cangguan"
				>
					<image class="item_cangguan_img" :src="`${item.imgUrl}`" mode="widthFix"  />
					<view class="item_cangguan_bottom">
						<view class="item_cangguan_bottom_bg">
						</view>
						<image class="item_logo" src="../../static/xingmaLab/1001/item_logo_cangguan.png" mode="aspectFill" />
						<view class="title_line"></view>
						<view class="nick_name_content">
							<text class="nick_name">No.{{ item.bizNo }}</text>
							<text class="user_num">By.{{ item.nickname }}</text>
						</view>
					</view>
					<view class="item_cangguan_text">
						<text class="item_desc">{{ item.content }}</text>
						<view class="nicheng_shoucang_zhaungtai">
							<view class="nicheng_shoucang_item">
								<image class="avatar_img" src="../../static/xingmaLab/1001/avatar.png" mode="aspectFill" />
								<text class="nick_name_text">{{ item.nickname }}</text>
								<text class="shoucang_text">{{ item.collection ? '已收藏' : '未收藏' }}</text>
								<image class="shoucang_icon" :src="item.collection ? '../../static/xingmaLab/1001/shoucang_on.png' : '../../static/xingmaLab/1001/shoucang_off.png'" mode="aspectFit" />
							</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<!-- 我的藏馆内容 - 双切页两列瀑布流 -->
			<view v-if="activeTab === 'wodecangguan'" class="wodecangguan-content">
				<!-- 切页tab -->
				<view class="sub-tab-container">
					<view 
						class="sub-tab-item" 
						:class="{ active: activeSubTab === 'collections' }"
						@click="switchSubTab('collections')"
					>
						<text class="sub-tab-text">我的藏品</text>
					</view>
					<view 
						class="sub-tab-item" 
						:class="{ active: activeSubTab === 'favorites' }"
						@click="switchSubTab('favorites')"
					>
						<text class="sub-tab-text">我的收藏</text>
					</view>
				</view>

				<!-- 我的藏品列表 - 使用与藏馆相同的数据 -->
				<view v-if="activeSubTab === 'collections'" class="wodecangpin-content">
					<scroll-view 
						class="waterfall-list1" 
						scroll-y="true"
						@scrolltolower="handleScrollToLower"
					>
						<view 
							v-for="(item, index) in shoucangList" 
							:key="index" 
							class="waterfall-item"
							@click="handleItemClick(item)"
						>
							<view class="item-up-content">
								
								<image class="item-image" :src="item.imgUrl" mode="widthFix" />
								<view class="item-num">
									<text class="badge-num">N0.{{ item.bizNo }}</text>
								</view>
								<view v-if="item.badge" class="item-badge">
									<text class="badge-text">精选推荐</text>
								</view>
							</view>
							<view class="item-info">
								<text class="item-title">{{ item.content }}</text>
								<view class="item-meta">
									<view class="creator-info">
										<text class="creator-name">{{ item.nickname }}</text>
										<text class="star-icon">⭐</text>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					
				</view>

				<!-- 我的收藏列表 -->
				<!-- <view v-if="activeSubTab === 'favorites'" class="sub-tab-content">
					<view class="waterfall-list">
						<view 
							v-for="(item, index) in favoritesList" 
							:key="index" 
							class="waterfall-item"
							@click="handleItemClick(item)"
						>
							<image class="item-image" :src="item.image" mode="aspectFill" />
							<view class="item-info">
								<text class="item-title">{{ item.title }}</text>
								<view class="item-meta">
									<text class="item-id">{{ item.id }}</text>
									<view class="creator-info">
										<text class="creator-name">{{ item.creator }}</text>
										<text class="star-icon">⭐</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>

		<!-- 底部导航 -->
		<view class="bottom-navigation">
			<view class="bottom-nav-item1" :class="{ active: activeTab === 'cangguang' }" @click="handleBottomNavClick('cangguang')">
				<image 
					class="bottom-nav-icon1" 
					:src="activeTab === 'cangguang' ? '../../static/xingmaLab/1001/tab_cangguang_selected.png' : '../../static/xingmaLab/1001/tab_cangguang_normal.png'" 
					mode="aspectFit" 
				/>
			</view>
			<view class="bottom-nav-item2">
				<image class="publish-icon" src="../../static/xingmaLab/1001/tab_fabu.png" @click="handleBottomNavFabu" mode="aspectFit" />
			</view>
			<view class="bottom-nav-item3" :class="{ active: activeTab === 'wodecangguan' }" @click="handleBottomNavClick('wodecangguan')">
				<image 
					class="bottom-nav-icon3" 
					:src="activeTab === 'wodecangguan' ? '../../static/xingmaLab/1001/tab_wodecangguan_selected.png' : '../../static/xingmaLab/1001/tab_wodecangguan_normal.png'" 
					mode="aspectFit" 
				/>
			</view>
		</view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { fetchRecordList } from '@/api/xingmaLab'
import { onPageScroll } from "@dcloudio/uni-app";

// 定义组件名称
defineOptions({
	name: 'XingmaLab'
})

// 响应式数据
const activeTab = ref('cangguang')
const activeSubTab = ref('collections')
const cangguangList = ref([]);
const shoucangList = ref([]);

// onPageScroll((e) => {
// 		console.log('e.scrollTop=',e);
// 		const newVal = e.scrollTop;
		
		
			

// });
const handleScroll = (e) => {

	console.log('以移动到底部');
	// cangguangList.value = cangguangList.value.concat(data.data.list);

	cangguangList.value = data.data.list.concat(data.data.list);
}

const handleScroll1 = (e) => {
	console.log('e.scrollTop=',e);
}

const handleScrollToLower = () => {
	console.log('已到底部');
}

onMounted(async () => {  

	
	//获取藏馆列表
	// const data = await fetchRecordList();

	//获取我的藏品列表
	// const data = await fetchRecordMyrecords();

	//获取我的收藏列表
	// const data = await fetchFavoriteList();

	cangguangList.value = data.data.list;
	
	shoucangList.value = cangguangList.value;//convertDobuleList(data.data.list);
})

const convertDobuleList = (list) => {
	let newList = [];
	newList.push([]);
	newList.push([]);
	for(let i = 0; i < list.length; i++) {
		if(i % 2 == 0) {
			newList[0].push(list[i]);
		} else {
			newList[1].push(list[i]);
		}
	}
	return newList;
}

const data = {
  "success": true,
  "ok": false,
  "code": 91624081,
  "message": "nisi",
  "data": {
    "list": [
      {
        "content": "宝宝宝是宝是宝是宝是是否22222",
        "imgUrl": "../../static/xingmaLab/1001/cangpingImg.png",
        "collection": false,
        "id": 1,
        "bizNo": "123456789",
        "nickname": "鹤小飞",
        "avatar": "../../static/xingmaLab/1001/avatar.png"
      },
      {
        "content": "宝宝宝是宝是宝是宝是是否",
        "imgUrl": "../../static/xingmaLab/1001/bannerImg0.png",
        "collection": true,
        "id": 1,
        "bizNo": "123456789",
        "nickname": "鹤小飞",
        "avatar": "../../static/xingmaLab/1001/WechatIMG102.jpg"
      },
      {
        "content": "宝宝宝是宝是宝是宝是是否",
        "imgUrl": "../../static/xingmaLab/1001/listItemImgPzh4.png",
        "collection": false,
        "id": 1,
        "bizNo": "123456789",
        "nickname": "鹤小飞",
        "avatar": "../../static/xingmaLab/1001/avatar.png"
      },
      {
        "content": "宝宝宝是宝是宝是宝是是否",
        "imgUrl": "../../static/xingmaLab/1001/cangpingImg.png",
        "collection": true,
        "id": 1,
        "bizNo": "123456789",
        "nickname": "鹤小飞",
        "avatar": "../../static/xingmaLab/1001/avatar.png"
      },
      {
        "content": "宝宝宝是宝是宝是宝是是否",
        "imgUrl": "../../static/xingmaLab/1001/cangpingImg.png",
        "collection": false,
        "id": 1,
        "bizNo": "123456789",
        "nickname": "鹤小飞",
        "avatar": "../../static/xingmaLab/1001/avatar.png"
      },
      {
        "content": "宝宝宝是宝是宝是宝是是否",
        "imgUrl": "../../static/xingmaLab/1001/cangpingImg.png",
        "collection": false,
        "id": 1,
        "bizNo": "123456789",
        "nickname": "鹤小飞",
        "avatar": "../../static/xingmaLab/1001/avatar.png"
      },
      {
        "content": "宝宝宝是宝是宝是宝是是否111111",
        "imgUrl": "../../static/xingmaLab/1001/cangpingImg.png",
        "collection": false,
        "id": 1,
        "bizNo": "123456789",
        "nickname": "鹤小飞",
        "avatar": "../../static/xingmaLab/1001/avatar.png"
      }
    ],
    "totalCount": 10,
    "hasPrev": false,
    "totalPage": 1,
    "hasNext": false
  }
}
// 藏馆列表数据 - 统一的数据源
// const cangguangList = ref([
// 	{
// 		image: '../../static/xingmaLab/1001/cangpingImg.png',
// 		title: '宝宝是否发育迟缓',
// 		id: 'No.123456789',
// 		creator: '鹤小飞',
// 		badge: '精选推荐'
// 	},
// 	{
// 		image: '../../static/xingmaLab/1001/bannerImg0.png',
// 		title: '萌宝来袭,欢乐加倍',
// 		id: 'No.123456789',
// 		creator: '鹤小飞'
// 	},
// 	{
// 		image: '../../static/xingmaLab/1001/WechatIMG102.jpg',
// 		title: '宝宝能量补给站!',
// 		id: 'No.123456789',
// 		creator: '鹤小飞'
// 	},
// 	{
// 		image: '../../static/xingmaLab/1001/listItemImgPzh4.png',
// 		title: '快来用星妈会小程序',
// 		id: 'No.123456789',
// 		creator: '鹤小飞'
// 	}
// ])

// 我的收藏列表数据
const favoritesList = ref([
	{
		// image: '../../static/xingmaLab/1001/placeholder1.jpg',
		title: '宝宝是否发育迟缓',
		id: 'No.123456789',
		creator: '鹤小飞'
	},
	{
		// image: '../../static/xingmaLab/1001/placeholder2.jpg',
		title: '萌宝来袭,欢乐加倍',
		id: 'No.123456789',
		creator: '鹤小飞'
	},
	{
		// image: '../../static/xingmaLab/1001/placeholder3.jpg',
		title: '宝宝能量补给站!',
		id: 'No.123456789',
		creator: '鹤小飞'
	},
	{
		image: '../../static/xingmaLab/1001/placeholder4.jpg',
		title: '快来用星妈会小程序',
		id: 'No.123456789',
		creator: '鹤小飞'
	}
])

// 方法
const handleBack = () => {
    jump({
		type: JumpType.INNER,
		url: "/pages/index/index"
	})
}

const switchTab = (tab) => {
	activeTab.value = tab
	if (tab === 'wodecangguan') {
		activeSubTab.value = 'collections'
	}
}

const switchSubTab = (subTab) => {
	activeSubTab.value = subTab
}

const handleBottomNavFabu = () => {
	console.log('点击了发布')
}

// 底部导航点击处理
const handleBottomNavClick = (navType) => {
	if (navType === 'cangguang') {
		// 点击"星妈会藏馆"时，切换到藏馆tab，展示单列列表
		activeTab.value = 'cangguang'
	} else if (navType === 'wodecangguan') {
		// 点击"我的藏品"时，切换到我的藏馆tab，默认展示我的藏品
		activeTab.value = 'wodecangguan'
		activeSubTab.value = 'collections'
	}
}

const handleItemClick = (item) => {
	console.log('点击了项目:', item)
	// 这里可以添加跳转逻辑
}
</script>

<style lang="less" scoped>
@import './xingmaLab.less';
</style>