<template>
	<view class="phoneBook">
		<loadlogo v-if="!loadlogo" />
		<view  v-if="loadlogo">
			<!-- 搜索 -->
			<view class="searchBigBox">
				<view class="searchBox">
					<input class="uni-input" @confirm="keySearch" v-model="search" confirm-type="search" placeholder-class="iconfont icon-sousuoxiao" placeholder=" 全部应用" placeholder-style="color:#bbbbbb;font-size:28upx;" />
					<!-- <view class="iconfont icon-sousuoxiao" style="height: 70upx;line-height: 70upx;color: #bbbbbb;"></view> -->
				</view>
			</view>
			<!-- 分类列表 -->
			<view class="classbox">
				<view class="phoneClassListBox" :style="{marginTop: (index !== 0)?'20upx':'0'}" v-for="(item,index) in list.parents" :key="key">
					<view class="classtitle" >
						<image class="titleimg" :src="item.logo" mode=""></image>
						<view class="dis-il-block f-28 titletext" style="">{{item.name}}</view>
					</view>
					<view class="dis-flex tagbox" v-for="(items,keys,indexs) in list.childrens" :key="keys" v-if="item.id == keys">
						<view class="f-28 t-c itembox dis-il-block"  @click="goodsdeilt(item.id,itemss.id,itemss.name)" v-for="(itemss,indexss) in items" :key="indexss">
							<!-- <image :src="itemss.logo" class="imgs" mode=""></image> -->
							<view class="item-name">
								{{itemss.name}}
							</view>
							<view class="dis-il-block item-class">{{itemss.num}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <phoneNavBar :checked="'分类'"></phoneNavBar> -->
		<TabBars :tabBarAct="0" :pageType="'19'"></TabBars>
		<far-bottom></far-bottom>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import Loadlogo from '@/components/template/loadlogo.vue';
	import phoneNavBar from '@/components/template/phoneNavBar';
	import TabBars from '@/components/template/tabBar.vue';
	export default{
		data(){
			return{
				phoneBookList:{},
				loadlogo:false,
				list:{}
			}
		},
		components:{
			Loadlogo,
			phoneNavBar,
			TabBars
		},
		onLoad() {
			this.getclasslist()
		},
		methods:{
		compare(property) {
		  return function (a, b) {
		    let value1 = a[property];
		    let value2 = b[property];
		    return value2 - value1;
		  }
		},
			keySearch(e){
				this.getclasslist(e.detail.value);
			},
			getclasslist(search){
				let _this = this;
				App._post_form(
					`&p=yellowpage&do=cateList`,
					{search:search || ''},
					res => {
						console.log(res);
						// let aa = [
						// 	{a:1},
						// 	{a:2},
						// 	{a:3},
						// 	{a:4},
						// 	{a:5},
						// 	{a:6},
						// 	{a:7},
						// ]
						_this.list = res.data.list;
						// let parents = _this.list.parents;
						// parents.sort(_this.compare('sort'));
						console.log(_parents)
					},
					false,
					() => {
						_this.loadlogo = true;
					}
				);
			},
			goodsdeilt(id,two_id,title){
				console.log(id,two_id,title);
				App.navigationTo({
					url: `pages/subPages2/phoneBook/goodsClass/goodsClass?cate_one=${id}&cate_two=${two_id}&title=${title}`
				})
			},
		}
	}
</script>

<style>
	page{
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.phoneBook{
		padding-bottom: 130upx;
		.classbox{
			// padding-top: 30upx;
		}
	}
	.searchBigBox{
		padding: 30upx;
		background-color: #F7F7F7;
		.searchBox{
			border-radius: 10upx;
			display: flex;
			background-color: #FFFFFF;
			padding-left: 20upx;
			/deep/ .uni-input{
				font-size: 28upx;
				height: 90upx;
				text-align: center;
				line-height: 90upx;
				width: 90%;
			}
		}
	}
	.phoneClassListBox{
		background-color: #FFFFFF;
		border-radius: 20upx;
		// border-top: 2upx solid #E8E8E8;
		// border-bottom: 2upx solid #e8e8e8;
		margin: 0 30upx 30upx;
		.classtitle{
			border-bottom: 1upx solid #F8F8F8;
			.titleimg{
				width: 80upx;
				height: 80upx;
				border-radius: 50%;
				margin: 30upx 30upx 10upx;
			}
			.titletext{
				line-height: 130upx;
				height: 130upx;
				font-size: 30upx;
				vertical-align: top;
				font-weight: bold;
				color: #000000;
			}
		}
		.tagbox{
			width: 92vw;
			flex-wrap: wrap;
			align-content: flex-center;
			align-items: center;
			justify-content: space-around;
			.itembox{
				// display: flex;
				border-bottom: 1upx solid #f8f8f8;
				border-right: 1upx solid #F8F8F8;
				// max-width: 44%;
				flex: 0 0 33%;
				padding: 30upx 0;
				// padding: 0 20upx;
				// height: 80upx;
				// line-height: 80upx;
				color: #B0B0B0;
				.item-class{
					// padding: 0upx 5upx;
					// display: inline-block;
					border-radius: 60upx;
					margin-left: 10upx;
					// line-height: 30upx;
					// background-color: #bdbdbd;
					font-size: 30upx;
					color: #000000;
					font-weight: bold;
					text-align: center;
					// height: 30upx;
					// margin-top: 24upx;
				}
				.item-name{
					padding: 0 20upx;
					margin-bottom: 10upx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					color: #333333;
				}
				.imgs{
					width: 50upx;
					height: 50upx;
					position: relative;
					top: 50%;
					transform: translateY(-50%);
					padding-right: 10upx;
				}
			}
		}
		.tagbox:after{
			content: "";
			flex: 0 0 33%;
		}
	}
</style>