<template>
	<view class="page-wrapper" :style="{
			paddingTop: (customTop+customHeight+45) + 'px',}"
		>
		<view class="topBar" ref="top"></view>
		
		
		<view class="mp-search-box" :style="{
			  top: (customTop+customHeight) + 'px',}"
		>
			<view class="wrapper">
				<view class="">
					<picker style="width: 108upx;float: left;" @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{array[index]}}</view>
					</picker>
					<u-icon style="float: left;width:20px;" name="arrow-down-fill" color="#A1A1A1" size="20"></u-icon>
					
				</view>
				<text style="font-size: 14px; color: #ded7d7;">|</text>
				<u-icon style="float: left;width:20px;" name="search" color="#A1A1A1" size="20"></u-icon>
				
				<input class="ser-input" type="text" placeholder="搜索工具ID、关键字" />
			</view>
		</view>
		

		<view class="u-demo-block">
			<u-swiper
				:list="list6"
				@change="e => current = e.current"
				:autoplay="false"
				imgMode="widthFix"
			>
				<view
						slot="indicator"
						class="indicator"
				>
					<view
						class="indicator__dot"
						v-for="(item, index) in list6"
						:key="index"
						:class="[index === current && 'indicator__dot--active']"
					>
					</view>
				</view>
			</u-swiper>
		</view>
		<view class="cateWrapper">
			<cate-list :dataList="cateData"></cate-list>
		</view>
				 
		<cell class="qiyeQun" bind:startmessage='startmessage' bind:completemessage="completemessage" url='https://work.weixin.qq.com/gm/f9d0268e8d47a10e8925a8bd589e2eb3'  />
				
		<view class="hotTool">
			<view class="left">
				<image src="../../static/minestar/hotool-01.png"></image>
				<!-- <p>应用推荐</p>
				<h3>便捷工具</h3>
				<div style="color: #fff;background-color: orangered;width: 42upx;height: 22upx;line-height: 22upx;font-size: 20upx;">new</div> -->
			</view>
			<view class="right">
				<view class="item1">
					<!-- <p>热门教程</p>
					<h3>教学矿山应用</h3> -->
					<image src="../../static/minestar/hotool-02.png"></image>
				</view>
				<view class="item2">
					<!-- <p>热门微信</p>
					<h3>微信共享资源</h3> -->
					<image src="../../static/minestar/hotool-03.png"></image>
				</view>
			</view>
		</view>
		<view class="tabWrapper">
			<u-tabs :list="list1" @click="click"></u-tabs>
			<view class="line"></view>
		</view>
		 
		<view class="list">
			<list-item></list-item>
		</view>

	</view>
</template>

