<template>
	<view class="content">

		<view style="margin-left: 25rpx;margin-right: 25rpx;">
			<view style="margin-top: 40rpx;" class="flex align-center">
				<u-image width="32rpx" height="32rpx" src="../../static/home_address_icon.png"></u-image>
				<text class="address_text" style="margin-left: 5rpx;">{{address}}</text>
			</view>
			<view class="flex align-center justify-between search_main" @click="gotoSearch">

				<view class="flex align-center">
					<u-image style="margin-left: 34rpx;" width="34rpx" height="34rpx"
						src="../../static/home_search_icon.png"></u-image>
					<text class="search_text">油烟机清洗</text>
				</view>

				<view class="search_button">搜索</view>

				<!-- <u-search @click="gotoSearch" bg-color="#ffffff" :disabled="true"  :show-action="false"></u-search> -->
			</view>
			<view class="wrap ">
				<u-swiper mode="dot" style="border-radius: 10rpx; " :list="list"></u-swiper>
			</view>
			<view style="border-radius: 20rpx; overflow: hidden; margin-top: 20rpx;background-color: #FFFFFF;">

				<u-grid :col="4">
					<u-grid-item v-for="(item,index) in categoryList" :key='index' style="padding-bottom: 0rpx;">
						<image :src="item.icon" style="width: 100rpx;height: 100rpx; border-radius: 100rpx;"></image>
						<view class="grid-text">{{item.categoryName}}</view>
					</u-grid-item>
				</u-grid>
			</view>


		</view>

		<view style="padding-top: 20rpx;">
			<view style="margin-left: 25rpx;margin-right: 25rpx;padding-top: 40rpx;padding-bottom: 20rpx;"
				class="flex align-center justify-between">
				<text class="server_title">热门服务</text>
				<view class="flex align-center">
					<view :class="{'selected_server_type':serverType ==0,'unselected_server_type':serverType ==1}"
						@click="selectServer(0)">
						服务人员
					</view>
					<view style="margin-left: 18rpx;"
						:class="{'selected_server_type':serverType ==1,'unselected_server_type':serverType ==0}"
						@click="selectServer(1)">
						商家
					</view>
				</view>
			</view>


			<view>
				<u-tabs-swiper active-color="#FC6035" inactive-color="#111111" ref="uTabs" bg-color="transparent"
					:list="categoryList" :is-scroll="true" :current="tabCurrent" swiperWidth="750" name="categoryName"
					@change="tabChange">
				</u-tabs-swiper>
			</view>

			<view>
				<swiper style="height: calc(100vh - 100rpx);" :current="swiperCurrent" @transition="transition"
					@animationfinish="animationfinish">
					<swiper-item class="swiper-item" v-for="(item, index) in categoryList" :key="index">
						<scroll-view scroll-y style="height: calc(100vh - 100rpx)">

							<view @click="gotoDetails(contentItem)" v-for="(contentItem,index1) in item.childList"
								:key="index1" 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;width: ;" class="flex align-center">
										<view class="age_tag">{{contentItem.serverAge}}年工龄</view>
										<view class="content_comment">好评率{{contentItem.rate}}%</view>
									</view>
									<view 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 style="margin-top: 20rpx;">
										<text style="font-size: 22rpx;color: #999999;"
											class="wb_hide_2">{{contentItem.merchantName}}</text>
									</view>
								</view>

							</view>

						</scroll-view>

					</swiper-item>
				</swiper>
			</view>

		</view>




	</view>
</template>

