<template>
	<view style="background: #f5f5f5; padding-bottom: 1rpx;">
		<view class="home-top">
			<swiper v-if="images.length !== 0" class="home-top-swiper" :autoplay="true" :interval="5000" :duration="500" :indicator-dots="true" :circular="true">
				<swiper-item v-for="(item,index) in images" :key="index">
					<image class="item_img" :src="item.pic_url + '?x-oss-process=image/format,webp'" :webp="true" @click="onSwiperItem(item.link)"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="Minute">
			<view class="box" @click="hanlejump('/pages/sale/index')">
				<view class="h3">超级爆品&nbsp;<view class="small">GO <up-icon name="arrow-right" size="10" /></view></view>
				<view style="display: flex;">
					<template v-for="(item, index) in hot" :key="index">
						<view v-if="index < 2">
							<view class="red">{{item.title}}</view>
							<view><image :src="item.face_img + '?x-oss-process=image/format,webp'" :webp="true" class="imgs" mode="aspectFill"></image></view>
						</view>
					</template>
				</view>
			</view>
			<view class="box" @click="hanlejump('/pages/sale/list?type=1')">
				<view class="h3">TOP榜单&nbsp;<view class="small1">GO <up-icon name="arrow-right" size="10" /></view></view>
				<view style="display: flex;">
					<template v-for="(item, index) in top" :key="index">
						<view v-if="index < 2">
							<view class="bule">{{item.title}}</view>
							<view><image :src="item.face_img + '?x-oss-process=image/format,webp'" :webp="true" class="imgs" mode="aspectFill"></image></view>
						</view>
					</template>
				</view>
			</view>
		</view>
		
		<template v-for="(list, index) in merchant" :key="list.id">
			<view v-if="list.shop_goods.length !== 0" class="shop">
				<view v-if="list.sold_status != 2">
					<view class="banner" @click="jumpHall(list.id)">
						<image :src="list.ad_image + '?x-oss-process=image/format,webp'" :webp="true" mode="widthFix" class="img"></image>
					</view>
					<view class="title">
						<view class="activeTitle">
							<view class="name">{{list.name}}</view>
							<view class="toActive" @click="jumpHall(list.id)">进入会场</view>
						</view>
						<view class="activeTitle" style="margin-top: 10rpx;height: 44rpx;">
							<view>
								<view class="move" v-if="list.actives && list.actives.length > 0">
									{{list.actives && list.actives.length > 0 ? list.actives[0].name : ''}}
								</view>
								<view class="move">7天无理由</view>
							</view>
							<view class="endtime" v-if="list.sold_status == 1 && list.sold_off_time" v-html="DownTime(list.sold_off_time, 1)"></view>
							<view class="endtime" v-if="list.sold_status == 0" v-html="UpTime(list.sold_start_time, 1)"></view>
						</view>
						
						<view class="goodscommodity">
							<view class="goodsgun" v-for="(it, index) in list.shop_goods" :key="index" @click="toDetail(it.id)">
								<image :src="it.face_img + '?x-oss-process=image/resize,m_fill,w_300,h_300'" :webp="true" class="img" mode="aspectFill"></image>
								<view class="price_list">
									<text class="icon">￥</text>
									<text v-if="it.price > 0">{{it.price}}</text>
									<block v-else>
										<text v-if="it.max_price == it.min_price">{{it.min_price}}</text>
										<text v-else>{{it.min_price * 1}}~{{it.max_price}}</text>
									</block>
								</view>
							</view>
							<view v-if="list.shop_goods.length" @click="jumpHall(list.id)" class="viewmore">
								<text>查看更多</text>
								<view class="line"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import { ref, reactive, toRefs, onMounted } from 'vue'
	import { get, post } from '@/api/request.js'
	import { UpTime, DownTime } from '@/components/common.js'
	export default {
		props: {
			
		},
		setup() {
			const data = reactive({
				images: [],
				hot: [],
				top: [],
				merchant: [],
				total: 0,
				page: 1,
				endTime: '',
				Color: ''
			})
			//跳转页面
			const hanlejump = (url) => {
				uni.navigateTo({
					url
				})
			}
			// 获取轮播图
			const getbanner = async () => {
				let res = await get('/api/v1/special/banner')
				data.images = res.data
			}
			//爆款
			const gethot = async () => {
				let res = await get('/api/v1/special/goods/hot')
				data.hot = res.data
			}
			//top榜
			const gettop = async () => {
				let res = await get('/api/v1/special/goods/top')
				data.top = res.data
			}
			//小店
			const getmerchant = async () => {
				uni.showLoading({
					title: '加载中...'
				})
				let res = await get('/api/v1/special/merchant', {
					page: data.page,
					limit: 5
				})
				data.merchant = data.merchant.concat(res.data)
				data.total = res.meta.last_page
				uni.hideLoading()
			}
			// 轮播图跳转
			function onSwiperItem(url) {
				if (url) {
					if(url.indexOf('type=category') !== -1) {
						uni.navigateTo({ url: '/pages/lotRecom/index?' + url.split('?')[1] })
					} else if(url.indexOf('type=shop_group') !== -1) {
						uni.navigateTo({ url: '/pages/subset/index?' + url.split('?')[1] })
					} else {
						uni.navigateTo({ url: url })
					}
				}
			}

			const toDetail = (id) => {
				uni.navigateTo({
					url: '/pages/productDetails/index?id=' + id
				})
			}
			const jumpHall = (id) => {
				uni.navigateTo({
					url: '/pages/smallshop/index?id=' + id
				})
			}
			onMounted(() => {
				data.Color = uni.getStorageSync('theme_color')
				getbanner()
				gethot()
				gettop()
				getmerchant()
			})
			return {
				...toRefs(data),
				hanlejump,
				onSwiperItem,
				toDetail,
				jumpHall,
				getmerchant,
				DownTime,
				UpTime
			}
		},
		onReachBottom() {
			if (this.page < this.total) {
				this.page++
				this.getmerchant()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.activeTitle {
		display: flex;
		justify-content: space-between;
		.toActive {
			background-color: v-bind('Color');
			border-radius: 44rpx;
			color: #fff;
			padding: 4rpx 22rpx;
			font-size: 28rpx;
			height: 38rpx;
			line-height: 38rpx;
		}
		.move {
			display: inline-block;
			border: 1px solid v-bind('Color');
			color:v-bind('Color');
			padding: 6rpx 10rpx;
			font-size: 24rpx;
			border-radius: 6rpx;
			line-height: 1;
			margin-left: 8rpx;
		}
		.endtime {
			font-size: 24rpx;
			color: #999999;
			line-height: 44rpx;
			b{
				color: #2c2c2c;
			}
		}
	}

	.market_price {
		display: block;
		color: #676767;
		text-decoration: line-through;
		font-size: 25rpx;
	}
	.go1 {
		margin-top: 108rpx;
	}
	.go {
		margin-top: 133rpx;
	}
	.shop {
		background: #fff;
		border-radius: 10rpx;
		margin: 24rpx 20rpx;
		.banner {
			width: 100%;
			.img {
				width: 100%;
				height: 100%;
				border-top-left-radius: 10rpx;
				border-top-right-radius: 10rpx;
			}
		}

		.title {
			padding: 25rpx 13rpx;
			.name {
				font-weight: bolder;
				font-size: 30rpx;
				margin-left: 15rpx;
			}
			.goodscommodity {
				display: flex;
				margin-top: 25rpx;
				overflow: auto;
				.goodsgun {
					padding: 0 10rpx;
					box-sizing: border-box;
					overflow: hidden;
					flex-shrink: 0;
					width: 36%;
					.img {
						width: 214rpx;
						height: 214rpx;
						border-radius: 6rpx;
					}
					.title_list {
						font-size: 26rpx;
						color: #2c2c2c;
						margin: 10rpx 0;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}
					.price_list {
						font-size: 26rpx;
						margin-top: 16rpx;
						.icon {
							font-size: 24rpx;
						}
					}
				}
				.viewmore{
					width: 214rpx;
					height: 214rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 6rpx;
					font-size: 28rpx;
					flex-direction: column;
					background-color: #F5F5F5;
					.line{
						width: 70%;
						height: 2px;
						background-color: #333;
						margin-top: 30rpx;
					}
				}
			}
		}
	}

	.home-top-swiper {
		width: 100%;
		height: 500rpx;
		.item_img {
			width: 100%;
			height: 100%;
		}
	}

	.Minute {
		display: flex;
		border-radius: 20rpx;
		align-items: center;
		justify-content: center;
		background: #fff;
		margin: 24rpx 20rpx;
		padding: 26rpx 26rpx;
		box-sizing: border-box;
		.box {
			width: 50%;
			.h3 {
				font-weight: bolder;
				font-size: 30rpx;
				display: flex;
				align-items: center;
			}
			.small {
				background: #F14939;
				color: #fff;
				font-size: 24rpx;
				font-weight: normal;
				border-radius: 15rpx;
				display: inline-flex;
				width: 60rpx;
				height: 30rpx;
				align-items: center;
				justify-content: space-between;
				padding: 0 10rpx;
			}
			.red {
				color: #F14939;
				font-size: 26rpx;
				margin: 20rpx 0;
				width: 166rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.bule {
				color: #6bb3f2;
				font-size: 26rpx;
				margin: 20rpx 0;
				width: 166rpx;
				overflow: hidden; /*内容超出后隐藏*/
				text-overflow: ellipsis; /* 超出内容显示为省略号 */
				white-space: nowrap; /* 文本不进行换行 */
			}

			.small1 {
				background: #6bb3f2;
				color: #fff;
				font-size: 24rpx;
				font-weight: normal;
				border-radius: 15rpx;
				display: inline-flex;
				width: 60rpx;
				height: 30rpx;
				align-items: center;
				justify-content: space-between;
				padding: 0 10rpx;
			}

			.imgs {
				width: 140rpx;
				height: 140rpx;
			}
		}
	}
</style>