<script>
	import cateList from '@/components/cate-list.vue';
	import listItem from '@/components/list-item.vue';
	import { customTabar } from "@/common/js/mixins.js";
	export default {
		mixins: [customTabar],
		components: {
			listItem,
			cateList,
			cell: "plugin://chatGroupPlugin/cell"
		},
		data() {
			return {
				current:0,
				 list6: [
					// 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'/static/minestar/banner.png',
				],
				list1: [{
					name: '全部11',
				}, {
					name: '最新',
				}],
				array: ['中国', '美国', '巴西', '日本'],
				index: 0,
				toolList: [],
				cateData: [{
				   src: '/static/minestar/01.png',
				   name: '地质'
				},{
				   src: '/static/minestar/02.png',
				   name: '测绘'
				},{
				   src: '/static/minestar/03.png',
				   name: '通风'
				},{
				   src: '/static/minestar/04.png',
				   name: '采矿'
				},{
				   src: '/static/minestar/05.png',
				   name: '爆破'
				},]
			};
		},
		onLoad() {
			// this.loadData();
			for (var i = 0; i < 10; i++) {
				this.toolList.push({
					index: i,
					name: '体积计算'
				})
			}
		},
		methods: {
			gotoQun(){
				uni.navigateTo({
					url: 'https://work.weixin.qq.com/gm/f9d0268e8d47a10e8925a8bd589e2eb3'
				})
			},
			
			startmessage(){
				console.log('监听按钮点击事件执行开始时的回调');
			},
			completemessage(){
				console.log('监听按钮点击事件执行完毕后的回调');
			},
			useErrCallback(){
				
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			
		},
	}
</script>

<style lang="scss" scoped>
	::v-deep .qiyeQun {
		image{
			border-radius: 50% !important;
		}
	}
	
	::v-deep .u-tabs__wrapper__nav{
		height: 48px !important;
	}
	::v-deep .u-tabs__wrapper__nav__item{
		height: 50px !important;
	}
	
	.page-wrapper{
		padding-top: 248rpx;
		background-color: #fff;
	}
	$hotMargin: 16upx;
	$pagePadding: 20upx; // 用于模块元素整体的边距
	@mixin rounded-corners{
		border-radius: 20rpx;
	}
	.list{
		background-color: #f7f7f7;
	}
	.topBar{
		// background-image: url('~@/pages/bg.png');
		// background-image: url('~@/static/minestar/tabarBg1.jpg');
		@include topBar();
	}

	.mp-search-box{
		width: 100%;
		padding: 20upx 20upx;
		height: 120upx;
		position: fixed;
		top: 136upx;
		z-index: 501;
		.wrapper{
			width: 94vw;
			display: flex;
			border: 4upx solid #1f1f1f;
			border-radius: 40upx;
			height: 60upx;
			background-color: #fff;	
			.ser-input{
				flex:1;
				height: 56upx;
				line-height: 56upx;
				text-align: left;
				font-size: 28upx;
				color:$font-color-base;
				border-radius: 20px;
				background: rgba(255,255,255,.6);
			}
		}
	}
	
	::v-deep .uni-input{
		font-size: 24upx;
		line-height: 50upx;
		text-align: center;
	}
	    
	::v-deep .u-icon__icon.uicon-arrow-down-fill{
		font-size: 16upx !important;
		position: absolute !important;
	    left: 108upx;
		top: 32upx !important;
		
	}
	.hotTool{
		display: flex;
		height: 300rpx;
		padding: $pagePadding;
		background-color: #fff;
		image{
			width: 100%;
			height: 100%;
		}
		.left{
			margin-right: $hotMargin;
			padding-left: 20upx;
			padding-top: 20upx;
			flex: 1;
			background-color: #FCDFE0;
			p{
				font-weight: bold;
				font-size: 40upx;
			}
			h3{
				font-size: 24upx;
				color: darkgray;
			}
			@include rounded-corners;
		}
		.right{
			flex: 1.2;
			.item1, .item2{
				display: flex;
				align-items: flex-start;
				flex-direction: column;
				justify-content: center;
				height: 142rpx;
				padding-left: $hotMargin;
				background-color: #FCF9D1;
				@include rounded-corners;
				p{
					font-size: 32upx;
					font-weight: bold;
				}
				h3{
					font-size: 20upx;
					color: darkgray;
				}
			}
			.item2{
				margin-top: $hotMargin;
			}
		}
	}
	// 轮播图
	.u-demo-block{
		 padding: $pagePadding;
		 .indicator {
		 	@include flex(row);
		 	justify-content: center;
		 
		 	&__dot {
		 		 height: 10upx;
		 		 width: 10upx;
		 		 border-radius: 200upx;
		 		 background-color: rgba(255, 255, 255, 0.35);
		 		 margin: 0 5px;
		 		 transition: background-color 0.3s;
		 
		 		&--active {
		 			 background-color: #ffffff;
		 		 }
		 	}
		 }
	}
	
	// .tabWrapper{
	// 	position: relative;
	// 	// background: url('/static/minestar/bottomLine.png');
	// 	.line{
	// 		position: absolute;
	// 		top: 45px;
	// 		width: 100%;
	// 		border-bottom: 1px solid #af9a9a;
	// 		box-shadow: 1px 1px 1px 0px #dacbcb;
	// 	}
	// }
</style>
