<template>
	<view class="tradeIndex">
		<!-- Tab 栏 -->
		<view class="tradeIndex-tabs">
			<scroll-view class="tradeIndex-tabs-scroll" scroll-x enable-flex>
				<view
					class="tradeIndex-tab"
					v-for="(tab, index) in tabs"
					:key="index"
					@click="switchTab(index)"
				>
					<text class="tradeIndex-tab-name" :class="{ active: currentTab === index }">
						{{ tab.name }}
					</text>
					<view class="tradeIndex-tab-line" :class="{ active: currentTab === index }"></view>
				</view>
			</scroll-view>
		</view>

		<!-- 内容区 -->
		<scroll-view
			class="tradeIndex-scroll"
			scroll-y
			@scrolltolower="loadMore"
			:lower-threshold="150"
			refresher-enabled
			:refresher-triggered="refreshing"
			@refresherrefresh="onRefresh"
		>
			<!-- 空状态 -->
			<view class="tradeIndex-empty" v-if="!loading && listData.length === 0">
				<image
					class="tradeIndex-empty-icon"
					src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/empty.png"
					mode="aspectFit"
				/>
				<text class="tradeIndex-empty-text">暂无内容</text>
			</view>

			<!-- 瀑布流 -->
			<view class="tradeIndex-waterfall" v-if="listData.length > 0">
				<view class="waterfall-left">
					<view
						class="waterfall-item"
						v-for="(item, index) in listData"
						v-if="index % 2 === 0"
						@click="goDetail(item)"
					>
						<view class="waterfall-item-img-wrap">
							<image
								class="waterfall-item-img"
								:src="item.CoverImg"
								mode="widthFix"
								lazy-load
							/>
							<view class="waterfall-item-tag" v-if="item.DataType">
								{{ getTypeName(item.DataType) }}
							</view>
						</view>
						<view class="waterfall-item-body">
							<view class="waterfall-item-name">{{ item.DataName }}</view>
				 
						</view>
					</view>
				</view>
				<view class="waterfall-right">
					<view
						class="waterfall-item"
						v-for="(item, index) in listData"
						v-if="index % 2 === 1"
						@click="goDetail(item)"
					>
						<view class="waterfall-item-img-wrap">
							<image
								class="waterfall-item-img"
								:src="item.CoverImg"
								mode="widthFix"
								lazy-load
							/>
							<view class="waterfall-item-tag" v-if="item.DataType">
								{{ getTypeName(item.DataType) }}
							</view>
						</view>
						<view class="waterfall-item-body">
							<view class="waterfall-item-name">{{ item.DataName }}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 加载更多 -->
			<view class="tradeIndex-loading" v-if="loading && !refreshing">
				<view class="loading-dot"></view>
				<text class="loading-text">加载中...</text>
			</view>
			<view class="tradeIndex-nomore" v-if="!loading && noMore && listData.length > 0">
				<view class="nomore-line"></view>
				<text class="nomore-text">没有更多了</text>
				<view class="nomore-line"></view>
			</view>
			<view style="height: 30rpx;"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			dataObj: {
				type: [Object, Array],
				default: () => ({})
			}
		},
		data() {
			return {
				tabs: [
					{ name: '推荐', type: '0' },
					{ name: '找品牌', type: '3' },
					{ name: '找项目', type: '1' },
					{ name: '租写字楼', type: '2' },
					{ name: '服务', type: '4' }
				],
				typeMap: {
					3: '品牌',
					2: '写字楼',
					1: '项目',
					4: '服务'
				},
				currentTab: 0,
				listData: [],
				loading: false,
				noMore: false,
				refreshing: false,
				pageIndex: 1,
				pageSize: 10
			}
		},
		mounted() {
			this.loadData(true);
		},
		methods: {
			getTypeName(type) {
				return this.typeMap[type] || '';
			},
			onRefresh() {
				this.refreshing = true;
				this.loadData(true);
				setTimeout(() => {
					this.refreshing = false;
				}, 600);
			},
			switchTab(index) {
				if (this.currentTab === index) return;
				this.currentTab = index;
				this.loadData(true);
			},
			loadData(refresh = false) {
				if (this.loading) return;
				this.loading = true;
				if (refresh) {
					this.pageIndex = 1;
					this.noMore = false;
					this.listData = [];
				}
				this.request2({
						url: "/api/AppletTrade/GetTradeIndexData",
						data: {
							pageIndex: this.pageIndex,
							pageSize: this.pageSize,
							qType: Number(this.tabs[this.currentTab].type)
						}
					},
					(res) => {
						this.loading = false;
						if (res.resultCode == 1) {
							let pageData = res.data.pageData || [];
							if (refresh) {
								this.listData = pageData;
							} else {
								this.listData = this.listData.concat(pageData);
							}
							this.noMore = this.pageIndex >= res.data.pageCount;
						}
					}
				);
			},
			loadMore() {
				if (this.noMore || this.loading) return;
				this.pageIndex++;
				this.loadData(false);
			},
			goDetail(item) {
				console.log('[tradeIndex] 点击条目:', item);
                let gotoUrl='';
                //载体项目
                if(item.DataType==1)
                {
                    gotoUrl=`/pages/kotra/carrier/detail?id=${item.DataId}`;
                }
                //楼宇
                else if(item.DataType==2)
                {
                    gotoUrl=`/pages/kotra/carrier/detail_building?id=${item.DataId}`;
                }
                //品牌
                else if(item.DataType==3)
                {
                    gotoUrl=`/pages/kotra/brand/detail?id=${item.DataId}`;
                }
                //企业服务
                else if(item.DataType==4)
                {
                    gotoUrl=`/pages/kotra/brand/detail_company?id=${item.DataId}`;
                }
                uni.navigateTo({ url: gotoUrl });
			}
		}
	}
