<template>
	<view style="position: relative;">
		<view>
			<image src="../../static/shop_details_back_icon.png" @click.stop="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">
			</image> -->
		</view>

		<view
			style="background-color: #FFFFFF;border-top-left-radius: 20rpx; border-top-right-radius: 20rpx; z-index: 999;position: absolute;top: 560rpx;left: 0;right: 0;">
			<view class="title_text">{{shopDetail.name}}</view>
			<view class="flex align-start"
				style="background-color: #FAF6F1; border-radius: 15rpx;margin-top: 50rpx;margin-left: 20rpx;margin-right: 20rpx;">
				<image mode="aspectFill"
					style="width: 145rpx;height: 116rpx; border-radius: 10rpx;margin-top: 37rpx;margin-bottom: 37rpx;margin-left: 20rpx;"
					v-if="shopDetail.avatar" :src="shopDetail.avatar"></image>
				<image mode="aspectFill"
					style="width: 145rpx;height: 116rpx; border-radius: 10rpx;margin-top: 37rpx;margin-bottom: 37rpx;margin-left: 20rpx;"
					src="../../static/avatar_icon.png" v-else></image>

				<view style="margin-top: 35rpx;margin-left: 21rpx; margin-right: 20rpx;width: 100%;">
					<view>
						<text class="wb_hide_2"
							style="font-size: 26rpx;font-weight: bold;color: #111111;">{{shopDetail.merchantName}}</text>
					</view>
					<view class="flex align-center justify-between">
						<text class="age_tag" style="margin-top: 12rpx;">{{shopDetail.storeAge}}年店龄</text>
						<text
						v-if="shopDetail.sales>0"
							style="margin-top: 18rpx;font-size: 24rpx;color: #D09A6C;">成交{{shopDetail.sales}}单</text>
					</view>
					<view class="flex align-center justify-between">
						<view class="flex align-center " style="margin-top: 10rpx;" v-if="shopDetail.score>0">
							<view style="font-size: 22rpx;color: #FC6035;">综合评分：</view>
							<view
								style="font-size: 24rpx; color: #FC6035;">{{shopDetail.score.toFixed(1)}}</view>
							<u-rate v-model="shopDetail.score" :disabled="true" size="24"></u-rate>
						</view>
						<view class="good_comment" style="margin-top: 10rpx;" v-if="shopDetail.rate>0">
							好评率{{shopDetail.rate }}%
						</view>

					</view>
				</view>
			</view>
			<view class="flex align-center justify-between"
				style="margin-left: 30rpx;margin-right: 40rpx;margin-top: 30rpx;padding-bottom: 38rpx;border-bottom: #EEEEEE 1rpx solid;">
				<view>
					<view class="flex align-center" style="margin-right: 60rpx;">
						<image src="../../static/shop_address_icon.png" style="width: 30rpx;height: 30rpx;"
							mode="aspectFill"></image>
						<text
							style="margin-left: 17rpx;font-size: 26rpx;color: #111111;">{{shopDetail.detail}}{{shopDetail.houseNumber}}</text>
					</view>

					<view class="flex align-center" style="margin-top: 24rpx;" @click="viewScope">
						<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>
				<a :href="'tel:'+shopDetail.serverPhone">
					<image style="width: 74rpx; height: 74rpx;" src="../../static/shop_phone_icon.png"></image>
				</a>
			</view>

			<view style="margin-top: 32rpx;margin-left: 34rpx;">
				<text style="font-size: 34rpx;font-weight: bold;color: #111111;">店铺简介</text>
				<view style="margin-top: 20rpx;">
					<u-read-more show-height="145" :toggle="true" closeText="展开" color="#999" text-indent="0"
						v-if="shopDetail.merchantDesc">
						<rich-text :nodes="shopDetail.merchantDesc" style="color: #999999;word-break:break-all"></rich-text>
					</u-read-more>
				</view>
			</view>
			<view class="" style="width: 100%;height: 15rpx;background-color: #F6F6F6;">

			</view>
			<view class="" style="width: 100%;">
				<u-sticky offset-top="0" @fixed="tabFixed=true" @unfixed="tabFixed=false" h5-nav-height="0">
					<view class="bg-ff" style="height: 154px;">
						<view style="padding: 32rpx 0 20rpx 34rpx;color: #BEC3C6; font-size: 38rpx;font-weight: bold;">
							服务项目
						</view>
						<view class="" >
							<u-tabs-swiper active-color="#111111" inactive-color="#111111" ref="uTabs" bg-color="#fff"
								:bar-style="barStyle" :list="categoryList" :is-scroll="true" :current="tabCurrent"
								swiperWidth="750" name="categoryName" @change="tabChange"
								
								>
							</u-tabs-swiper>
						</view>
						<scroll-view scroll-x="true" style="margin-top: 20rpx;padding-left: 34rpx;white-space: nowrap;">
							<view class="" v-for="(subItem,index) in categoryList[tabCurrent].childrenCategory"
								:key="index"
								style="display: inline-block;padding: 14rpx 25rpx; margin-right: 30rpx;border-radius: 8rpx;"
								:class="categoryList[tabCurrent].secIndex==index?'active':'noactive'"
								@click.stop="onSecClick(index)">
								{{subItem.categoryName}}
							</view>
						</scroll-view>
					</view>
				</u-sticky>

				<swiper style="height: calc(100vh - 144px);" :current="swiperCurrent" @transition="transition"
					@animationfinish="animationfinish">
					<swiper-item class="swiper-item" v-for="(page, index) in  categoryList" :key="index">
						<scroll-view :scroll-y="tabFixed" style="height: 100%" id="mySwiper"
							@scrolltolower='scrolltolower(index)'>
							<view class="" v-if="page.childrenCategory[page.secIndex].childList.length>0">
								<view class="flex align-center"
									v-for="(item,index) in page.childrenCategory[page.secIndex].childList" :key="index"
									@click="goDetail(item)"
									style="padding-bottom: 40rpx;margin-left: 25rpx;margin-right: 25rpx;">
									<view style="position:relative">
										<image style="width: 240rpx; height: 180rpx; border-radius: 10rpx;"
											mode="aspectFill" :src="item.goodsImageList[0].url"></image>
                                            <image src="../../static/group.png" style="position: absolute;width:36rpx;height:36rpx;left:0;top:0;" v-if="item.isGroupGoods==1"></image>
                                            <image src="../../static/reserve.png" style="position: absolute;width:36rpx;height:36rpx;left:0;top:0;" v-if="item.isGroupGoods==0"></image>
									</view>
									<view style="margin-left: 20rpx;flex: 1;height: 180rpx;">
										<text class="wb_hide_2 content_text" style="font-size: 30rpx;">{{item.name}}</text>

                                        <view v-if="item.rate>0&&item.isGroupGoods==1" style="color:#FF0000; font-size: 22rpx;" class="margin-top margin-bottom flex align-center justify-center rate-box">
                                            <view style=" text-align: left;">好评率</view>
                                            <view style="margin-left:6rpx;margin-top:4rpx;">{{item.rate}}%</view>
                                        </view>

										<view style="margin-top: 10rpx;;" class="flex align-center" v-if="item.isGroupGoods==0">
											<view class="age_tag">{{item.serverAge}}年工龄</view>
											<view class="content_comment" v-if="item.rate>0">好评率{{item.rate}}%</view>
										</view>
										<view class="flex align-center justify-between" style="margin-top: 10rpx;" v-if="item.isGroupGoods==0">
											<view class="flex align-center">
												<text style="color: #111111; font-size: 24rpx;">{{item.realName}}</text>
												<text
													style="color: #D09A6C; font-size: 24rpx;margin-left: 10rpx;">{{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;">
											<view class="" v-if="item.isGroupGoods==0">
												<text style="font-size: 32rpx;color: #FF1414;margin-right:6rpx;" class="text-bold">
													{{item.goodsServerPrice}}
												</text>
												<text style="font-size: 26rpx;color: #FF1414;">
													元/{{item.goodsUnit=='999'?item.otherUnit:item.goodsUnitName}}
												</text>
											</view>

                                            <view class="flex align-center" v-if="item.isGroupGoods==1">
                                                <view style="color: #FF0000;font-size:32rpx;" class="text-bold">
                                                    <span class="text-sm">￥</span>{{item.currentPrice}}
                                                </view>
                                                <view style="margin-left: 16rpx; text-decoration:line-through;color: #999;font-size: 26rpx; text-align: left;">
                                                    <span>￥</span>{{item.scribingPrice}}
                                                </view>
                                            </view>

											<view @click.stop="goOrder(item)" v-if="item.isGroupGoods==1"
												style="background-color: #FC6035;color: #FFFFFF;padding: 10rpx 24rpx 10rpx 24rpx;border-radius: 8rpx;">
												立即购买</view>
                                            <view @click.stop="goOrder(item)" v-if="item.isGroupGoods==0"
												style="background-color: #FC6035;color: #FFFFFF;padding: 10rpx 24rpx 10rpx 24rpx;border-radius: 8rpx;">
												立即预约</view>

										</view>
									</view>
								</view>
								<view class="" style="margin-top: 50rpx;">
									<u-loadmore
										v-if="categoryList[tabCurrent].childrenCategory[categoryList[tabCurrent].secIndex].showLoadMore"
										:status=" categoryList[tabCurrent].childrenCategory[categoryList[tabCurrent].secIndex].status" />
								</view>
							</view>
							<view class="align-center" v-else>
								<image src="../../static/nomore_icon.png" mode=""
									style="width: 370rpx;height: 370rpx;margin: 0 auto;"></image>
							</view>
						</scroll-view>

					</swiper-item>
				</swiper>

			</view>

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

<script>
	export default {
		data() {
			return {
				lastSecIndex: '',
				tabFixed: false,
				secIndex: 0,
				topheight: -112,
				tabCurrent: 0,
				categoryList: [

					{
						secIndex: 0,
						childrenCategory: [{
							childList: [],
							pageNum: 1,
							showLoadMore: '',
							status: '',
                            noMoreGroup: false,
						}]
					}
				],
				shopDetail: {
					score: 2,
				},
				imageSwiper: [],
				activeitemstyle: {
					'font-size': '34rpx',
					'font-weight': 'blod'
				},
				barStyle: {
					'height': '14rpx',
					'background-color': 'transparent',
					'background-image': "url('../../static/tabbar_icon.png')",
					'background-size': '100% 100%'
				},
				swiperCurrent:0,
				goodsId:'',
				bizType:''
			}
		},
		onLoad(item) {
			const options = uni.getStorageSync('indexDetails')
			if(item!=''&&item.flag==='true'){
				// console.log(item,'啊实打实大')
					this.getMerchantGoods(item.merchantId)
					this.goodsId=item.goodsId,
					this.bizType=item.bizType
			}else{
				this.getMerchantGoods(options.merchantId)
				this.goodsId=options.goodsId,
				this.bizType=options.bizType
				console.log(this.goodsId)
			}
			
			
			
		},
		onReachBottom() {

		},
		methods: {
			//scroll view 触底加载
			scrolltolower(index) {
				console.log('scrolltolower')
				this.getSecCategory()
			},
            //预约
			goOrder(item) {
				// console.log(item)
				uni.setStorageSync('personDetail', item)
				if(item.isGroupGoods==1) {
                    uni.navigateTo({
                        url: `./sureOrderGroup?goodsSpecificationId=${item.goodsSpecificationId}`
                    })
                } else {
                    uni.navigateTo({
                        url: './sureOrder'
                    })
                }
			},
            //服务人员详情
			goDetail(obj) {
				// console.log(obj)
				uni.removeStorageSync('indexDetails')
				// console.log(obj)
				obj.bizType = this.$bizType
				uni.setStorageSync('indexDetails', obj)
                if(obj.isGroupGoods==1) {
                    uni.navigateTo({
                    	url: './groupDetails'
                    })
                } else {
                    uni.navigateTo({
                    	url: './personDetails'
                    })
                }
			},
			// 点击二级类目
			onSecClick(index) {
				const temp = this.categoryList[this.tabCurrent]
				// this.$nextTick(function() {
				temp.secIndex = index
				this.$forceUpdate()
				// })
				temp.secIndex = index
				const item = this.categoryList[this.tabCurrent].childrenCategory[temp.secIndex]
				// console.log(temp.secIndex, index, item)
				if (item.childList.length > 0) {
					return
				}
				this.getSecCategory()

			},
            //商家服务列表
			getSecCategory() {
				const temp = this.categoryList[this.tabCurrent]
				const obj = this.categoryList[this.tabCurrent].childrenCategory
				const item = obj[temp.secIndex]
				const parma = {
					parentId: temp.categoryId,
					pageNum: item.pageNum,
					pageSize: 10,
					merchantId: this.shopDetail.merchantId,
					bizType: this.$bizType,
				}
				if (item.categoryId) {
					parma.cateId = item.categoryId
				}
                if(item.noMoreGroup) {
                    parma.isGroupGoods = 0
                } else {
                    parma.isGroupGoods = 1
                }

				this.$u.api.merchantServeList(parma).then(res => {
					// console.log(res)
					item.showLoadMore = true
					if (res.code == 200) {
						item.childList = item.childList.concat(res.rows)
						if (res.rows.length < 10) {
							if(item.noMoreGroup) {
                                this.status = 'nomore'
                            }
                            if(!item.noMoreGroup) {
                                item.noMoreGroup = true
                                item.pageNum = 1
                                this.getSecCategory();
                            } else {
                                item.pageNum++
                            }
                            
						} else {
							this.showLoadMore = false
						}
						
					}
					this.$forceUpdate()
				}).catch(error => {
					console.log(error)
				})


			},
            //分类列表
			getCaregoryList() {
				var that = this
				this.$u.api.categoriesList({
					bizType: this.$bizType
				}).then(res => {
					if (res.code == 200) {
						// console.log(res)
						that.categoryList = res.data
						that.categoryList.forEach(obj => {
							if (obj.childrenCategory == '' || obj.childrenCategory == null) {
								obj.childrenCategory = []
							}
							const tempobj = {
								categoryName: '全部',
								cateId: '',
							}
							obj.childrenCategory.unshift(tempobj)
							obj.secIndex = 0
							obj.childrenCategory.forEach(item => {
								item.childList = []
								item.pageNum = 1
								item.showLoadMore = false
								item.status = 'nomore'
                                item.noMoreGroup = false  //商家服务列表-先请求团购列表-再加服务列表

							})
						})
						// console.log(that.categoryList)
						this.getSecCategory()
					}
				}).catch(error => {
					console.log(error)
				})
			},

			pageBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 查看范围
			viewScope() {
				// console.log(this.shopDetail)
				uni.navigateTo({
					url: '../map-range/map-range?longitude=' + this.shopDetail.longitude +
						'&latitude=' +
						this
						.shopDetail.latitude + '&radius=' + this.shopDetail
						.serviceDistance+'&name='+this.shopDetail.name
				})
			},
			//获取商家信息
			getMerchantGoods(merchantId) {
				this.$u.api.merchantDetail(
					merchantId //店铺id
				).then(res => {
					if (res.code == 200) {
						this.shopDetail = res.data
                        this.imageSwiper = [{
                            'image': res.data.bannerImgUrl
                        }]
						// if (res.data.goodsImageList) {
						// 	this.imageSwiper = res.data.goodsImageList.map(item => {
						// 		return {
						// 			'image': item.url
						// 		}
						// 	})
						// }
						this.getCaregoryList()
					}
				}).catch(error => {
					console.log(error)
				})
			},
			// 点击轮播图预览
			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',
				});
			},
            //点击一级分类
			tabChange(index) {
				// this.tabCurrent = index;
				this.swiperCurrent = index
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.tabCurrent = current;
				const temp = this.categoryList[current]
				const item = this.categoryList[current].childrenCategory
				// console.log(item)
				if ((item[0].childList == undefined || item[0].childList.length < 1) && item[0].pageNum < 2) {

					this.getSecCategory()
				}
			},

		}
	}
