<template>
	<view class="content">
		<nav-bar>
			<view class="top-container">
				<image class="logo" src="/static/logo.png" />
				<view class="countdown">
					距开幕 <view class="days"> 168 </view> 天
				</view>
			</view>
		</nav-bar>
		<u-swiper :items="images" indicato-dots-style="morphing" :height="387" />
		<view class="main-container">
			<u-search v-model="searchKeyword" placeholder="搜索展商 / 展品名称 / 会议" @search="onClickSearch"/>
			<view class="nav-icons">
				<template v-for="(item, index) in navIcons">
					<view class="nav-icon-wrapper display-flex-center" :key="index">
						<view class="nav-icon display-flex-center">
							<view v-if="item.icon.indexOf('.svg') !== -1" :style="'background-image:url(' + item.icon +  ')'"></view>
							<view v-else-if="item.icon.indexOf('icon-') !== -1" :class="'iconfont ' + item.icon"></view>
						</view>
						<view class="nav-text">
							{{ item.name }}
						</view>
					</view>
				</template>
			</view>
			<u-panel title="精彩视频" link="/pages/components/index">
				<u-swiper :items="videos" :height="360" :autoplay="false" :border-radius="10" :image-width="508" :image-height="286"
					next-margin="100rpx" />
			</u-panel>
			<u-panel title="精彩图集" link="/pages/components/index">
				<view class="album">
					<template v-for="(item, index) in albumPics">
						<view class="album-pic">
							<image :src="item.src" mode="aspectFill" />
						</view>
					</template>
				</view>
			</u-panel>
			<u-panel title="新闻" link="/pages/components/index">
				<news-recommend />
			</u-panel>
			<u-panel title="战略合作方" link="/pages/components/index">
				<u-swiper :items="partners" :height="250">
					<template v-slot="{ scope }">
						<view class="partners">
							<template v-for="item in scope.children">
								<view class="partner">
									<image :src="item.icon" />
								</view>
							</template>
						</view>
					</template>
				</u-swiper>
			</u-panel>
			<u-panel title="推荐展商" link="/pages/components/index">
				<u-swiper :items="partners" :height="250">
					<template v-slot="{ scope }">
						<view class="partners">
							<template v-for="item in scope.children">
								<view class="partner">
									<image :src="item.icon" />
								</view>
							</template>
						</view>
					</template>
				</u-swiper>
			</u-panel>
			<u-panel title="合作媒体" link="/pages/components/index">
				<u-swiper :items="partners" :autoplay="false" :height="250">
					<template v-slot="{ scope }">
						<view class="partners">
							<template v-for="item in scope.children">
								<view class="partner">
									<image :src="item.icon" />
								</view>
							</template>
						</view>
					</template>
				</u-swiper>
			</u-panel>
		</view>
	</view>
</template>

<script>

	import NewsRecommend from '@/pages/news/components/news-recommend.vue'

	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			NewsRecommend
		},
		data() {
			return {
				searchKeyword: '',
				navIcons: [{
					icon: 'icon-xiaochengxu-guanyuzhanhuiicon',
					name: '关于展会',
					url: ''
				}, {
					icon: 'icon-xiaochengxu-zhanshangmingluicon',
					name: '展商名录',
					url: ''
				}, {
					icon: 'icon-zhanpinziliaoicon',
					name: '展商产品',
					url: ''
				}, {
					icon: 'icon-zhantaihuodongicon',
					name: '同期活动',
					url: ''
				}, {
					icon: 'icon-zhanshangxinwenicon',
					name: '展商新闻',
					url: ''
				}, {
					icon: 'icon-xiaochengxu-zhanguanpingmiantuicon',
					name: '展馆平面图',
					url: ''
				}, {
					icon: 'icon-xiaochengxu-guanzhongzhinanicon',
					name: '观众指南',
					url: ''
				}, {
					icon: 'icon-xiaochengxu-jiaotongzhinanicon',
					name: '交通指南',
					url: ''
				}],
				images: [{
					src: '/static/img/example/banner.png',
					url: 'https://www.productronicachina.com.cn/',
					
				}, {
					src: '/static/img/example/banner.png',
					url: 'https://www.productronicachina.com.cn/'
				}, {
					src: '/static/img/example/banner.png',
					url: 'https://www.productronicachina.com.cn/'
				}],
				videos: [{
					src: '/static/img/example/video.jpeg',
					url: 'https://matchexpo.obs.cn-north-1.myhuaweicloud.com/common/2023/1113/655190052f376.mp4'
				}, {
					src: '/static/img/example/video.jpeg',
					url: 'https://matchexpo.obs.cn-north-1.myhuaweicloud.com/common/2023/1113/655190052f376.mp4'
				}],
				albumPics: [{
					src: '/static/img/example/album/1.jpeg'
				}, {
					src: '/static/img/example/album/2.jpeg'
				}, {
					src: '/static/img/example/album/3.jpeg'
				}, {
					src: '/static/img/example/album/4.jpeg'
				}, {
					src: '/static/img/example/album/5.jpeg'
				}, {
					src: '/static/img/example/album/6.jpeg'
				}],
				// 合作方列表
				partners: [{
					name: '第一页',
					children: [{
						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a454718d/1 中国工控网.png'
					}, {
						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b806511810/2 智汇工业.png'
					}, {
						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a4536d7e/4 SMT China&化合物半导体.png'
					}, {
						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a451f071/3 中国电子制造&亚洲控制.png'
					}, {
						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a454718d/1 中国工控网.png'
					}, {
						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b806511810/2 智汇工业.png'
					}, {
						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a4536d7e/4 SMT China&化合物半导体.png'
					}, {
						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a451f071/3 中国电子制造&亚洲控制.png'
					}]
				}, {
					name: '第二页',
					children: [{
						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a454718d/1 中国工控网.png'
					}, {
						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b806511810/2 智汇工业.png'
					}, {
						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a4536d7e/4 SMT China&化合物半导体.png'
					}, {
						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a451f071/3 中国电子制造&亚洲控制.png'
					}, {
						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a454718d/1 中国工控网.png'
					}, {
						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b806511810/2 智汇工业.png'
					}, {
						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a4536d7e/4 SMT China&化合物半导体.png'
					}, {
						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a451f071/3 中国电子制造&亚洲控制.png'
					}]
				}],
			}
		},
		created() {
			uni.loadFontFace({
				family: 'Poppins',
				source: 'url("https://oss.starify.cn/test/Poppins-SemiBold.ttf")',
				desc: {
					fontPath: '', // 本地字体文件的路径
				},
				success: () => {
					console.log('字体加载成功');
				},
				fail: (e) => {
					console.log(e)
					console.error('字体加载失败');
				},
			})
		},
		methods: {
			onClickSearch() {
				console.log(this.searchKeyword)
			}
		}
	}
