<template>
	<view class="myServiceList">
		<loadlogo v-if="!loadlogo"></loadlogo>
		<view class="title">
			<view class="seach">
				<input type="text" @confirm="confirm" v-model="search" class="seachInput " style="font-size: 26upx;" placeholder-class="iconfont icon-search" 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="serList.length > 0">
			<view class="serItem" v-for="(item,index) in serList" :key="index">
				<myser-item @getMyserList="getMyserList" @openbtn="openbtn" :serItem="item" :type="type"></myser-item>
				<view class="turnhu f-24 col-f" v-if="item.status == 6">
					驳回理由:{{item.reason}}
				</view>
			</view>
			<load-more :isMore="loadingMore"></load-more>
		</view>
		<view  v-else>			<image style="width: 750upx;height: 560upx;" :src="imgfixUrls + 'homemakingImg/wushuju.png'" mode=""></image>		</view>
		<view  v-if="type == 21">
			<TabBars :tabBarAct="0" pageType="18"></TabBars>
		</view>
		<view class="appbtnm" v-else @click="fabuing">
			+
		</view>
		
	</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 TabBars from '@/components/template/tabBar.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
		},
		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() {
			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,
					status:this.sort,
					type:this.type,
					search:this.search,
					storeid:this.sid || ''
				}
				App._post_form(
					'&p=housekeep&do=getServicelist',
					data,
					res => {
						if(flag){
							this.orderList = this.orderList.concat(res.data.list);
							if(page == this.page && page) return
							this.getoderList(true,page++);
						}else{
							console.log(res);
							this.serList = res.data.list;
							this.total = res.data.total;
							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>
	.myServiceList{
		padding-bottom: 150upx;
		.title{
			background-color: #FFFFFF;
			.seach{
				padding: 30upx 30upx;
				.seachInput{
					width: 690upx;
					height: 80upx;
					background-color: #F8F8F8;
					border-radius: 20upx;
					text-align: center;
					line-height: 80upx;
					font-size: 26upx;
				}
			}
			.tab{
				
			}
		}
		.contcnt{
			padding: 20upx 30upx;
			.serItem{
				margin-bottom: 20upx;
				.turnhu{
					background-color: #FF4444;
					padding: 30upx 30upx;
					width: 570upx;
					margin-left: 30upx;
					border-radius: 0 0 30upx 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>