<script>
	export default {
		data() {
			return {
				address: "用户定位位置",
				title: 'Hello',
				tabCurrent: 0,
				swiperCurrent: 0,
				serverType: 0, // 0服务人员 1商家
				lastServerType: -1,
				categoryList: [],
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				contentList: [{}, {}, {}, {}, {}, {}, {}],
				templocation: {
					latitude: '',
					longitude: ''
				}
			}
		},
		onLoad() {
			this.getAddressLocation()
			this.getCaregoryList()
		},
		methods: {

			getCaregoryList() {
				this.$u.api.categoryHomeList({
					bizType: '1'
				}).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.categoryList = res.data;
						this.categoryList.forEach(function(element) {
							element.childList = []
							element.pageNum = 1
						});
						this.getChannelContentList(0);
					}
				}).catch(error => {
					console.log(error)
				})
			},

			getChannelContentList(index) {
				console.log(index)
				var item = this.categoryList[index];
				if (this.serverType == 0) {
					var param = {
						"pageNum": item.pageNum,
						"pageSize": 10,
						"parentId": 24, //分类id父id
						"cateId": 25,
						// "parentId": this.categoryList[0].categoryId, //分类id父id
						// "cateId": this.categoryList[0].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.serverType) {

							} else {
								that.categoryList[index].childList = []
							}
							that.lastServerType = that.serverType
							that.categoryList[index].childList = that.categoryList[index].childList.concat(res
								.rows)
							that.$forceUpdate()
						}
					}).catch(error => {

					})
				}
				if (this.serverType == 1) {
					var param = {
						"pageNum": item.pageNum,
						"pageSize": 10,
						"parentId": 24, //分类id父id
						"cateId": 25,
						// "parentId": this.categoryList[0].categoryId, //分类id父id
						// "cateId": this.categoryList[0].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) {
							that.categoryList[index].childList = that.categoryList[index].childList.concat(res
								.rows)
							if (that.lastServerType == that.serverType) {

							} else {
								that.categoryList[index].childList = []
							}
							that.lastServerType = that.serverType

							that.$forceUpdate()

						}
					}).catch(error => {

					})
				}

			},



			// 查询地点信息
			getLocal(latitude, longitude) {
				let key = '7f8e649905d1702349bad73ef3fdb581'
				uni.request({
					method: 'GET',
					url: 'https://restapi.amap.com/v3/geocode/regeo',
					data: {
						key: key,
						location: `${longitude},${latitude}`,
						extensions: 'all'
					},
					success: res => {
						const address = res.data.regeocode.addressComponent.township + res.data.regeocode
							.addressComponent.streetNumber.street + res.data.regeocode.addressComponent
							.streetNumber.number
						console.log('高德地图API接口返回信息', res, address)

					},
					fail: res => {
						console.log();
					}
				})


			},
			getAddressLocation() {
				const that = this
				uni.getLocation({
					geocode: true,
					type: 'gcj02',
					success: function(res) {
						console.log(res, 'getAddressLocation')
						that.getLocal(res.latitude, res.longitude)
					},

				})
			},
			onJump() {
				uni.navigateTo({
					url: '../codelogin/codelogin'
				})
			},
			tabChange(index) {
				this.tabCurrent = index;
				this.swiperCurrent = index
				if (this.categoryList[index].childList == undefined || this.categoryList[index].childList.length == 0) {
					this.getChannelContentList(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.swiperCurrent = current;
				this.current = current;
				if (this.categoryList[current].childList == undefined || this.categoryList[current].childList.length ==
					0) {
					this.getChannelContentList(current)
				}
			},

			gotoSearch() {
				uni.navigateTo({
					url: './search',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			selectServer(index) {
				this.serverType = index
				this.getChannelContentList(this.swiperCurrent)

			},
			onreachBottom() {},
			gotoDetails(obj) {
				console.log(obj)
				if (this.serverType == 0) {
					uni.navigateTo({
						url: './personDetails?goodsId='+obj.goodsId+'&bizType=1'
					})
				} else {
					uni.navigateTo({
						url: './shopDetails?goodId='+obj.goodsId+'&bizType=2'
					})
				}

			},
		}
	}
</script>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	.address_text {
		font-size: 33rpx;
		font-weight: bold;
		color: #111111;
	}

	.search_main {
		margin-top: 20rpx;
		height: 68rpx;
		border-radius: 100rpx;
		background-color: #FFFFFF;
		border: 1rpx solid #FC6035;
	}

	.search_button {
		margin-right: 5rpx;
		background-color: #FC6035;
		color: #FFFFFF;
		font-size: 30rpx;
		padding-top: 6rpx;
		padding-bottom: 6rpx;
		padding-left: 21rpx;
		padding-right: 21rpx;
		border-radius: 50rpx;
	}

	.search_text {
		font-size: 28rpx;
		color: #999999;
		margin-left: 13rpx;
	}

	.wrap {
		margin-top: 20rpx;
	}

	.grid-text {
		padding-top: 21rpx;
		font-size: 24rpx;
		color: #333333;
	}

	.server_title {
		font-size: 38rpx;
		font-weight: bold;
		color: #999999;
	}

	.selected_server_type {
		font-size: 26rpx;
		border: 1rpx solid #FC6035;
		color: #FC6035;
		padding-bottom: 6rpx;
		padding-top: 6rpx;
		padding-left: 21rpx;
		padding-right: 21rpx;
		border-radius: 50rpx;

	}

	.unselected_server_type {
		font-size: 26rpx;
		border: 1rpx solid #CCCCCC;
		color: #333333;
		padding-bottom: 6rpx;
		padding-top: 6rpx;
		padding-left: 21rpx;
		padding-right: 21rpx;
		border-radius: 50rpx;
	}

	.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: 4rpx 10rpx;
		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;
	}

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

	.content_text {
		font-size: 29rpx;
		color: #111111;
	}

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