</script>

<style lang="scss">
	.logo {
		width: 150rpx;
		height: 37rpx;
	}

	.top-container {
		display: flex;
		align-items: center;
		.countdown {
			display: flex;
			align-items: center;
			margin-left: 27rpx;
			font-size: $fontSize2;
			.days {
				color: #F97316;
				font-size: $fontSize5;
				font-weight: bold;
				padding: 0 4rpx;
			}
		}
	}

	.search-container {
		.search-input {
			height: 64rpx;
			border-radius: 50rpx;
			background-color: #FFFFFF;
			box-shadow: 0 4rpx 4rpx 0 rgba(0, 0, 0, 0.15);
			border: 2rpx solid #D9D9D9;
			padding: 4rpx;
			overflow: hidden;
			.van-field__placeholder{
				font-size: $fontSize1;
			}
			.van-cell__left-icon-wrap{
				height: 50rpx;
			}
			.van-field__control{
				font-size: $fontSize1;
				height: 50rpx;
			}
		}
		
		.van-search {
			--search-padding: 0rpx;
			--search-input-height: 34rpx;
			--search-background-color: #FFFFFF;
			padding-right: 24rpx;
			font-size: $fontSize1;
		}
		.search-text{
			font-size: $fontSize1;
		}

		.van-search__action {
			color: #333333;
		}

		.van-icon {
			color: #D4D4D6;
		}

		.van-cell {
			padding: 2rpx 0rpx 2rpx !important;
		}
	}

	.nav-icons {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-row-gap: 53rpx;
		margin-top: 47rpx;
		margin-bottom: 41rpx;

		.nav-icon-wrapper {
			flex-direction: column;
		}

		.nav-text {
			margin-top: 20rpx;
			font-size: $fontSize2;
			color: #555555;
		}

		.nav-icon {
			width: 73rpx;
			height: 73rpx;
			border-radius: 50%;
			overflow: hidden;
			background-color: $buttonPrimaryColor;
			.iconfont{
				font-size: 46rpx;
				color: #FFFFFF;
			}
			&>view {
				width: 46rpx;
				height: 46rpx;
				background-size: 46rpx 46rpx;
			}
		}
	}

	.album {
		display: grid;
		grid-auto-flow: row;
		grid-gap: 15rpx;
		height: 500rpx;
		width: fit-content;
		grid-template-areas: "a b b" "c d f" "c e f";

		.album-pic {
			width: 196rpx;
			height: 155rpx;
			border-radius: 10rpx;
			overflow: hidden;

			&:nth-child(1) {
				grid-area: a;
			}

			&:nth-child(2) {
				width: 418rpx;
				height: 155rpx;
				grid-area: b;
			}

			&:nth-child(3) {
				grid-area: c;
			}

			&:nth-child(4) {
				grid-area: d;
			}

			&:nth-child(5) {
				grid-area: e;
			}

			&:nth-child(6) {
				grid-area: f;
			}

			&:nth-child(3),
			&:nth-child(6) {
				width: 196rpx;
				height: 324rpx;
			}
		}

		image {
			width: 100%;
			height: 100%;
		}
	}

	.partners {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-column-gap: 9rpx;
		grid-row-gap: 13rpx;
		.partner{
			@extend .display-flex-center;
			width: 150rpx;
			height: 91rpx;
		}
		image {
			width: 127rpx;
			height: 25rpx;
		}
	}
	
</style>