</script>
<style lang="scss" scoped>
	.content_comment {
		border-radius: 8rpx;
		border: 1rpx solid #FF9999;
		color: #FF1414;
		font-size: 22rpx;
		padding: 2rpx 14rpx;
		margin-left: 17rpx;
	}

	.active {
		background-color: #FFF4F0;
		color: #FC6035;
	}

	.noactive {
		background-color: #F7F8F9;
		color: #666666;
	}

	.title_text {
		padding: 41rpx 36rpx 0rpx 34rpx;
		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;
		padding: 1rpx 10rpx;
		// height: 32rpx;
		background: linear-gradient(269deg, #E7C2A1 0%, #E7C2A1 0%, #F4EBE1 100%, #F4EBE1 100%);
		border-radius: 8rpx;
		opacity: 1;
		color: #885c4b;
		text-align: center;
		font-size: 22rpx;
	}

	.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 {
		// width: 98rpx;
		// height: 32rpx;
		padding: 4rpx 10rpx;
		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;
	}
	
	.presonal_auth {
		// width: 98rpx;
		// height: 32rpx;
			padding: 4rpx 10rpx;
		background: linear-gradient(270deg, #FF6B00 0%, #FF6B00 0%, #FFB700 100%, #FFB700 100%);
		border-radius: 10rpx 0rpx 10rpx 0rpx;
		opacity: 1;
		color: #FFFFFF;
		text-align: center;
		font-size: 21rpx;
		// font-weight: bold;
	}

     .rate-box {
        border: 2rpx solid #ff8f96;
        border-radius: 8rpx;
        width: 150rpx;
        height: 36rpx;
    }
	
</style>
