<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>

		<!-- 内容区 -->
		<view class="tradeIndex-content">
			<!-- 瀑布流 -->
			<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">
								<template v-if="item.DataType==1&&item.ProjectTypeName!=''">
									{{ item.ProjectTypeName }}
								</template>
								<template v-else>
									{{ getTypeName(item.DataType) }}
								</template>
							</view>
						</view>
						<view class="waterfall-item-body">
							<view class="waterfall-item-name">{{ item.DataName }}</view>
							<view v-if="item.DataType==3||item.DataType==1">
								<text class="item-address" v-if="item.DataType==1">{{item.Address}}</text>
								<text class="item-brand" v-else>{{item.FullBrandName}}</text>
							</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">
								<template v-if="item.DataType==1&&item.ProjectTypeName!=''">
									{{ item.ProjectTypeName }}
								</template>
								<template v-else>
									{{ getTypeName(item.DataType) }}
								</template>
							</view>
						</view>
						<view class="waterfall-item-body">
							<view class="waterfall-item-name">{{ item.DataName }}</view>
							<view v-if="item.DataType==3||item.DataType==1">
								<text class="item-address" v-if="item.DataType==1">{{item.Address}}</text>
								<text class="item-brand" v-else>{{item.FullBrandName}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 空状态 -->
			<view class="tradeIndex-empty" v-else>
				<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>
		<!-- 加载更多按钮 -->
		<view class="tradeIndex-loadmore" :class="{ loading: loading }" v-if="listData.length > 0 && !noMore"
			@click="loadMore">
			<view class="loadmore-spinner" v-if="loading"></view>
			<text v-if="loading">加载中...</text>
			<text v-else>点击加载更多</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>
</template>

<script>
	export default {
		props: {
			dataObj: {
				type: [Object, Array],
				default: () => ({})
			}
		},
		data() {
			return {
				mainColor: '#ff4544',
				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() {
			// if (this.$uiConfig && this.$uiConfig.mainColor) {
			// 	this.mainColor = this.$uiConfig.mainColor;
			// }
			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) {
				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 {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background-color: #f8f8f8;
	}

	/* ========== Tab 栏 ========== */
	.tradeIndex-tabs {
		flex-shrink: 0;
		height: 100rpx;
		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-content {
		padding: 20rpx 24rpx 0;
	}

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

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

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

	/* ========== 瀑布流 ========== */
	.tradeIndex-waterfall {
		display: flex;
		align-items: flex-start;
	}

	.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;
	}

	.item-address {
		font-size: 24rpx;
		color: #888;
		line-height: 1.4;
	}

	.item-brand {
		font-size: 24rpx;
		color: #888;
		line-height: 1.4;
	}

	.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-loadmore {
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		margin: 30rpx 24rpx 40rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.07);
		transition: box-shadow 0.25s ease, transform 0.25s ease;
	}

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

	.tradeIndex-loadmore.loading {
		pointer-events: none;
		opacity: 0.7;
	}

	.loadmore-spinner {
		width: 32rpx;
		height: 32rpx;
		border: 3rpx solid #e0e0e0;
		border-top-color: #999;
		border-radius: 50%;
		margin-right: 12rpx;
		animation: spin 0.8s linear infinite;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

	.tradeIndex-loadmore text {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		font-size: 28rpx;
		font-weight: 500;
		letter-spacing: 2rpx;
	}

	.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>