<template>
	<view id="boxFixed">
		<view class="flex align-center" v-if="showTabBar"
			style="width: 100%;background-color: #FFFFFF; z-index: 9999; position: fixed;">
			<cu-custom isBack="true">
				<block slot="content">
					详情
				</block>
			</cu-custom>
		</view>
		<view style="position: relative;">
			<image v-if="!showTabBar" src="../../static/shop_details_back_icon.png" @click="pageBack"
				style="position: absolute;left: 0;top: 62rpx; z-index: 999;width: 60rpx;height: 60rpx;left: 35rpx;">
			</image>
			<u-swiper :list="imageSwiper" height="600" mode="none" @click="imageSwiperClick"></u-swiper>
			<!-- 			<image style="height: 600rpx; z-index: 1;" mode="heightFix" :src="imageUrl" v-for="item in commentList">
			</image> -->
		</view>
		<view
			style="background-color: #FFFFFF;border-top-left-radius: 20rpx; border-top-right-radius: 20rpx;z-index: 999;position: absolute;top: 560rpx;">
			<view class="title_text">{{personDetail.name}}</view>

			<view
				style="background-color: #FAF6F1; border-radius: 15rpx;margin-top: 50rpx;margin-left: 20rpx;margin-right: 20rpx;">

				<view class="flex align-start">
					<image mode="scaleToFill"
						style="width:86rpx;height: 86rpx;border-radius: 50%; margin-top:37rpx;margin-bottom:37rpx;margin-left: 20rpx;border: #E4CEB3 2rpx solid;background-color: #007AFF; object-fit: cover;"
						:src="imageUrl"></image>
					<view style="margin-top: 35rpx;margin-left: 21rpx; margin-right: 20rpx; flex: 1;">
						<view class="flex align-center justify-between" style="flex: 1;">
							<view class="flex align-center">
								<text class="wb_hide_2"
									style="font-size: 28rpx;font-weight: bold;color: #111111;">{{personDetail.realName}}</text>
								<text
									style="margin-left: 21rpx; font-size: 24rpx; color: #D09A6C;">{{personDetail.serverLevel=='001'?'初级':personDetail.serverLevel=='002'?'中级':personDetail.serverLevel=='003'?personDetail.serverLevel=='004':'金牌'}}家政</text>
							</view>

							<text style="font-size: 24rpx;color: #D09A6C;">成交{{personDetail.orderCount}}单</text>

						</view>
						<view class="flex align-center justify-between">
							<view style="margin-top: 23rpx;flex: 1;">
								<text class="age_tag">{{personDetail.serverAge}}年工龄</text>
								<view class="flex align-center justify-between" style="margin-top: 12rpx;width: 100%;">
									<view class="flex align-center"
										v-for="(item,index) in personDetail.goodsServerDimensionList" :key="item.id">
										<text style="color: #666666;font-size: 26rpx;">{{item.dimensionName}}</text>
										<text
											style=" margin-left: 8rpx;color: #111;font-size: 26rpx;font-weight: bold;">{{item.score}}</text>
										<view class=""
											style="background-color:#E4CEB3;width: 2rpx;height: 19rpx;margin-left: 29rpx;"
											v-if="index<(personDetail.goodsServerDimensionList.length-1)">
										</view>
									</view>
								</view>
							</view>

							<a :href="'tel:'+personDetail.phone">
								<image style="width: 74rpx; height: 74rpx;margin-left: 30rpx;"
									src="../../static/shop_phone_icon.png">
								</image>
							</a>
						</view>

					</view>



				</view>


				<view class="flex align-center justify-between"
					style="background-color: #F8EADB; border-bottom-left-radius: 15rpx;border-bottom-right-radius: 15rpx;margin-top: 22rpx;padding-top: 12rpx;padding-bottom: 12rpx;">
					<view class="flex align-center " style="margin-left:127rpx ;">
						<text style="font-size: 22rpx;color: #FC6035;">综合评分：</text>
						<text
							style="font-size: 24rpx; color: #FC6035;font-weight: bold;">{{personDetail.serverScore}}</text>
						<view v-for="index of parseInt(personDetail.serverScore)"
							style="margin-top: 2rpx;margin-left: 5rpx;">
							<image src="../../static/shop_star_icon.png"
								style="width: 24rpx;height: 24rpx; margin-left: 2rpx;"></image>
						</view>

					</view>
					<view class="good_comment" style=" margin-right: 20rpx;">
						好评率{{personDetail.rate}}%
					</view>


				</view>


			</view>

			<view
				style="margin-left: 30rpx;margin-right: 45rpx;margin-top: 43rpx;padding-bottom: 38rpx;border-bottom: #EEEEEE 1rpx solid;">


				<view class="flex align-center">
					<view
						:class="personDetail.merchant.merchantType==0?'company_auth':personDetail.merchant.merchantType==1?'company_auth_active':''">
						{{personDetail.merchant.merchantType==0?'企业认证':personDetail.merchant.merchantType==1?'个人认证':''}}
					</view>
					<text
						style="font-size: 26rpx;font-weight: 400;color: #4B8DDF;margin-left: 14rpx;">{{personDetail.merchant.merchantName}}</text>
				</view>

				<view class="flex align-center" style="margin-top: 30rpx;">
					<image src="../../static/shop_address_icon.png" style="width: 30rpx;height: 30rpx;"></image>
					<text
						style="margin-left: 17rpx;font-size: 26rpx;color: #111111;">{{personDetail.merchant.detail}}{{personDetail.merchant.detail.houseNumber}}</text>
				</view>

				<view class="flex align-center" style="margin-top: 24rpx;">
					<image src="../../static/shop_range_icon.png" style="width: 30rpx;height: 30rpx;"></image>
					<text style="margin-left: 17rpx;font-size: 26rpx;color: #111111;">查看范围 ></text>
				</view>



			</view>


			<view style="margin-top: 32rpx;margin-left: 34rpx;">
				<text style="font-size: 34rpx;font-weight: bold;color: #111111;">个人简介</text>
				<view style="margin-top: 33rpx;">
					<u-read-more show-height="145" :toggle="true" closeText="展开" color="#666666">
						<rich-text :nodes="personDetail.desc"></rich-text>
					</u-read-more>
				</view>
			</view>

			<view style="height: 15rpx;background-color: #F6F6F6;"></view>
			<view>
				<u-tabs active-color="#FC6035" inactive-color="#111" height="110"
					style="position: sticky;top: 100rpx;z-index: 11;" :list="tabsList" :is-scroll="false"
					:current="tabsCurrent" @change="tabsChange"></u-tabs>
				<view id="serverContent" style="height: 1000rpx; background-color: #FFFFFF;">

				</view>
				<view style="height: 15rpx;background-color: #F6F6F6;">
					{{personDetail.serviceDesc}}
				</view>

				<!-- 费用说明 -->
				<view id="descriptionFees" style="background-color: #FFFFFF;margin-top: 34rpx;">
					<text style="font-size: 34rpx; font-weight: bold;margin-left: 33rpx;">费用说明</text>
					<view style="margin-top: 30rpx;">{{personDetail.priceDesc}}</view>

				</view>

				<view style="height: 15rpx;background-color: #F6F6F6;"></view>
				<!-- 评论内容 -->
				<view id="serverComment">
					<view class="flex align-center justify-between"
						style="margin-top: 34rpx;margin-left: 33rpx;margin-right: 33rpx;padding-bottom: 34rpx;border-bottom: #EEEEEE 1rpx solid;">
						<text style="font-size: 34rpx; font-weight: bold;">评论</text>
						<text style="font-size: 26rpx;color: #999;">更多评价 ></text>
					</view>

					<view class="flex align-start"
						style="margin-left: 39rpx;margin-right: 43rpx; z-index: 10; padding-bottom: 40rpx;"
						v-for="(item,index) in commentList" :key="index">
						<image mode="aspectFill" :src="imageUrl"
							style="width: 60rpx;height: 60rpx; margin-top: 31rpx;border-radius: 50%;"></image>

						<view style="margin-top: 40rpx;margin-left: 18rpx;flex: 1;">
							<view class="flex align-center justify-between">
								<text style="font-size: 30rpx;font-weight: bold;color: #111111;">{{item.phone }}</text>
								<text style="font-size: 24rpx;font-weight: 500;color: #999;">{{item.createTime}}</text>
							</view>
							<view class="flex align-center" style="margin-top: 22rpx;">
								<text style="font-weight: 500;font-size: 24rpx;color: #FC6035;">评分</text>
								<text style="font-weight: bold;font-size: 24rpx;color: #FC6035;">{{item.score}}</text>
								<view class="flex align-center" style="margin-left: 10rpx;">
									<view v-for="index of parseInt(item.score)" style="margin-top: 2rpx;">
										<image src="../../static/shop_star_icon.png"
											style="width: 22rpx;height: 22rpx; margin-left: 2rpx;"></image>
									</view>
								</view>

							</view>

							<view class="flex align-center" style="margin-top: 12rpx;">
								<view class="flex align-center"
									style="border: #EEEEEE 1rpx solid;padding-left: 14rpx;padding-right: 19rpx;margin-top: 9rpx;margin-bottom: 9rpx;border-radius: 8rpx;">
									<text
										style="margin-left: 18rpx;font-size: 24rpx;font-weight: bold;color: #111;">{{item.score}}</text>
								</view>
								<view class="" v-for="ele in item.gradeList" :key="ele.id">
									<view class="flex align-center"
										style="margin-left: 25rpx; border: #EEEEEE 1rpx solid;padding-left: 14rpx;padding-right: 19rpx;margin-top: 9rpx;margin-bottom: 9rpx;border-radius: 8rpx;">

										<text style="font-size: 24rpx;font-weight: 500;color: #999;">{{ele.name}}</text>
										<text
											style="margin-left: 18rpx;font-size: 24rpx;font-weight: bold;color: #111;">{{ele.score}}</text>
									</view>
								</view>
							</view>
							<view style="margin-top: 26rpx;font-size: 28rpx;color: #111;font-weight: 400;">
								{{item.content}}
							</view>

							<view>
								<u-grid :col="3">
									<u-grid-item v-for="(item,index) in 2" :key="index" @click="commentImageClick">
										<!-- <u-grid-item v-for="index of item.resourceList.length" :key="index"> -->
										<image mode="aspectFill" :src="imageUrl"
											style="height: 180rpx;width: 180rpx; border-radius: 6rpx;">
										</image>
									</u-grid-item>
								</u-grid>
							</view>

							<view style="padding-bottom: 26rpx; border-bottom: #EEEEEE 1rpx solid;" v-if="item.reply">
								<view class="flex align-center justify-between">
									<view class="flex align-center" @click="shopShopRepltClick">
										<text style="color: #999;font-size: 28rpx;font-weight: 500;">商家回复：</text>
										<u-icon v-if="showShopReply" name="arrow-up" color="#999"></u-icon>
										<u-icon v-else="showShopReply" name="arrow-down" color="#999"></u-icon>
									</view>
									<text
										style="color: #999;font-size: 24rpx;font-weight: 500;">{{item.replyTime}}</text>
								</view>
								<view v-if="showShopReply&&item.reply"
									style="margin-top: 22rpx;font-size: 28rpx;color: #111111;">
									{{item.reply}}
								</view>
							</view>
							<view style="margin-top: 24rpx;">
								<view class="flex align-center justify-between">
									<view class="flex align-center" @click="showAddReplyClick">
										<text style="color: #999;font-size: 28rpx;font-weight: 500;">追评：</text>
										<u-icon v-if="showAddReply" name="arrow-up" color="#999"></u-icon>
										<u-icon v-else="showAddReply" name="arrow-down" color="#999"></u-icon>
									</view>
									<text
										style="color: #999;font-size: 24rpx;font-weight: 500;">{{item.reContentTime}}</text>

								</view>

								<view v-if="showAddReply&&item.reContent"
									style="margin-top: 22rpx;font-size: 28rpx;color: #111111;">
									{{item.reContent}}
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view style="height: 15rpx;background-color: #F6F6F6;"></view>
				<view id="serverMore" style="padding-bottom: 108rpx;width: 100vw;">
					<view id="descriptionFees" style="background-color: #FFFFFF;margin-top: 34rpx;">
						<text style="font-size: 34rpx; font-weight: bold;margin-left: 33rpx;">更多服务</text>
						<view>
							<view class="flex align-center" v-for="(item,index) in moreServerList" :key="index"
								style="padding-bottom: 40rpx;border-bottom: #EEEEEE 1rpx solid;margin-left: 25rpx;margin-right: 25rpx;margin-top: 30rpx;">
								<view>
									<image style="width: 250rpx; height: 200rpx; border-radius: 10rpx;"
										mode="aspectFill" :src="imageUrl"></image>
								</view>
								<view style="margin-left: 20rpx;flex: 1;">
									<text class="wb_hide_2 content_text">{{item.name}}</text>
									<view style="margin-top: 29rpx;" class="flex align-center">
										<view class="age_tag">3年工龄</view>
										<view class="content_comment">好评率90%</view>
									</view>
									<view class="flex align-center justify-between" style="margin-top: 20rpx;">
										<view class="flex align-center">
											<text style="color: #111111; font-size: 26rpx;">{{item.realName}}</text>
											<text
												style="color: #D09A6C; font-size: 22rpx;margin-left: 20rpx;">{{item.serverLevel=='001'?'初级':item.serverLevel=='002'?'中级':item.serverLevel=='003'?item.serverLevel=='004':'金牌'}}家政</text>
										</view>

									</view>
									<view class="flex align-center justify-between" style="margin-top: 4rpx;">
										<text style="font-size: 32rpx;color: #FF1414;">{{item.goodsServerPrice}}元/{{item.monad}}</text>
										<view
											style="background-color: #FC6035;color: #FFFFFF;padding: 15rpx 24rpx 14rpx 24rpx;border-radius: 8rpx;">
											立即预约</view>

									</view>
								</view>
							</view>

						</view>

					</view>
				</view>

			</view>
		</view>
		<view style="position: fixed;bottom: 0; height: 108rpx; background-color: #E3E3E3;width: 100vw;z-index: 99999;">
			<view class="flex align-center justify-between">
				<view class="flex align-center" style="margin-left: 78rpx;margin-top: 20rpx;">
					<text
						style="font-size: 36rpx;font-weight: bold;color: #FF1414 ;">{{personDetail.goodsServerPrice}}</text>
					<text
						style="font-size: 26rpx;font-weight: 500;color: #111 ;margin-left: 13rpx;">元/{{personDetail.monad}}</text>
				</view>
				<view @click="goSure()"
					style="margin: 14rpx 22rpx 0rpx 0rpx;background-color: #FF1414;height: 80rpx;padding: 0rpx 87rpx 0rpx 88rpx;line-height: 80rpx;color: #FFFFFF;font-size: 36rpx;font-weight: bold;border-radius: 8rpx;">
					立即预约</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				commentParam: {
					goodsId: '1',
					pageNum: 1,
					pageSize: 10
				},
				merchantServeParam: {
					pageNum: 1,
					pageSize: 10,
				},
				personDetail: {},
				showTabBar: false,
				tabsCurrent: 0,
				showShopReply: true,
				showAddReply: true,
				tabsList: [{
						name: '服务内容'
					},
					{
						name: '费用说明'
					},
					{
						name: '评价'
					},
					{
						name: '更多服务'
					}
				],
				commentList: [],
				moreServerList: [],
				imageSwiper: [{
						image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F3%2F59acfca299212.jpg%3Fdown&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643881861&t=ef9d38a179c4f1ee10d75af21996eafb'
					},
					{
						image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F3%2F59acfca299212.jpg%3Fdown&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643881861&t=ef9d38a179c4f1ee10d75af21996eafb'
					}
				],
				imageUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F3%2F59acfca299212.jpg%3Fdown&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643881861&t=ef9d38a179c4f1ee10d75af21996eafb',
				commentScore: 5.0,
				introContent: '题服务主题服务主题服务主题服务主题服务主题服务主题服题服务主题服务主题服务主题服务主题服务主题服务主题服题服务主题服务主题服务题服务主题服务主题服务主题服务主题服务主题服务主题服题服务主题服务主题服务主题服务主题服务主题服务主题服题服务主题服务主题服务题服务主题服务主题服务主题服务主题服务主题服务主题服题服务主题服务主题服务主题服务主题服务主题服务主题服题服务主题服务主题服务'
			}
		},
		mounted() {
			window.addEventListener('scroll', this.handleScroll) // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
		},
		onLoad(options) {
			this.getServerGoods(options.goodsId, options.bizType)
			this.getMerchantServeList()
		},
		onReachBottom() {
			this.getMerchantServeList()
		},
		computed:{
			
		},
		methods: {
			getMerchantServeList() {
				const param = {
					parentId: 24, //父分类id
					bizType: 1, //业务类型（1：家政；2：维修）
					merchantId: 8, //商家id
					cateId: 25 //分类id
				}
				this.$u.api.merchantServeList(param).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.moreServerList = this.moreServerList.concat(res.rows)
						this.merchantServeParam.pageNum++
					}
				}).catch(error => {
					console.log(error)
				})
			},
			pageBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			goSure() {
				// const obj={
				// 	singleTime:this.personDetail.singleTime,   //	单次服务标准时长
				// 	goodsServerPrice:this.personDetail.goodsServerPrice , //单价，
				// 	cateId:this.personDetail.cateId,  //商品分类
				// 	name:this.personDetail.name,
				// 	goodsUnit:this.personDetail.goodsUnit,  //报价单位code,不等于099时取otherUnit
				// 	monad:this.personDetail.monad,    //报价单位，goodsUnit等于099时取
				// 	phone :this.phone   ,//服务人员的电话，
				// 	merchantId: this.personDetail.merchantId, //商户ID
				// 	serverId: this.personDetail.serverId,//服务人员ID
				// }
				uni.setStorageSync('personDetail',this.personDetail)
				uni.navigateTo({
					url: './sureOrder'
				})
			},
			// 点击评论图片预览
			commentImageClick(index) {
				let _this = this;
				let imgArray = [];
				// 多张
				for (let i = 0; i < this.imageSwiper.length; i++) {
					imgArray.push(this.imageSwiper[i].image);
				}
				uni.previewImage({
					current: index,
					urls: imgArray,
					indicator: 'number',
				});
			},
			// 点击轮播图预览
			imageSwiperClick(index) {
				let _this = this;
				let imgArray = [];
				// 多张
				for (let i = 0; i < this.imageSwiper.length; i++) {
					imgArray.push(this.imageSwiper[i].image);
				}
				uni.previewImage({
					current: index,
					urls: imgArray,
					indicator: 'number',
				});
			},
			getGoodsCommentList() {
				this.$u.api.goodsCommentList(this.commentParam).then(res => {
					// console.log(res.rows)
					if (res.code == 200) {
						this.commentList = this.commentList.concat(res.rows)
						this.commentParam.pageNum++
					}
				}).catch(error => {
					console.log(error)
				})
			},
			getServerGoods(goodsId, bizType) {
				this.$u.api.serverGoods({
					goodsId: goodsId, //服务商品id
					bizType: bizType //业务类型（1：家政；2：维修）
				}).then(res => {
					// console.log(res.data)
					if (res.code == 200) {
						this.personDetail = res.data
						this.personDetail.bizType=bizType
						this.getGoodsCommentList()
					}
				}).catch(error => {
					console.log(error)
				})
			},
			handleScroll() {
				let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body
					.scrollTop // 滚动条偏移量
				// let offsetTop = document.querySelector('#boxFixed').offsetTop;  // 要滚动到顶部吸附的元素的偏移量
				scrollTop > 50 ? this.showTabBar = true : this.showTabBar = false

				var serverContent = this.$el.querySelector('#serverContent').offsetTop + 180
				var descriptionFees = this.$el.querySelector('#descriptionFees').offsetTop + 180
				var serverComment = this.$el.querySelector('#serverComment').offsetTop + 180
				var serverMore = this.$el.querySelector('#serverMore').offsetTop + 180

				if (scrollTop >= serverContent && scrollTop < descriptionFees) {
					this.tabsCurrent = 0
				} else if (scrollTop >= descriptionFees && scrollTop < serverComment) {
					this.tabsCurrent = 1
				} else if (scrollTop >= serverComment && scrollTop < serverMore) {
					this.tabsCurrent = 2
				} else if (scrollTop > serverMore) {
					this.tabsCurrent = 3
				}


			},
			tabsChange(index) {
				this.tabsCurrent = index;

			},
			//展示 隐藏 商家回复
			shopShopRepltClick() {
				this.showShopReply = !this.showShopReply
			},
			// 展示 隐藏 追评
			showAddReplyClick() {
				this.showAddReply = !this.showAddReply
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title_text {
		padding: 41rpx 36rpx 0rpx 36rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #111111;
	}

	.wb_hide_2 {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.age_tag {
		width: 98rpx;
		height: 32rpx;
		background: linear-gradient(269deg, #E7C2A1 0%, #E7C2A1 0%, #F4EBE1 100%, #F4EBE1 100%);
		border-radius: 8rpx;
		opacity: 1;
		color: #78341C;
		text-align: center;
		font-size: 22rpx;
		font-weight: 500;
	}

	.good_comment {
		font-size: 22rpx;
		color: #FF1414;
		padding-left: 14rpx;
		padding-right: 14rpx;
		padding-top: 6rpx;
		padding-bottom: 6rpx;
		border: 1px solid #FF9999;
		border-radius: 8rpx;
	}

	.company_auth_active {
		width: 98rpx;
		height: 32rpx;
		border-radius: 10rpx 0rpx 10rpx 0rpx;
		opacity: 1;
		color: #FFFFFF;
		text-align: center;
		font-size: 21rpx;
		font-weight: bold;
		background: linear-gradient(270deg, #FF6B00 0%, #FF6B00 0%, #FFB700 100%, #FFB700 100%);
	}

	.company_auth {
		width: 98rpx;
		height: 32rpx;
		background: linear-gradient(270deg, #009BF8 0%, #009BF8 0%, #97D5FF 100%, #97D5FF 100%);
		border-radius: 10rpx 0rpx 10rpx 0rpx;
		opacity: 1;
		color: #FFFFFF;
		text-align: center;
		font-size: 21rpx;
		font-weight: bold;
	}

	.content_comment {
		border-radius: 8rpx;
		border: 1rpx solid #FF9999;
		color: #FF1414;
		font-size: 22rpx;
		padding-left: 5rpx;
		padding-right: 5rpx;
		margin-left: 17rpx;
	}
</style>
