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


			<u-icon name='arrow-left' class="right_icon" style="margin-left: 33rpx; width: 22rpx; height: 38rpx;"
				@tap="navigateBack"></u-icon>
			<view class="" style="color: #111;font-size: 34rpx;font-weight: bold;margin-left: 15rpx;"> {{headerTittle}}
			</view>

			<view style="margin-left: 60rpx;margin-right: 30rpx;">


				<!-- <u-search shape="round" :show-action="false"></u-search> -->
			</view>
			<view @click="gotoSearch" class="flex align-center"
				style="background-color: #F5F6F7;width: 450rpx;height: 70rpx;margin-left: 60rpx;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="index"
					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">
				<u-tabs-swiper activeColor="#FC6035" ref="tabs" :list="serviceNameList" :current="current"
					@change="change" :is-scroll="true" swiperWidth="750">
				</u-tabs-swiper>
			</view>

			<view v-if="canLoadData" class="" style="">
				<view v-for="(contentItem,index) in headerList[currentIndex].childList" :key="index"
					class="flex align-start" style="margin-top: 30rpx;margin-left: 25rpx;margin-right: 25rpx;">
					<view style="position: relative;">
						<view :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: 250rpx; height: 200rpx; border-radius: 10rpx;" mode="aspectFill"
							src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F060421091316%2F210604091316-8-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643870014&t=113341db71b753010a93a1972f7d6db1">
						</image>
					</view>
					
					
					<view style="margin-left: 20rpx; width: 100%;">
						<text class="wb_hide_2 content_text">{{contentItem.name}}</text>
					
						<view style="margin-top: 29rpx;" class="flex align-center">
							<view class="age_tag">{{serverType == 1?contentItem.storeAge:contentItem.serverAge}}年{{serverType == 1?'店龄':'工龄'}}</view>
							<view class="content_comment">好评率{{contentItem.rate}}%</view>
						</view>
						<view v-if="serverType == 0" class="flex align-center justify-between" style="margin-top: 20rpx;">
							<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>
								<text style="font-size: 32rpx;color: #FF1414;">{{contentItem.goodsServerPrice}}元/{{contentItem.goodsUnit == "099"?contentItem.otherUnit:contentItem.monad}}</text>
							</view>
						</view>
						<view v-if="serverType == 0" style="margin-top: 20rpx;">
							<text style="font-size: 22rpx;color: #999999;" class="wb_hide_2">{{contentItem.merchantName}}</text>
						</view>
						<view v-if="serverType == 1" style="margin-top: 40rpx;">
							<text style="font-size: 22rpx;color: #999999;" class="wb_hide_2">{{contentItem.merchantName}}</text>
						</view>
					
					
					</view>
					
				</view>

				<u-loadmore v-if="showLoadMore" :status="status" />
			</view>

		</view>

	</view>
</template>

<script>
	export default {


		data() {
			return {
				canLoadData: false,
				headerTittle: '',
				currentIndex: 0,
				///临时存储list
				contentList: [{}, {}, {}, {}, {}, {}],
				headerList: [],
				current: 0,
				serviceNameList: [],
				servicePersonList: [],
				shopList: [],
				tempList: [],
				lastServerType: -1,
				status: 'loadmore',
				showLoadMore: true,
			}
		},
		onReachBottom() {
			this.status = 'loading'
			// this.currentPage ++
			this.headerList[this.currentIndex].pageNum++;
			
			this.getChannelContentList(this.currentIndex)
		},
		onLoad(options) {
			this.getserviceNameList();
			var item = JSON.parse(options.item)

			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,
					categoryId: item.categoryId,
					pageNum: 0,
					childList: []
				})
				this.headerList.forEach((e) => {
					e.pageNum = 0
				})
				this.currentIndex = item.selectIndex + 1
				this.headerTittle = item.categoryName
				this.getChannelContentList(this.currentIndex)
			}
		},

		methods: {
			///回退页面
			navigateBack() {
				uni.navigateBack();
			},
			gotoSearch() {
				uni.navigateTo({
					url: '../../index/search'
				})
			},
			selectHeadClick(index) {
				this.currentIndex = index
				if (this.canLoadData){
					this.getChannelContentList(this.currentIndex)
				}
				
			},
			getChannelContentList(index) {
				var item = this.headerList[index];
				if (this.current == 0) {
					var param = {
						"pageNum": item.pageNum,
						"pageSize": 10,
						"parentId": item.parentId, //分类id父id
						"cateId": item.categoryId,
						"bizType": 1, //业务类型（1：家政；2：维修）
					}
					var that = this
					this.$u.api.chanelCrewList(param).then(res => {
						
						if (res.code == 200) {
							if (that.lastServerType == that.current) {

							} else {
								that.headerList[index].childList = []
							}
							that.lastServerType = that.current
							that.headerList[index].childList = that.headerList[index].childList.concat(res.rows)
							that.$forceUpdate()

						}
					}).catch(error => {

					})
				}
				if (this.current == 1) {
					var param = {
						"pageNum": item.pageNum,
						"pageSize": 10,
						"parentId": item.parentId, //分类id父id
						"cateId": item.categoryId,
						"bizType": 1, //业务类型（1：家政；2：维修）
					}
					console.log(param)
					var that = this
					this.$u.api.chanelCrewList(param).then(res => {
						console.log('获取服务数据')
						console.log(res)
						if (res.code == 200) {

							if (that.lastServerType == that.current) {

							} else {
								that.headerList[index].childList = []
							}
							that.lastServerType = that.current
							that.headerList[index].childList = that.headerList[index].childList.concat(res.rows)
							that.$forceUpdate()

						}
					}).catch(error => {

					})
				}

			},
			///获取list
			getserviceNameList() {
				this.serviceNameList = [{
						name: '服务人员'
					},
					{
						name: '商家'
					},
				];
			},
			///点击tab转换index
			change(index) {
				this.current = index;
				if (this.canLoadData) {
					this.getChannelContentList(this.currentIndex)
				}

			}
		},
	}
</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;
		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;
		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 {
		padding-left: 10rpx;
		padding-right: 10rpx;
		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;
	}

	.content_comment {
		border-radius: 8rpx;
		border: 1rpx solid #FF9999;
		color: #FF1414;
		font-size: 22rpx;
		padding-left: 10rpx;
		padding-right: 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;
	}
</style>
