<template>
	<view class="main">
		<view class="flexB" style="padding: 24rpx;">
			<view class="" style="width: 100%;">
				<view class="searchcity">
					<view class="flexB oneh" style="justify-content: center;" @click.stop="goRot('/pages/subPages/moreChoose')">
						<view class="city " style="max-width: 120rpx;overflow: hidden;text-overflow: ellipsis;">
							{{city_name ? city_name : '城市'}}
						</view>
						<image class="img1" src="/static/icon/xia.png" mode=""></image>
					</view>
					
					<view class="searchline">
						|
					</view>
					<image class="img2" src="/static/icon/search.png" mode=""></image>
					<u-input type="text" placeholder="输入关键词搜索" confirm-type="search" style="border: none;" @confirm="confirm" v-model="keyword" placeholder-style="font-size: 26rpx;font-weight: 400;" />
				</view>
			</view>
		</view>
		<!-- 
		<view class="flexB" style="padding: 24rpx;justify-content: space-between;">
			<view class="flexB" style="width: 100%;height: 64rpx;">
				<u-input placeholder="请输入" prefixIcon="search" confirm-type="search" @confirm="confirm" border="surround" v-model="keyword" shape="circle"
					style="height: 22px;" >
					<view slot="prefix" style="display: flex; align-items: center; justify-content: center;"
						@click="goRot('/pages/subPages/moreChoose')">
						<text style="font-size: 24rpx; margin-right: 6rpx;"
							@click.stop="goRot('/pages/subPages/moreChoose')">{{city_name ? city_name : '城市'}}</text>
						<u-icon name="arrow-down-fill" size="20rpx"></u-icon>
					</view>
					
				</u-input>
			</view>
		</view> -->
		
		<view class="page">
			<scroll-view id="left-scroll" class="left-box" :scroll-y="true" :scroll-top="leftTop">
				<view class="left-box_item" :class="{'left-box_active':index==current}" v-for="(item,index) in category"
					@click="changeIndex(index)">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view class="right-box" :scroll-y="true">
				<swiper class="swiper" :current="current" :vertical="true" @change="changeSwiper">
					<swiper-item v-for="(item1,index1) in category" class="swipe_item">
						<u-grid :border="false" col="2" >
							<u-grid-item :customStyle="{marginBottom:'24rpx'}" v-for="(tool,toolIndex) in item1.children" @click="chooseDev(tool)"
								:key="toolIndex"  style="background-color: white;">
								<image  class="grid-icon" :src="tool.icon_url" mode=""></image>
								<text class="grid-text">{{tool.name}}</text>
								<!-- <view v-if="flag == 1">
									<view class="seeIn" @click="gold(tool)" v-if="tool.is_follow === 0">
										<u-icon name="plus" color="white" size="24rpx" style="margin-right: 20rpx"></u-icon>
										<text style="color: white;font-size: 24rpx;">关注</text>
									</view>
									<view class="seeIn" style="background: #f0f2f5ff;" @click="gold(tool)" v-else>
										<text style="color:  #00000099;font-size: 24rpx;">已关注</text>
									</view>
								</view> -->
								
							</u-grid-item>
							<!-- <block v-if="index==0">
								<u-grid-item :customStyle="{marginBottom:'24rpx'}" @click="addTool()">
									<image class="grid-icon" src="@/static/images/ic_tj.png" mode=""></image>
									<text class="grid-text">添加功能</text>
								</u-grid-item>
							</block> -->
						</u-grid>
					</swiper-item>
				</swiper>
		
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				current: 0,
				leftTop: 0,
				value:'',
				list:[],
				category: [],
				flag:null,
				city_id:'',
				city_name:''
			}
		},
		methods: {
			jumpUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			change(e){
				
			},
			changeSwiper(e) {
				this.changeIndex(e.detail.current);
			},
			goSearch(){
				uni.navigateTo({
					url:"/pages/subPages/moreChoose"
				})
			},
			chooseDev(item){
				
				
				//选择设备后跳转
				if(this.flag && (this.flag !== 1)){
					let pages = getCurrentPages();  //获取所有页面栈实例列表
					let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
					prevPage.$vm.category_id = item.id;   
					prevPage.$vm.name = item.name;   
					uni.navigateBack({  //uni.navigateTo跳转的返回，默认1为返回上一级
						delta: 1
					});
				}
			},
			getList(){
				uni.$u.http.get(`/api/common/category_list?keyword=${this.keyword}`).then(res => {
					console.log(res);
					this.category = res.data
				}).catch(err => {
					console.log(err);
				})
			},
			confirm() {
				this.getList()
					
			},
			gold(item){
				uni.$u.http.post('/api/common/follow',{category_id: item.id}).then(res => {
					uni.showToast({
						title: res.msg
					})
					
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: err.msg
					})
				}).finally(() => {
					this.getList()
				})
			},
			goRot(url) {
				uni.navigateTo({
					url: url
				})
			},
			changeIndex(val) {
				this.current = val;
				let count = this.category.length;
				const query = uni.createSelectorQuery().in(this);
				let nodesRef = query.select('#left-scroll');
				let that = this;
				nodesRef.boundingClientRect(res => {
						this.$nextTick(() => {
							var height = res.height || 0;
							if (height > 0 && count > 0) {
								that.leftTop = val / count * height;
							}
			
						});
					}).exec();
			}
		},
		onLoad(option) {
			console.log(option);
			this.flag = option.val
			this.getList()
		},
		onShow() {
			let pagearr = getCurrentPages(); //获取应用页面栈
			let currentPage = pagearr[pagearr.length - 1]; //获取当前页面信息
			console.log('option:', currentPage) //获取页面传递的信息
			this.city_id = currentPage.$vm.city_id
			this.city_name = currentPage.$vm.city_name
			this.getList()
		},
	}
