<style scoped>
	.designerDetail {
		width: 100%;
		height: 100vh;
		background: #FFFFFF;
		margin-bottom: 80px;

	}

	.designerDetail .d-t-box {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		background-repeat: no-repeat;
		background-size: cover;
		padding: 15px;
		position: relative;
		font-family: aa;
	}

	.designerDetail .tx {
		position: relative;

	}

	.designerDetail .bj {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.5);
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
	}

	.designerDetail .tx-sex {
		width: 25px;
		height: 25px;
		border-radius: 12.5px;
		background: #FFF;
		display: flex;
		align-items: center;
		justify-content: center;

		position: absolute;
		right: 0;
		bottom: 10px;
	}

	.designerDetail .tx-c {
		width: 1;
		flex: 1;
		margin-left: 10px;
		z-index:1;
	}

	.designerDetail .tx-r {
		width: 47px;
		height: 34px;
		text-align: right;
	}

	.designerDetail .tx-c-t {
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #FFF;
	}

	.designerDetail .superone {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.designerDetail .tx-cc {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}

	.designerDetail .tx-cc-l {
		width: 1;
		flex: 1;


		margin-top: 8px;
	}

	.designerDetail .shuxian {
		width: 1px;
		height: 9px;
		background: #FFF;
		margin: 0 8px;
	}

	.designerDetail .gl-left-item {
		padding: 2px 4px;
		border-radius: 2px;
		font-size: 10px;
		color: #FFF;
		margin-right: 5px;
		margin-bottom: 5px;
	}

	.designerDetail .d-info {
		width: 100%;
		padding: 15px;
		font-size: 13px;
		color: #111111;
		font-family: aa;
	}

	.designerDetail .d-i-item {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		color:#111111;
		font-family: aa;
	}

	.designerDetail .serve {
		width: 100%;

	}

	.designerDetail .title {
		width: 100%;
		height: 45px;
		font-size: 16px;
		color: #1B1D1E;
		font-weight: bold;
		padding: 0 15px;
		line-height: 45px;
	}

	.designerDetail .title-t {
		width: 100%;
		height: 45px;
		font-size: 16px;
		color: #1B1D1E;
		font-weight: bold;
		padding: 0 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.designerDetail .setmeal-box {
		display: flex;
		width: 100%;
		flex-direction: row;
		overflow-x: auto;
		padding: 15px 0;
		border-bottom: 1px solid #E2E2E2;

	}

	.designerDetail .setmeal-item {
		width: 200px;
		/* height: 98px; */

		background: #FFF;
		border-radius: 6px;
		box-shadow: 0 6px 10px 1px #F2F2F2;
		overflow: hidden;
	}

	.designerDetail .setmeal-item-top {
		width: 100%;
		height: 75px;
		background: #221818;
		padding: 8px 15px;
		color: #EFDCCB;
		background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/cpoun.png');
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;

	}

	.designerDetail .setmeal-pl {
		position: absolute;
		top: 28.5px;
		width: 18px;
		height: 18px;
		border-radius: 9px;
		background: #FFF;
	}

	.designerDetail .setmeal-item-bottom {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 23px;
		font-size: 10px;
		color: #221818;
		background: #FAF8F9;
		font-family: aa;
	}

	.designerDetail .setmeal-name {
		width: 1;
		flex: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;

	}

	.designerDetail .setmeal-price {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
	}

	.designerDetail .d-goods {
		display: flex;
		flex-direction: column;
		padding: 0 15px 10px;
	}

	.designerDetail .d-goods-item {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px 0;

	}

	.designerDetail .d-goods-item-r {
		width: calc(100vw - 172px);
		height: 68px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 15px;
	}

	.designerDetail .item-r-title {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-bottom: 10px;
	}

	.designerDetail .item-r-b {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 12px;
	}

	.designerDetail .btn {
		width: 100%;
		padding: 15px;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #FFF;
		z-index: 99;
	}

	.designerDetail .btn-box {
		width: 100%;
		height: 45px;
		border-radius: 6px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: #FFFFFF;
	}

	.designerDetail .comment2 {
		background: #fff;
		font-family: aa;
		padding: 15px;
	}

	.designerDetail .comment .content {
		display: flex;
		flex-direction: column;

		margin-bottom: 15px;
	}

	.designerDetail .comment .content .u-box {
		display: flex;
		margin-bottom: 10px;
		align-items: center;
	}

	.designerDetail .comment .content .u-box .user {
		flex: 1;
		font-size: 13px;
		color: #111111;
		font-weight: bold;
		align-items: center;
		display: flex;
	}

	.designerDetail .comment .content .u-box .timer {
		font-size: 12px;
		color: #999999;
		text-align: right;

	}

	.designerDetail .comment .content .u-box .ucontent {
		font-size: 11px;
		color: #000;
		margin-top: 10px;
	}

	.designerDetail .comment .content .u-box .plimg {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 10px;
	}

	.designerDetail .plimg-item {
		margin-right: 3px;
		/* margin-bottom: 3px; */
	}

	.designerDetail .reply {
		width: 100%;
		padding: 10px;
		background: #F5F6F7;
		border-radius: 3px;
		margin-top: 10px;
	}
	.designerDetail .tx_share{
		position: absolute;
		right:15px;
		top:65px;
	}
</style>
<template>
	<view class="designerDetail" v-if="loading">
		<view class="d-t-box" :style="{'background-image': 'url(' + (personal.ServiceLogo ? personal.ServiceLogo : '') + ')',}">
			<view class="bj"></view>
			<view class="tx">
				<u-avatar :src="personal.ServiceLogo" size="150"></u-avatar>
				<view class="tx-sex">
					<image v-if="personal.Gender==1" style="width: 13px;height: 13px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/male.png"></image>
					<image v-if="personal.Gender==2" style="width: 13px;height: 13px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/female.png"></image>
				</view>
			</view>
			<view class="tx-c">
				<view class="tx-c-t">
					<view style="font-size: 18px;font-weight: bold;max-width: 150px;" class="superone">{{personal.Name}}</view>
					<u-rate :current="personal.Score!=null &&personal.Score>0?personal.Score:'5'" active-color="#FEC471"
					 inactive-color="#DDDDDD" active-icon="star" inactive-icon="star-o" size="26" :disabled="true"></u-rate>
					<text style="margin-left: 3px;font-size: 13px;">{{personal.Score?personal.Score.toFixed(1):'5.0'}}</text>
				</view>
				<view class="tx-cc">
					<view class="tx-cc-l">
						<view style="display: flex;flex-direction: row;align-items: center;font-size: 12px;color: #FFF;">
							<view>{{personal.Major}}</view>
							<view class="shuxian"></view>
							<view>从业{{personal.WorkYears}}年</view>
							<view class="shuxian"></view>
							<view>预约人次{{personal.OrderNum}}</view>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;font-size: 12px;color: #FFF;margin-top: 5px;">
							<view class="gl-left-item" :style="{background:mc}" v-for="(x, i) in personal.LableNameList" :key="ci">
								{{x}}
							</view>
						</view>
					</view>
					<view class="tx-r" @click="gophone" style="position: relative;top:-20px;">
						<image mode="aspectFill" style="width: 25px;height: 25px;" src='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/osTel.png' />
					</view>
				</view>
				<view class="tx_share" @click="goShare">
					<image mode="aspectFill" style="width: 30px;height: 30px;" src="../../static/images/share.png"></image>
				</view>
			</view>
		</view>
		<view class="d-info">
			<view class="d-i-item">
				<text style="width: 45px;">简介：</text>
				<view style="padding-bottom: 10px;flex:1;border-bottom: 1px solid #E2E2E2;line-height: 20px;">{{personal.Introduction!=null && personal.Introduction!=''?personal.Introduction:'暂无'}}</view>
			</view>
			<view class="d-i-item" style="margin-top: 10px;">
				<text style="width: 45px;">店名：</text>
				<view style="display: flex;flex-direction: column;">
					{{personal.StoreName}}
					<view style="display: flex;flex-direction: row;align-items: center;color: #1B1D1E;margin-top: 8px;">
						<u-icon name="location" color="#CCCCCC" size="23" style='margin-right: 5px;'></u-icon>
						<text style="font-size:12px;color:#1B1D1E">{{personal.StoreAddress}}</text>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 15px;background: #FAF8F9;"></view>
		<view class="sticky">
			<u-sticky>
				<view class="store-tabs">
					<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :active-color="mc"></u-tabs>
				</view>
			</u-sticky>
		</view>
		<view class="serve">
			<view class="title">TA可服务会员卡<text style="font-size: 11px;color: #1B1D1E;">({{allCoupon.length}})</text></view>
			<view class="setmeal-box" v-if="allCoupon.length>0">
				<view v-for="(cl, ci) in allCoupon" :key="ci" @click="gocoupon(cl)">
					<view class="setmeal-item" :style="{'margin-left':ci==0?'15px':'0','margin-right': ci+1==allCoupon.length?'15px':'5px'}">
						<view class="setmeal-item-top">
							<view style="font-size: 14px;" class="setmeal-name">{{cl.Name}}</view>
							<view style="font-size: 11px;color: rgba(239, 220, 203, 0.6);margin:3px 0;" class="setmeal-name">{{cl.Describe}}</view>
							<view class="setmeal-price">
								<text style="font-size: 13px;">核销次数:{{cl.HeXiao}}次</text>
							</view>
							<view class="setmeal-pl" style="left: -9px;"></view>
							<view class="setmeal-pl" style="right: -9px;"> </view>
						</view>
						<view class="setmeal-item-bottom">
							有效期：{{cl.IndateType==1?'领取后'+cl.IndateDay+'天内有效':cl.StartDate.split(' ')[0]+'至'+cl.EndDate.split(' ')[0]}}
						</view>
					</view>
				</view>
			</view>
			<view v-if="allCoupon.length==0" style="width: 100%;height: 50px;line-height: 50px;text-align: center;">
				暂无服务会员卡~
			</view>
			<view class="title">TA可服务的商品<text style="font-size: 11px;color: #1B1D1E;">({{personal.goodsList.length}})</text></view>
			<view class="d-goods">
				<view class="d-goods-item" v-for="(c, j) in personal.goodsList" :key="c" @click="gogoods(c)">
					<image style="width: 125px;height: 70px;border-radius: 4px;" mode="aspectFill" :src="c.CoverImage" />
					<view class="d-goods-item-r">
						<view class="item-r-title" style="font-size: 14px;color: #1B1D1E;">{{c.Name}}</view>
						<view class="item-r-title" style="font-size: 12px;color: #999999;">{{c.SubName}}</view>
						<view class="item-r-b">
							<view style="display: flex;flex-direction: row;align-items: center;">
								<text :style="{'color':mc}">￥<text style="font-size: 14px;">{{c.DepositMoney}}</text></text>
								<text style="text-decoration:line-through;color: #999999;margin-left: 10px;font-size: 11px;">￥{{c.SellingPrice}}</text>
							</view>
							<text style="color: #999999;">已售{{c.GoodsBuyNum}}件</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 15px;background: #FAF8F9;"></view>
		<view class="comment" style="padding-bottom: 80px;">
			<view class="title-t">
				<view style="display: flex;flex-direction: row;justify-content: space-between;width: 100%;" @click="gocomment()">
					评价{{count>0?'('+count+')':''}}
					<u-icon name="arrow" :size="30" color="#666666"></u-icon>
				</view>
			</view>
			<view class="comment2 u-skeleton-rect">
				<view class="content" v-for="(item, index) in comments" :key='index'>
					<view class="u-box">
						<view class="user">
							<u-avatar :src="item.UserPhotoPath" :size="50"></u-avatar>
							<text style="margin:0 10px;overflow: hidden; white-space: nowrap;max-width: 200rpx;text-overflow: ellipsis;margin-bottom: 2px;">{{ item.UserName }}</text>
							<u-rate :current="item.CommentScore" active-color="#FFC86D" inactive-color="#b2b2b2" active-icon="star"
							 inactive-icon="star-o" size="26" :disabled="true"></u-rate>
						</view>
						<view class="timer">{{ item.CreateDate }}</view>
					</view>
					<view class="ucontent" style="line-height: 22px;">{{ item.Content }}</view>
					<view class="plimg">
						<image v-for="(x, j) in item.CommentImgList" :key="j" class="plimg-item" mode="aspectFill" :src="x" @click="previewImage2(j,item.CommentImgList)"
						 :style="{'width':san,'height':san}" />

					</view>
					<view class="reply" v-if="item.Reply!=''">
						<view style="font-size: 12px;color: #121212;">回复:</view>
						<view style="font-size: 12px;color: #9A9A9A;margin-top: 3px;">{{item.Reply}}</view>
					</view>
				</view>
			</view>
			<view v-if="comments.length==0" style="width: 100%;height: 50px;line-height: 50px;text-align: center;">
				暂无评价~
			</view>

		</view>
		<view class="btn">
			<view class="btn-box" :style="{'background':mc}" @click="gosubscribe">
				预约
			</view>
		</view>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
	</view>
</template>

<script>
	import auth from "@/components/auth/index";
	export default {
		components: {
			auth,
		},
		data() {
			return {
				pageTitle: "服务人员详情",
				mc: "",
				loading: false,
				ID: 0,
				storeId: 0,
				personal: {},
				showAuth: false,
				current: 0,
				submitOrder: false,
				list: [{
						name: '服务项目'
					},
					{
						name: '评价'
					},
				],
				san: '100px',
				allCoupon: [],
				comments: [],
				u: {},
				count: 0,
			};
		},

		onLoad(option) {
			this.mc = this.$uiConfig.mainColor;
			if (option && option.ID) {
				this.ID = option.ID
			}
			if (option && option.storeId) {
				this.storeId = option.storeId
			}
			this.u = uni.getStorageSync("mall_UserInfo");
			this.getDetail() //服务人员详情
			if (this.u) {
				this.getAllCPList();
				this.getAppCommentList()
			}
			
			
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
			let windowWidth = this.$utils.SystemInfo().windowWidth
			this.san = (windowWidth - 30 - 9) / 3 + 'px'

		},

		methods: {
			getDetail() {
				uni.showLoading({
					title: '加载中'
				});
				this.request2({
						url: '/api/AppletStores/GetServicePersonalModel',
						data: {
							ID: this.ID
						}
					},
					res => {
						if (res.resultCode == 1) {
							this.loading = true
							this.personal = res.data
						}
						uni.hideLoading();
					}
				);
			},
			gocomment() { //评论列表
				uni.navigateTo({
					url: "/pages/reserve/commentList?StoreId=" + this.storeId + '&ServicePersonalId=' + this.ID
				})
			},
			getAllCPList() { //获取门店套餐卡
				this.request2({
						url: '/api/AppletStores/GetAllCouponPageList',
						data: {
							pageIndex: 1,
							pageSize: 999,
							StoreId: this.storeId
						}
					},
					res => {

						if (res.resultCode == 1) {
							this.allCoupon = res.data.pageData
						}
					}
				);
			},
			getAppCommentList() {
				this.request2({
						url: '/api/AppletStores/GetAppletGoodsCommentPageList',
						data: {
							pageIndex: 1,
							pageSize: 5,
							StoreId: this.storeId,
							GoodsId: 0,
							ServicePersonalId: this.ID
						}
					},
					res => {

						if (res.resultCode == 1) {
							this.comments = res.data.pageData;
							this.count = res.data.count
						}
					}
				);
			},
			change(e) {
				this.current = e;

				switch (e) {
					case 0:
						uni.createSelectorQuery().in(this).select(".serve").boundingClientRect(data => { //目标节点
							uni.pageScrollTo({
								scrollTop: data.top - 40
							})
						}).exec();
						break;
					case 1:
						uni.createSelectorQuery().in(this).select(".comment").boundingClientRect(data => { //目标节点
							uni.pageScrollTo({
								scrollTop: data.top - 40
							})
						}).exec();
						break;
				}
			},
			gophone() {
				uni.makePhoneCall({
					phoneNumber: this.personal.Telephone //仅为示例
				});
			},
			gocoupon(item) { //优惠券详情
				uni.navigateTo({
					url: "/pages/reserve/personal/couponDetail?ID=" + item.CouponId+'&storeId='+this.storeId,
				})
			},
			gogoods(item) { //商品详情
				uni.navigateTo({
					url: "/pages/reserve/goodsDetails?GoodsId=" + item.Id,
				})
			},
			gosubscribe() {
				this.u = uni.getStorageSync("mall_UserInfo");
				if (this.u) {
					uni.navigateTo({
						url: "/pages/reserve/subscribe?id=" + this.storeId+'&servicePersionId='+this.ID,
					})
				} else {
					this.showAuth = true;
				}
			},
			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
				this.getAllCPList();
				this.getAppCommentList()
			},
			//关闭登录窗口
			gbAuth() {
				this.showAuth = false;
			},
			//图片预览
			previewImage2(index, images) {
				uni.previewImage({
					urls: images,
					current: index,
				});
			},
			//跳转至生成海报
			goShare(){
				if (this.u) {
					uni.navigateTo({
						url: "/pages/reserve/share_qrcode?ServiceLogo=" +
						this.personal.ServiceLogo+'&Name='+this.personal.Name+
						'&storeId='+this.storeId+'&ID='+this.ID
					})
				} else {
					this.showAuth = true;
				}
				
			},
			
		},
	};
</script>
