<template>
	<view class="personalList">
		<view v-if="g.length > 0" style="
        height: calc(100vh);
        width: 100%;
        overflow: hidden;
		margin-top: 7px;
      ">
			<view class="sortbox">
				
				<view class="item" @click="change(1,1)" :style="{ color: msg.OrderBy == 1 || msg.OrderBy == 2 ? mainColor : '#222' }"
				 style="display: flex; justify-content: center;">
					<text>评分</text>
					<u-icon v-if="msg.OrderBy==1||msg.OrderBy==2" :name="msg.OrderBy == 1 ? 'descending' : 'ascending'" size="36" :color="msg.OrderBy == 1 || msg.OrderBy == 2 ? mainColor : '#222'"></u-icon>
				</view>
				<view class="item" :style="{ color: msg.OrderBy == 3 || msg.OrderBy==4 ? mainColor : '#222' }" style="display: flex; justify-content: center;"
				 @click="change(2,2)">
					<text>热度</text>
					<u-icon v-if="msg.OrderBy==3||msg.OrderBy==4" :name="msg.OrderBy == 3 ? 'descending' : 'ascending'" size="36" :color="msg.OrderBy == 3 || msg.OrderBy==4 ? mainColor : '#222'"></u-icon>
				</view>
				
			</view>
			<scroll-view :scroll-y="true" @scrolltolower="lower" :enable-back-to-top="true" :enable-flex="true" :scroll-top="scrollTop"
			  style="height:calc(100vh - 40px); padding-bottom: 0px;">
				<view class="designer " >
					<view class="designer-item" v-for="(x, ci2) in g" :key="ci2" v-if="g.length>0">
						<view class="designer-flex" style="width: calc(100vw - 100px);">
							<u-avatar :src="x.ServiceLogo" size="110"></u-avatar>
							<view class="designer-name">
								<view class="designer-flex">
									<image v-if="x.Gender==1" style="width: 13px;height: 13px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/male.png"></image>
									<image v-if="x.Gender==2" style="width: 13px;height: 13px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/female.png"></image>
									<text style="margin-left: 5px;max-width: 400rpx;">{{x.Name}}</text>
								</view>
								<view class="designer-flex">
									<u-rate
										:current="x.storeScore!=null &&x.storeScore>0?x.storeScore:'5'"
										active-color="#FEC471" inactive-color="#DDDDDD"
										active-icon="star"
										inactive-icon="star-o"
										size="26"
										:disabled="true"
									></u-rate>
									<text style="font-size: 11px;color: #999999;">（{{x.CommentNum}}评价）</text>
								</view>
							</view>
						</view>
						<view class="designer-btn" :style="{'background':mainColor}" @click="gosubscribe(x)">
							预约
						</view>
					</view>
					
				</view>
				<u-loadmore v-if="showLoading" :status="status" :load-text="loadText" :font-size="24" :margin-top="20"
				 :margin-bottom="20" bg-color="#FFF" />
			</scroll-view>
		</view>
		<view v-if="!loading && g.length== 0 " style="
		  height: calc(100vh);
		  width: calc(100vw - 20px);
		  padding-top: 10px;
		">
			<u-empty text="没有找到更多的设计师" font-size="36" mode="list" ></u-empty>
		</view>
	
	</view>
</template>

<script>
	import auth from "@/components/auth/index";
	export default {
		components: {
		  auth,
		  
		},
		data() {
			return {
				showAuth:false,
				pageTitle: "设计师列表",
				status: "loadmore",
				mainColor: "",
				loading: true,
				page_count: 1,
				g: [],
				u:{},
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				showLoading: true,
				currentChosen: "",
				msg: {
					pageIndex: 1,
					pageSize: 10,
					StoreId: 0,
					OrderBy:0,
				},
			};
		},
		
		onLoad(option) {
			this.mainColor = this.$uiConfig.mainColor;
			if(option && option.id){
				this.msg.StoreId = option.id
			}
			
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
			this.init();
			
		},
		methods: {
			
			change(sort, t) {
				//评分
				if (t == 1) {
					if (this.msg.OrderBy != 2) {
						this.msg.OrderBy = 2; //升序
					} else {
						this.msg.OrderBy = 1; //降序
					}
				}
				//热度
				if (t == 2) {
					if (this.msg.OrderBy !=4 ) {
						this.msg.OrderBy = 4; //升序
					} else {
						this.msg.OrderBy = 3; //降序
					}
				}
				
				this.g = [];
				this.msg.pageIndex = 1
				this.init();
			},
		
			init() {
				
				this.loading = true;
				uni.showLoading({
					title: '加载中'
				});
				this.request2({
						url: '/api/AppletStores/GetServicePersonalDetailList',
						data: this.msg
					},
					res => {
						this.loading = false;
						if (res.resultCode == 1) {
						
							this.g = this.g.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
							if (this.page_count == 1) {
								
								this.status = "nomore";
							} else {
								this.status = "loadmore";
							}
						}
						uni.hideLoading();
						
					}
				);
			
			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.status = "loading";
					this.msg.pageIndex++;
					this.init();
				} else {
					
					this.status = "nomore";
				}
			},
			gosubscribe(x){
				this.u = uni.getStorageSync("mall_UserInfo");
				if (this.u) {
				  uni.navigateTo({
				  	url: "/pages/reserve/subscribe?id="+this.msg.StoreId+'&servicePersionId='+x.ID,
				  })
				} else {
				  this.showAuth = true;
				}
			},
			reloadUserinfo() {
			  this.u = uni.getStorageSync("mall_UserInfo");
			  
			},
			//关闭登录窗口
			gbAuth() {
			  this.showAuth = false;
			},
			
		
		},
	};
</script>

<style>
	.personalList {
		height: 100%;
		background: #FFF;
		position: relative;
	}
	.personalList .designer{
		padding:0 15px;
	}
	.personalList .designer-item{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 15px 0;
		border-bottom: 1px solid #E2E2E2;
	}
	.personalList .designer-name{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 55px;
		margin-left: 10px;
		
	}
	.personalList .designer-btn{
		width: 69px;
		height: 26px;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFF;
		font-size: 13px;
	}
	.personalList .designer-flex{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.personalList .sortbox {
		display: flex;
		background: #fff;
		border-bottom: 1px solid #E2E2E2;
	}
	
	.personalList .sortbox .item {
		height: 40px;
		line-height: 40px;
		flex: 1;
		text-align: center;
	}

</style>
