<template>
	<!-- 搜索 -->
	<view>
		<uni-search-bar
			placeholder="输入搜索商品"
			bgColor="#EEEEEE"
			clearButton="auto"
			cancelButton="none"
			@confirm="search"
		/>
	</view>
	<!-- 轮播图 effect3d-->
	<view class="wrap">
		<u-swiper
			:list="indexData?.banner"
			name="url"
			height="400"
			img-mode="scaleToFill"
			effect3d
			effect3d-previous-margin="200"
			indicator-pos="topRight"
			mode="number"
		></u-swiper>
	</view>
	<!-- 宫格布局 -->
	<u-grid :col="6" class="grid" @tap="clickGrid">
		<block v-for="(item, index) in indexData?.channel" :key="item.id">
			<u-grid-item v-if="item.name !== '客户机器'" :index="{ id: item.id, index }">
				<u-icon
					:name="
						item.iconUrl.split('http').length > 1
							? item.iconUrl
							: baseUrl + item.iconUrl
					"
					:size="46"
				></u-icon>
				<view class="grid-text">{{ item.name }}</view>
			</u-grid-item>
		</block>
	</u-grid>

	<view class="goods">
		<!-- 人气推荐 -->
		<view class="Hot">
			<view style="padding: 20rpx 20rpx;">
				<u-section
					title="人气推荐"
					sub-title="查看更多"
					:show-line="false"
					@click="toHot"
				/>
			</view>
			<goodsItem
				v-for="item in indexData?.hotGoodsList"
				:src="item.picUrl"
				:name="item.name"
				:brief="item.brief"
				:counterPrice="item.counterPrice"
				:retailPrice="item.retailPrice"
				@tap="hotGoods(item)"
			/>
		</view>
		<!-- 新品首发 -->
		<view class="new" style="margin-top: 20rpx;">
			<view style="padding: 20rpx 20rpx;">
				<u-section
					title="新品首发"
					sub-title="查看更多"
					:show-line="false"
					@click="toNew"
				/>
			</view>
			<uni-row>
				<uni-col :span="12" v-for="(item, index) in indexData?.newGoodsList" :key="item.id">
					<view class="goods-item" @tap="newGoods(item)">
						<image
							class="goods-img"
							:src="
								item.picUrl.split('http').length > 1
									? item.picUrl
									: baseUrl + item.picUrl
							"
						></image>
						<view class="goods-infos">
							<uni-row>
								<uni-col :span="24">
									<text class="goods-title">{{ item.name }}</text>
								</uni-col>
								<uni-col>
									<uni-row>
										<uni-col :span="24">
											<!-- <text class="goods-price">
												<text class="unit">￥</text>
												<text class="price">{{ item.counterPrice }}</text>
											</text> -->
										</uni-col>
										<!-- <uni-col :span="12">
										<text class="goods-sales-count">
											<text>销量</text>
											<text>{{ item.sales }}</text>
										</text>
									</uni-col> -->
									</uni-row>
								</uni-col>
							</uni-row>
						</view>
					</view>
				</uni-col>
			</uni-row>
		</view>

		<!-- 专题精选 -->
		<view class="topic" style="margin-top: 20rpx;">
			<view style="padding: 20rpx 20rpx;">
				<u-section
					title="专题精选"
					sub-title="查看更多"
					:show-line="false"
					@click="toTopicList"
				/>
			</view>
			<u-row gutter="16" justify="start">
				<u-col
					v-for="item in indexData?.topicList"
					:key="item.id"
					span="6"
					style="height: 500rpx; background-color: #fff; border: 1px solid #ebedf0; padding: 32rpx 16rpx;"
					@click="toTopic(item)"
				>
					<view class="topic-item">
						<u-image
							width="100%"
							height="260rpx"
							mode="aspectFit"
							:src="
								item.picUrl.split('http').length > 1
									? item.picUrl
									: baseUrl + item.picUrl
							"
							style="text-align: center;"
						></u-image>
						<view class="title">
							<view>{{ item.title }}</view>
							<view class="text">{{ item.subtitle }}</view>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { homeIndex } from '@/api/index';
import goodsItem from '@/components/goodsItem.vue';
import config from '@/utils/config';

let baseUrl = config.baseUrl;

const indexData = ref();

const search = (val: any) => {
	uni.navigateTo({ url: './search?keyword=' + val.value });
};

// const clickGrid = (index: any) => {
// 	uni.navigateTo({ url: '/pages/category/items?id=' + index });
// };

const clickGrid = (e: any) => {
	uni.reLaunch({ url: `/pages/category/index?data=${JSON.stringify(e)}` });
};

const newGoods = (row: any) => {
	uni.navigateTo({ url: '/pages/goods/index?id=' + row.id });
};

const hotGoods = (row: any) => {
	uni.navigateTo({ url: '/pages/goods/index?id=' + row.id });
};
const toNew = () => {
	uni.navigateTo({ url: '/pages/category/new' });
};

const toHot = () => {
	uni.navigateTo({ url: '/pages/category/hot' });
};

const toTopicList = () => {
	uni.navigateTo({ url: '/pages/category/topicList' });
};

const toTopic = (row: any) => {
	uni.navigateTo({
		url: `../category/topic?id=${row.id}`,
		fail(err) {
			console.log(err);
		},
	});
};

const initIndex = () => {
	homeIndex().then((res: any) => {
		if (res.data.code === 200) {
			indexData.value = res.data.data;
			indexData.value.banner.forEach((item: any) => {
				if (item.url.split('http').length <= 1) {
					item.url = baseUrl + item.url;
				}
			});
		}
	});
};
initIndex();
</script>

<style lang="scss">
// page {
// 	filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
// 	-webkit-filter: grayscale(100%);
// }
.grid {
	padding: 16rpx;
	.grid-text {
		width: 90%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		font-size: 24rpx;
		margin-top: 2rpx;
	}
}

.text {
	font-size: 14px;
	margin-top: 5px;
}

.uni-grid-item__box {
	align-items: center;
	justify-content: center;
}

.goods-item {
	width: auto;
	height: 380rpx;
	background-color: #ffffff;
	margin: 5rpx;
	border-radius: 25rpx;
	overflow: hidden;
	.goods-img {
		width: 100%;
		height: 300rpx;
	}
	.goods-infos {
		margin: 6rpx 10rpx;
		.goods-title {
			font-size: 16px;
			font-family: arial, sans-serif;
			display: -webkit-box;
			word-break: break-all;
			text-overflow: ellipsis;
			overflow: hidden;
			margin-bottom: 30rpx;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
		}
		.goods-price {
			color: #dd524d;
			font-family: arial, sans-serif;
			display: flex;
			justify-content: flex-end;
			font-size: 10px;
			.price {
				margin: 40rpx 20rpx 0 0;
				font-size: 16px;
				font-weight: bold;
			}
		}
		.goods-sales-count {
			//margin-right: 10rpx;;
			text-align: right;
			font-size: 10px;
			color: #999999;
		}
	}
}

.topic {
	width: 100%;
	.topic-item {
		.title {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: rgb(171, 149, 109);
			.text {
				overflow: hidden;
			}
		}
	}
}
</style>
