<template>
	<view class="exhibit-index exhibitor-index">
		<nav-bar title="展品信息" @init="onInitNavbar"></nav-bar>
		<u-scroll-view>
			<view class="main-container">
			<view class="exhibitor-filter">
				<view>
					<view class="exhibitor-filter-label">展馆号</view>
					<u-dropdown-select ref="select1" v-model="categoryId" placeholder="选择展馆号" :options="categories" @dropdown="onSelectDropdown(1)" /> 
				</view>
				<view>
					<view class="exhibitor-filter-label">产品类别</view>
					<u-dropdown-select ref="select2" v-model="categoryId" placeholder="选择产品类别" :options="categories" @dropdown="onSelectDropdown(2)" /> 
				</view>
				<view>
					<view class="exhibitor-filter-label">应用领域</view>
					<u-dropdown-select  ref="select3" v-model="categoryId" placeholder="选择应用领域" :options="categories" @dropdown="onSelectDropdown(3)" /> 
				</view>
			</view>
			<u-search v-model="searchKeyword" placeholder="搜索展商 / 展品名称 / 会议" @search="onSearch" />
			<view class="ad-space">
				<image src="/static/img/example/ad_690x90.png" mode="aspectFill"/>
			</view>
			<view class="exhibitor-list">
				<template v-for="item in [1, 2, 3]">
					<view class="exhibit-item exhibitor-item" hover-class="active" @click="onClickExhibit(item)">
						<view class="exhibit-body">
							<view class="exhibitor-body">
								<view class="exhibitor-logo"><image src="/static/img/example/exhibit.png" mode="widthFix" /></view>
								<view class="exhibitor-name">汽车连接器 86W MLK 1,2 SD-HOLDER</view>
								<view class="exhibitor-number">
									<view class="exhibitor-number-label">展位号:</view>
									<view class="exhibitor-number-text">E1.1101</view>
								</view>
							</view>
							<view class="exhibitor-name">
								<view class="exhibitor-name-cn">科世达（上海）连接器有限公司</view>
								<view class="exhibitor-name-en">Leopold Kostal GmbH & Co. KG</view>
							</view>
						</view>
						<view class="exhibitor-footer">
							<view class="exhibitor-views">浏览：30911</view>
							<view class="exhibitor-action">
								<view>
									<view class="iconfont icon-zhuanfa"></view>
									<view>分享</view>
								</view>
								<view>
									<view class="iconfont icon-Favourites-Add-Large"></view>
									<view>收藏</view>
								</view>
								<view>
									<view class="iconfont icon-Heart"></view>
									<view>点赞</view>
								</view>
								<view>
									<view class="iconfont icon-xiaochengxu-toupiaoicon"></view>
									<view>投票</view>
								</view>
							</view>
						</view>
					</view>
				</template>	
			</view>
		</view>
		</u-scroll-view>
	</view>
</template>

<script>

	export default {
		options: {
			// styleIsolation: 'shared'
		},
		components: {
		},
		computed: {
		},
		data() {
			return {
				scrollviewHeight: 0,
				searchKeyword: '',
				categories: [{
					label: '表面贴装',
					value: 1,
					children: [{
						label: '表面贴装技术',
						value: 11
					}, {
						label: 'PCB焊接和连接技术',
						value: 12
					}, {
						label: '测试测量和质量保证',
						value: 13
					}, {
						label: '电子组装自动化',
						value: 14
					}, {
						label: '生产物流和物流技术',
						value: 15
					}, {
						label: '清洗技术',
						value: 16
					}]
				}, {
					label: '线束加工',
					value: 2
				}, {
					label: '工厂自动化',
					value: 3
				}, {
					label: '点胶注胶',
					value: 4
				}, {
					label: '电子制造服务',
					value: 5
				}, {
					label: '未来服务',
					value: 6
				}]
			}
		},
		created() {
		},
		methods: {
			onSelectDropdown(index) {
				['select1', 'select2', 'select3'].forEach(v => {
					if (v !== 'select' + index) {
						this.$refs[v].hideDropdown()
					}
				})
			},
			onClickExhibit(item) {
				uni.navigateTo({
					url: '/pages/exhibitor/exhibit-detail'
				})
			},
			onSearch() {
			}
		}
	}
</script>

<style lang="scss">
	@import "@/static/style/exhibitor.scss";
	.exhibit-index{
		.exhibit-body{
			display: flex;
			flex-direction: column;
			&>.exhibitor-name{
				margin-left: 113rpx;
			}
			.exhibitor-name-cn{
				margin-bottom: 5rpx;
			}
			.exhibitor-name-cn,.exhibitor-name-en{
				color: #7d7d7d;
				font-size: $fontSize1;
				font-weight: normal;
			}
		}
		.exhibitor-body{
			&>.exhibitor-name{
				margin-left: 23rpx;
				line-height: 40rpx;
			}
		}
	}
</style>