</script>

<style lang="scss">
.tradeIndex {
	width: 100%;
	height: 100%;
	background-color: #f8f8f8;
}

/* ========== Tab 栏 ========== */
.tradeIndex-tabs {
	background-color: #fff;
	position: sticky;
	top: 0;
	z-index: 10;
	border-bottom: 1rpx solid #f0f0f0;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.tradeIndex-tabs-scroll {
	white-space: nowrap;
	padding: 0 12rpx;
}

.tradeIndex-tab {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	padding: 28rpx 24rpx 20rpx;
	position: relative;
}

.tradeIndex-tab-name {
	font-size: 28rpx;
	color: #b0b0b0;
	font-weight: 500;
	transition: all 0.25s ease;
}

.tradeIndex-tab-name.active {
	color: #1a1a1a;
	font-weight: 700;
	font-size: 32rpx;
}

.tradeIndex-tab-line {
	width: 0;
	height: 6rpx;
	border-radius: 3rpx;
	background-color: transparent;
	margin-top: 10rpx;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tradeIndex-tab-line.active {
	width: 48rpx;
	background: linear-gradient(90deg, #ff6b6b, #ff4544);
}

/* ========== 滚动区域 ========== */
.tradeIndex-scroll {
	height: calc(100vh - 120rpx);
}

/* ========== 空状态 ========== */
.tradeIndex-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 160rpx 0 100rpx;
}

.tradeIndex-empty-icon {
	width: 200rpx;
	height: 200rpx;
	opacity: 0.35;
	margin-bottom: 32rpx;
}

.tradeIndex-empty-text {
	font-size: 28rpx;
	color: #c0c0c0;
	letter-spacing: 1rpx;
}

/* ========== 瀑布流 ========== */
.tradeIndex-waterfall {
	display: flex;
	align-items: flex-start;
	padding: 20rpx 24rpx 0;
}

.waterfall-left {
	width: calc(50% - 12rpx);
	margin-right: 24rpx;
}

.waterfall-right {
	width: calc(50% - 12rpx);
}

.waterfall-item {
	background-color: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	margin-bottom: 24rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.07);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.waterfall-item:active {
	transform: scale(0.98);
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.waterfall-item-img-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 20rpx 20rpx 0 0;
}

.waterfall-item-img {
	width: 100%;
	display: block;
	background-color: #f0f0f0;
}

.waterfall-item-tag {
	position: absolute;
	top: 16rpx;
	left: 16rpx;
	background: linear-gradient(135deg, rgba(255, 69, 68, 0.9), rgba(255, 107, 107, 0.85));
	color: #fff;
	font-size: 20rpx;
	font-weight: 600;
	padding: 6rpx 16rpx;
	border-radius: 30rpx;
	letter-spacing: 1rpx;
	box-shadow: 0 2rpx 8rpx rgba(255, 69, 68, 0.4);
}

.waterfall-item-body {
	padding: 20rpx 20rpx 22rpx;
}

.waterfall-item-name {
	font-size: 28rpx;
	font-weight: 600;
	color: #1a1a1a;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-bottom: 12rpx;
}

.waterfall-item-meta {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.waterfall-item-arrow {
	font-size: 22rpx;
	color: #c0c0c0;
	letter-spacing: 0.5rpx;
}

/* ========== 加载更多 ========== */
.tradeIndex-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32rpx 0;
}

.loading-dot {
	width: 8rpx;
	height: 8rpx;
	border-radius: 50%;
	background-color: #ff4544;
	margin-right: 12rpx;
	animation: loadingPulse 1.2s ease-in-out infinite;
}

.loading-text {
	font-size: 26rpx;
	color: #b0b0b0;
	letter-spacing: 1rpx;
}

@keyframes loadingPulse {
	0%, 100% { opacity: 0.4; transform: scale(0.8); }
	50% { opacity: 1; transform: scale(1.2); }
}

.tradeIndex-nomore {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28rpx 40rpx;
}

.nomore-line {
	flex: 1;
	height: 1rpx;
	background-color: #e8e8e8;
}

.nomore-text {
	font-size: 24rpx;
	color: #c0c0c0;
	padding: 0 24rpx;
	letter-spacing: 1rpx;
	white-space: nowrap;
}
</style>
