<template>
	<view class="">

		<view class="flex align-center "
			style="background-color: #FFFFFF; height: 100rpx; border-bottom: 1rpx #EEEEEE solid; ">

			<u-icon name='arrow-left' class="right_icon" style="margin-left: 33rpx;" size="40" @tap="navigateBack">
			</u-icon>
			<view class=""
				style="color: #111;font-size: 34rpx;font-weight: bold;margin-left: 15rpx;margin-right: 20rpx;">
				{{headerTittle}}
			</view>
			<view @click="gotoSearch" class="flex align-center"
				style="background-color: #F5F6F7;flex:1;height: 70rpx;margin-left: 60rpx;margin-right: 20rpx; border-radius: 34rpx;color: #999999;">
				<image src="../../../static/home_search_icon.png" mode=""
					style="width: 30rpx; height: 30rpx;margin-left: 30rpx;"></image>
				<view class="" style="margin-left: 10rpx;">
					<!-- <input  type="text" placeholder="请搜索" /> -->
					请搜索
				</view>
			</view>
		</view>
		<view>
			<scroll-view scroll-x="true" style="white-space: nowrap; padding: 35rpx 25rpx;">
				<view @click="selectHeadClick(index)" v-for="(item,index) in headerList" :key="item.id"
					style="display: inline-block; margin-right: 40rpx;">
					<view>
						<image :src="item.icon" mode="aspectFill"
							style="width: 100rpx;height: 100rpx;border-radius: 50%;"></image>
					</view>
					<view v-if="currentIndex == index"
						style="margin-top: 10rpx;font-size: 24rpx;color: #FC6035;font-weight: bold;text-align: center;">
						{{item.categoryName}}
					</view>
					<view v-else
						style="margin-top: 10rpx;font-size: 22rpx;color: #666666;font-weight: 500;text-align: center;">
						{{item.categoryName}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="" style="background-color: #FFFFFF; margin-top:1rpx;">
			<view class="u-tabs-box" :style="[{width:$bizType=='2'?'330rpx;':'520rpx'}]">
				<u-tabs-swiper activeColor="#111" inactive-color="#111" ref="tabs" :list="serviceNameList"
					:current="current" @change="change" :is-scroll="false" :bar-style="barStyle"
					:active-item-style='activeitemstyle'>
				</u-tabs-swiper>
			</view>
			<scroll-view scroll-y="true" style="height:calc(100vh - 100rpx - 216rpx - 80rpx)">
				<view v-if="canLoadData&&!groupBuy" class="" style="">
					<view class="" v-if="headerList[currentIndex].childList[listCurrent].length>0">
						<view v-for="(contentItem,index) in headerList[currentIndex].childList[listCurrent]" :key="index" class="flex align-start" style="margin-left: 25rpx;margin-right: 25rpx;"
							@click="onCardClick(contentItem)" :class="listCurrent=='0'?'margin-top-lg':''">
							<view style="position: relative;" :style="{height:listCurrent==1?'254rpx':''}" :class="listCurrent==1?'flex align-center':''">
								<view v-if="listCurrent==0" :class="{'presonal_auth':contentItem.merchantType ==1, 'company_auth':contentItem.merchantType ==0}" style="position: absolute; top: 0;left: 0;z-index: 2;">
									{{contentItem.merchantType ==1?"个人认证":"企业认证"}}
								</view>
								<image style="width: 240rpx; height: 180rpx; border-radius: 10rpx;" mode="aspectFill" :src="contentItem.goodsImageList[0].url" v-if="listCurrent==0"></image>
								<image style="width: 240rpx; height: 180rpx; border-radius: 10rpx;" mode="aspectFill" :src="contentItem.avatar" v-if="listCurrent==1"></image>
							</view>
                            <view class="flex-sub padding-right">

							<view :style="{height:listCurrent==1?'220rpx':'180rpx'}" style="margin-left: 20rpx; width: 100%;height: 180rpx; display: flex;flex-direction: column;">
								<view class="wb_hide_2" v-if="listCurrent==0">{{contentItem.name}}</view>
                                <view class="wb_hide_2 margin-top-lg" v-if="listCurrent==1">{{contentItem.merchantName}}</view>

                                <view style="margin-top: 15rpx;" class="flex align-center" v-if="listCurrent==0">
                                    <view class="age_tag"> {{contentItem.serverAge}}年工龄</view>
                                    <view class="content_comment" v-if="contentItem.rate>0">好评率{{contentItem.rate}}%</view>
                                </view>

                                <view style="margin-top: 15rpx;" class="flex align-center justify-between" v-if="listCurrent==1">
                                    <view class="age_tag"> {{contentItem.storeAge}}年店龄</view>
                                    <view>成交{{contentItem.sales}}单</view>
                                </view>

                                <view style="margin-top: 15rpx;" class="flex align-center justify-between" v-if="listCurrent==1">
                                    <view style="color:#FF481E;font-size:22rpx;"> 综合评分： <span style="font-size: 24rpx;" class="text-bold">{{contentItem.score}}</span> </view>
                                    <view class="content_comment" v-if="contentItem.rate>0">好评率{{contentItem.rate}}%</view>
                                </view>


								<view v-if="listCurrent == 0" class="flex align-center justify-between" style="margin-top: 10rpx;">
									<view class="flex align-center">
										<text style="color: #111111; font-size: 24rpx;font-weight: 500;">{{contentItem.realName}}</text>
										<text v-if="contentItem.serverLevel == '001'" style="color: #D09A6C; font-size: 24rpx;margin-left: 20rpx;font-weight: 500;">初级家政</text>
										<text v-else-if="contentItem.serverLevel == '002'" style="color: #D09A6C; font-size: 24rpx;margin-left: 20rpx;font-weight: 500;">中级家政</text>
										<text v-else-if="contentItem.serverLevel == '003'" style="color: #D09A6C; font-size: 24rpx;margin-left: 20rpx;font-weight: 500;">高级家政</text>
										<text v-else-if="contentItem.serverLevel == '004'" style="color: #D09A6C; font-size: 24rpx;margin-left: 20rpx;font-weight: 500;">金牌家政</text>
									</view>
									<view style="font-size: 26rpx;color: #FF1414;">
										<text style="font-size: 32rpx;margin-right:6rpx;" class="text-bold">{{contentItem.goodsServerPrice}}</text>元/{{contentItem.goodsUnit == "999"?contentItem.otherUnit:contentItem.goodsUnitName}}
									</view>
								</view>
                                 
								<view v-if="contentItem.merchantType  == 0&&listCurrent==0" style="margin-top: 20rpx;">
									<text style="font-size: 22rpx;color: #999999;"
										class="wb_hide_2">{{contentItem.merchantName}}</text>
								</view>
							</view>
                            <view style="margin-left: 20rpx; width: 100%;" v-if="listCurrent==1">
                                <view v-for="(good,goodIndex) in contentItem.goodsList" :key="good.goodsId">
                                    <view v-if="goodIndex<2">
                                        <view class="flex align-center">
                                            <image src="../../../static/group.png" style="width:36rpx;height:36rpx;left:0;top:0;" v-if="good.isGroupGoods==1"></image>
                                            <image src="../../../static/reserve.png" style="width:36rpx;height:36rpx;left:0;top:0;" v-if="good.isGroupGoods==0"></image>
                                            <view style="margin-left:10rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 380rpx;">{{good.name}}</view>
                                        </view>
                                        <view class="flex align-center margin-top-sm margin-bottom" v-if="good.isGroupGoods==1">
                                            <view style="color: #FF0000;font-size:32rpx;" class="text-bold">
                                                <span class="text-sm">￥</span>{{good.currentPrice}}
                                            </view>
                                            <view style="margin-left: 16rpx; text-decoration:line-through;color: #999;font-size: 26rpx; text-align: left;">
                                                <span>￥</span>{{good.scribingPrice}}
                                            </view>
                                        </view>
                                        <view style="font-size: 32rpx;color: #FF1414;" class="flex flex-sub margin-top-sm margin-bottom" v-if="good.isGroupGoods==0">
                                            <span class="text-bold" style="margin-right:8rpx;">{{good.goodsServerPrice}}</span>
                                            <span style="font-size: 26rpx;">元/{{good.goodsUnit == "999"?good.otherUnit:good.goodsUnitName}}</span>
                                        </view>
                                    </view>
                                    
                                </view>
                            </view>
                        </view>
						</view>
						<u-loadmore v-if="headerList[currentIndex].showLoadMore" :margin-top="30"
							:status="headerList[currentIndex].status" />
					</view>
					<view class=" flex align-center" v-else style="width: 100vw;">
						<image src="../../../static/nomore_icon.png" mode=""
							style="width: 370rpx;height: 370rpx;position: absolute;top:calc(50% - 185rpx) ;left:calc(50% - 185rpx);">
						</image>
					</view>
				</view>

                <view v-if="canLoadData&&groupBuy">
                    <u-waterfall v-model="flowList" ref="uWaterfall" style="padding-left:18rpx;">
                        <template v-slot:left="{leftList}">
                            <view @click="gotoDetails(item)" class="demo-warter" v-for="(item, index) in leftList" :key="index">
                                <!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
                                <u-lazy-load threshold="-450" border-radius="0" :height="260" img-mode="" :image="item.goodsImageList[0].url" :index="index"></u-lazy-load>
                                <view class="padding-lr-sm padding-bottom">
                                    <view class="demo-title">
                                        {{item.name}}
                                    </view>
                                    <view v-if="item.rate>0" style="margin-top: 20rpx;color:#FF0000; font-size: 22rpx;" class="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: 20rpx;" class="flex align-center">
                                        <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>
                            </view>
                        </template>

                        <template v-slot:right="{rightList}">
                            <view @click="gotoDetails(item)" class="demo-warter" v-for="(item, index) in rightList" :key="index">
                                <u-lazy-load threshold="-450" border-radius="0" :height="260" img-mode="" :image="item.goodsImageList[0].url" :index="index"></u-lazy-load>
                                <view class="padding-lr-sm padding-bottom">
                                    <view class="demo-title">
                                        {{item.name}}
                                    </view>
                                    <view v-if="item.rate>0" style="margin-top: 20rpx;color:#FF0000; font-size: 22rpx;" class="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: 20rpx;" class="flex align-center">
                                        <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>
                            </view>
                        </template>
                    </u-waterfall>
                    
                    <view class=" flex align-center" v-if="flowList.length==0" style="width: 100vw;">
						<image src="../../../static/nomore_icon.png" mode=""
							style="width: 370rpx;height: 370rpx;position: absolute;top:calc(50% - 185rpx) ;left:calc(50% - 185rpx);">
						</image>
					</view>
                    <u-loadmore v-if="showGroupLoadMore" :status="groupStatus" :margin-top="20"/>
                </view>

			</scroll-view>




		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeitemstyle: {
					'font-size': '34rpx',
					'font-weight': 'blod'
				},
				barStyle: {
					'height': '14rpx',
					'background-color': 'transparent',
					'background-image': "url('../../static/tabbar_icon.png')",
					'background-size': '100% 100%'
				},
				canLoadData: false,
				headerTittle: '',
				currentIndex: 0,
				///临时存储list
				contentList: [{}, {}, {}, {}, {}, {}],
				headerList: [],
				current: 0,
                listCurrent: 0,
				serviceNameList: [],
				servicePersonList: [],
				shopList: [],
				tempList: [],
				lastServerType: -1,
				pageId: '',
                groupBuy: this.$bizType=='1',
                flowList: [],
                showGroupLoadMore: false,
                groupStatus: "loading",
                groupPageNum: 1,
                groupPageSize: 10
			}
		},
		onReachBottom() {
            console.log('onReachBottom-onReachBottom-onReachBottom')
			this.getChannelContentList(this.currentIndex)
		},
		onLoad(options) {
			// console.log(options.item)
			this.getserviceNameList();
			// debugger
			// const item = JSON.parse(options.item)
			const item = uni.getStorageSync('channelPage')
			this.headerTittle = item.categoryName
			// console.log(item,options)
			this.pageId = item.categoryId
			if (item.childrenCategory == undefined || item.childrenCategory.length == 0) {
				this.canLoadData = false
			} else {
				this.canLoadData = true
				item.childList = []
				this.headerList = item.childrenCategory
				this.headerList.unshift({
					categoryName: '全部',
					icon: item.icon,
					parentId: item.categoryId,
					pageParam: [{
						pageNum: 1,
						pageSize: 10
					}, {
						pageNum: 1,
						pageSize: 10
					}],
					childList: [
						[],
						[]
					],
					showLoadMore: false,
					status: 'loading'
				})
				this.headerList.forEach((e) => {
					e.pageParam = [{
						pageNum: 1,
						pageSize: 10
					}, {
						pageNum: 1,
						pageSize: 10
					}]
					e.childList = [
						[],
						[]
					]
					e.showLoadMore = false
					e.status = 'loading'
				})
				this.currentIndex = item.selectIndex + 1

				this.getChannelContentList(this.currentIndex)
			}
		},

		methods: {
			//点击卡片跳转
			onCardClick(obj) {
				// console.log(obj)
				uni.removeStorageSync('indexDetails')
                obj.bizType = this.$bizType
                uni.setStorageSync('indexDetails', obj)
                if(this.groupBuy) {
                    uni.navigateTo({
                        url: '../../groupDetails'
                    })
                } else {
                    if (this.listCurrent == 0) {
                        uni.navigateTo({
                            url: '../../index/personDetails'
                        })
                    } else {
                        uni.navigateTo({
                            url: '../../index/shopDetails'
                        })
                    }
                }
			},
			selectHeadClick(index) {
				// console.log(index, 'selectHeadClick')
				this.currentIndex = index
				if (this.canLoadData) {
					this.getChannelContentList(this.currentIndex)
				}

			},
			//获取服务人员商家的数据
			async getChannelContentList(index) {
				if(!this.groupBuy) {
                var item = this.headerList[index];
				// console.log(item, this.pageId)
				// if (item.childList[this.listCurrent].length > 0) return
				var param = {
					pageNum: item.pageParam[this.listCurrent].pageNum,
					pageSize: item.pageParam[this.listCurrent].pageSize,
					parentId: this.pageId, //分类id父id
					bizType: this.$bizType, //业务类型（1：家政；2：维修）
				}
				// 全部分类不需要cateid
				if (item.categoryName != '全部') {
					param.cateId = item.categoryId
				}
				var that = this
				item.status = 'loading'
				item.showLoadMore = true
				// console.log(index, 'index')
				if (this.listCurrent == 0) {
                    param.isGroupGoods = 0;
					this.$u.api.chanelCrewList(param).then(res => {
						if (res.code == 200) {
							if (res.rows.length == 0) {
								item.status = 'nomore'

							} else {
								item.childList[that.listCurrent] = item.childList[that.listCurrent].concat(res.rows)
								item.showLoadMore = false
								item.pageParam[that.listCurrent].pageNum++
							}

							that.$forceUpdate()
						}
					})
				} else {
					this.$u.api.seekMerchantMerchandiseList(param).then(res => {
						if (res.code == 200) {
							if (res.rows.length == 0) {
								item.status = 'nomore'
							} else {
								item.childList[that.listCurrent] = item.childList[that.listCurrent].concat(res.rows)
								item.showLoadMore = false
								item.pageParam[that.listCurrent].pageNum++
							}
							that.$forceUpdate()
						}
					})

                }
                } else {
                    var item = this.headerList[index];
                    // console.log(item, this.pageId)
                    // if (this.flowList.length > 0) return
                    var param = {
                        pageNum: this.groupPageNum,
                        pageSize: this.groupPageSize,
                        parentId: this.pageId, //分类id父id
                        bizType: this.$bizType, //业务类型（1：家政；2：维修）
                    }
                    // 全部分类不需要cateid
                    if (item.categoryName != '全部') {
                        param.cateId = item.categoryId
                    }
                    var that = this
                    that.groupStatus = 'loading'
                    that.showGroupLoadMore = true
                    // this.$api.msg('团购')
                    param.isGroupGoods = 1;
                    this.$u.api.seekCrewList(param).then(res => {
                        if (res.code == 200) {
                            if (res.rows.length == 0) {
                                this.groupStatus = 'nomore'
                            } else {
                                this.flowList = this.flowList.concat(res.rows)
                                this.showGroupLoadMore = false
                                this.groupPageNum++
                            }
                            that.$forceUpdate()
                        }
                    })
							
                }



			},
			///获取list
			getserviceNameList() {
				this.serviceNameList = [{
						name: '服务人员'
					},
					{
						name: '商家'
					},
				];
                if(this.$bizType=='1') {
                    this.serviceNameList.unshift({name: '团购服务'})
                }
			},
			///点击tab转换index
			change(index) {
				this.current = index;
                if(this.$bizType=='1') {
                    this.listCurrent = index - 1
                } else {
                    this.listCurrent = index
                }
				if (this.canLoadData) {
                    if(this.$bizType=='1'&&index==0) {
                        this.groupBuy = true;
                    } else {
                        this.groupBuy = false;
                    }
                    this.getChannelContentList(this.currentIndex)			
				}

			},
			///回退页面
			navigateBack() {
				uni.navigateBack();
			},
			gotoSearch() {
				uni.navigateTo({
					url: '../../index/search'
				})
			},
            gotoDetails(obj) {
                uni.removeStorageSync("indexDetails");
                obj.bizType = this.$bizType;
                uni.setStorageSync("indexDetails", obj);
                uni.navigateTo({
                    url: "../../index/groupDetails",
                });
            }
		},
	}
</script>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style scoped lang="scss">
	.twoLineStyle {
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		color: #111111;
		font-size: 29rpx;
		text-overflow: ellipsis;
	}

	.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;
	}
	.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;
	}

	.content_comment {
		border-radius: 8rpx;
		border: 1rpx solid #FF9999;
		color: #FF1414;
		font-size: 22rpx;
		padding: 2rpx 10rpx;
		margin-left: 17rpx;
	}

	.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;
	}


.demo-warter {
    border-radius: 20rpx;
    overflow: hidden;
    margin: 18rpx 18rpx 18rpx 0;
    background-color: #ffffff;
    position: relative;
}

.u-close {
    position: absolute;
    top: 32rpx;
    right: 32rpx;
}

.demo-image {
    width: 100%;
    border-radius: 4px;
}

.demo-title {
    font-size: 30rpx;
    margin-top: 5px;
    color: #111;
    word-wrap: break-word;
}

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

</style>
