<template>
	<view class="homemaSearch">
		<loadlogo v-if="!loadlogo"></loadlogo>
		<view class="title">
			<view class="seach">
				<text class="iconfont icon-search searchbox"></text>
				<input type="text" @confirm="confirm" v-model="search" class="seachInput " style="font-size: 26upx;" placeholder- placeholder-style="font-size: 26upx;" placeholder="  搜索我的服务" value="" />
			</view>
			<view class="tab">
				<v-tabs
					:lineScale="0.25"
					:lineRadius="'100rpx 100rpx 0 0'"
					:lineHeight="'8rpx'"
					:fontSize="'32rpx'"
					:activeFontSize="'32rpx'"
					:bold="true"
					:height="'100rpx'"
					:paddingItem="'0 22rpx 20rpx'"
					:activeColor="'#333333'"
					:lineColor="'#333333'"
					:color="'#999999'"
					v-model="sort"
					:scroll="false"
					@change="vtabschange"
					:tabs="['服务','商家', '需求']"
				></v-tabs>
			</view>
		</view>
		<view class="contcnt" v-if="sort == 1">
			<view class="serItem" v-for="(item,index) in serList" :key="index">
				<homemakingItem :items="item"></homemakingItem>
				<!-- <myser-item @getMyserList="getMyserList" @openbtn="openbtn" :serItem="item" :type="type"></myser-item> -->
			</view>
		</view>
		<view class="contcnt" v-if="sort == 0">
			<view class="serItem" v-for="(item,index) in serList" :key="index">
				<serveItem :serItem="item"></serveItem>
				<!-- <myser-item @getMyserList="getMyserList" @openbtn="openbtn" :serItem="item" :type="type"></myser-item> -->
			</view>
		</view>
		<view class="contcnt" v-if="sort == 2">
			<view class="serItem" v-for="(item,index) in serList" :key="index" style="margin-bottom: 30upx;">
				<demand-item :demanItem="item"></demand-item>
				<!-- <myser-item @getMyserList="getMyserList" @openbtn="openbtn" :serItem="item" :type="type"></myser-item> -->
			</view>
		</view>
		
		<view  v-if="type == 21">
			<TabBars :tabBarAct="0" pageType="18"></TabBars>
		</view>
	<!-- 	<view class="appbtnm" v-else @click="fabuing">
			+
		</view> -->
		<load-more :isMore="loadingMore"></load-more>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import vTabs from '@/components/v-tabs/v-tabs.vue';
	import loadMore from '@/components/template/loadmore.vue';
	import Loadlogo from '@/components/template/loadlogo.vue';
	import myserItem from '@/components/template/myserItem.vue';
	import homemakingItem from '@/components/template/homemakingItem.vue';
	import serveItem from '@/components/template/serveItem.vue';
	import TabBars from '@/components/template/tabBar.vue';
	import demandItem from '@/components/template/demandItem.vue';
	export default{
		data(){
			return{
				sort:0,
				page:1,
				type:2,
				storeid:0,
				search:'',
				loadlogo:false,
				serList:[],
				total:1,
				onPage:false,
				loadingMore:true,
				sid:'',
				id:''
			}
		},
		components:{
			vTabs,
			myserItem,
			TabBars,
			Loadlogo,
			loadMore,
			homemakingItem,
			serveItem,
			demandItem
		},
		onLoad(e) {
			this.type = e.type;
			this.sid = e.sid;
			this.id = e.id;
			this.getMyserList()
		},
		onShow() {
			if(!this.onPage) return
			this.getMyserList(false,1)
		},
		onReachBottom() {
			// debugger
			if(this.total <= this.page) return
			this.page++;
			this.loadingMore = false;
			this.getMyserList(true)
		},
		methods:{
			fabuing(){
				App.navigationTo({
					url: `pages/subPages2/homemaking/pubService/pubService?arid=${this.sid ||this.id}&type=${this.type}`
				})
			},
			openbtn(id){
				
				this.serList.map(item=>{
					item.checked = false;
					if(item.id == id){
						// debugger
						item.checked = true;
					}
				});
				this.loadlogo = !this.loadlogo
				this.loadlogo = !this.loadlogo
			},
			getMyserList(flag,page = false){
				let data = {
					page:page || this.page,
					search:this.search
				}
				if(this.sort == 0){
					data.status = 1;
				}
				let url = this.sort == 0?'&p=housekeep&do=getServicelist':this.sort == 1?'&p=housekeep&do=getNewStorelist':'&p=housekeep&do=getDemandlist'
				App._post_form(
					url,
					data,
					res => {
						if(flag){
							this.serList = this.serList.concat(res.data.list);
							this.loadingMore = true;
							if(page == this.page && page) return
							this.getoderList(true,page++);
						}else{
							console.log(res);
							this.serList = res.data.list;
							this.total = res.data.page_number;
							if(page){
								page++;
								this.getMyserList(true,page);
							}
						};
						this.loadingMore = true;
						// this.serList.map(item=>{
						// 	item.checked = false;
						// })
					},
					false,
					() => {
						this.loadlogo = true;
					}
				);
			},
			vtabschange(e){
				this.page = 1;
				this.sort = e;
				this.getMyserList();
				console.log(e)
			},
			confirm(){
				this.page = 1;
				this.getMyserList();
			}
		}
	}
</script>

<style>
	page{
		background-color: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	.homemaSearch{
		padding-bottom: 150upx;
		.title{
			background-color: #FFFFFF;
			.seach{
				padding: 30upx 30upx;
				position: relative;
				.seachInput{
					width: 690upx;
					height: 80upx;
					background-color: #F8F8F8;
					border-radius: 20upx;
					text-align: center;
					line-height: 80upx;
					font-size: 26upx;
				}
				.searchbox{
					position: absolute;
					top: 48upx;
					left: 50upx;
				}
			}
			.tab{
				
			}
		}
		.contcnt{
			padding: 20upx 30upx;
		}
		.appbtnm{
			position: fixed;
			width: 90upx;
			height: 90upx;
			line-height: 90upx;
			font-size: 40upx;
			font-weight: 600;
			text-align: center;
			left: 50%;
			bottom: 60upx;
			transform: translateX(-50%);
			padding: 0upx 0upx;
			color: #FFFFFF;
			border-radius: 50%;
			background: linear-gradient(360deg, #6094FD 0%, #70A8FD 100%);
		}
	}
</style>