</script>

<style scoped lang="scss">
.main{
	background: #f7f8faff;
	padding: 24rpx;
}
.flexB{
	display: flex;
	align-items: center;
}
.page {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-right: 28rpx;
		box-sizing: border-box;
	}

	.left-box {
		width: 190rpx;
		height: calc(100vh - 100px);

		&_item {
			width: 190rpx;
			height: 64rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding: 0 24rpx;
			margin-bottom: 24rpx;
			box-sizing: border-box;
			color: rgb(100, 101, 102);
			font-size: 26rpx;
		}

		&_active {
			width: 190rpx;
			height: 64rpx;
			font-weight: 600;
			font-size: 28rpx;
			color: rgba(46, 122, 253, 1);
			padding-bottom: 4rpx;
			border-bottom: 1px solid  rgba(46, 122, 253, 1);
		}

	}
	.search-box{
		margin: 24rpx!important;
	}
	.right-box {
		width: 542rpx;
		height: calc(100vh - 100px);
		border-radius: 16rpx;
		// background: rgb(255, 255, 255);
		margin-left: 60rpx;
		box-sizing: border-box;
	
		.swiper {
			height: 100%;
			
		}
		/deep/ .u-grid-item{
			background-color: white!important;
			padding: 12px 0!important;
		}
		.grid-icon {
			display: block;
			margin-bottom: 16rpx;
			width: 88rpx;
			height: 88rpx;
			border-radius: 24rpx;
			background: rgb(242, 246, 254);
		}
	
		.grid-text {
			color: rgba(0, 0, 0, 0.9);
			font-size: 24rpx;
		}
	}
	/deep/ .u-border{
		border: none;
	}
	.seeIn{
		width: 142rpx;
		height: 48rpx;
		border-radius: 8rpx;
		opacity: 1;
		margin-top: 20rpx;
		color: white;
		background: #3375d8ff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.oneh{
		white-space: nowrap;
		    overflow: hidden;
		    text-overflow: ellipsis;
	}
	.searchcity {
		display: flex;
		align-items: center;
		width: 100%;
		height: 68rpx;
		border-radius: 48rpx;
		opacity: 1;
		border: 1rpx solid #c1ddedff;
		background: #ffffffff;
		padding: 32rpx 24rpx;
		box-sizing: border-box;
	
		.city {
			color: #000000e6;
			font-size: 26rpx;
			font-weight: 400;
		}
	
		.img1 {
			margin-left: 4rpx;
			width: 32rpx;
			height: 32rpx;
		}
	
		.searchline {
			opacity: 0.6;
			margin:0 10rpx;
		}
	
		.img2 {
			margin-left: 4rpx;
			margin-top: 4rpx;
			width: 40rpx;
			height: 40rpx;
		}
		input{
			margin-top: 4rpx;
			flex:1;
			margin-left: 16rpx;
		}
	}
</style>