<template>
	<view class="serveList">
		<view class="header-card positonFixed">
			<view class="header-top flex-row-center"
				:style="{ height: `${88}rpx`,paddingTop: `${statusBarHeight}rpx` }">
				<view class="left-area" @click="goBack">
					<image src="/static/images/whiteBack.png" mode="aspectFit" class="back-icon"></image>
					<image src="/static/images/icons/selfLogo.png" mode="aspectFit" class="left-area-img"></image>
				</view>
			</view>
			<searchBox placeholder="请搜索服务名称" v-model="queryData.title" @confirm="searchConfrim" @search="searchConfrim"
				:bg-clor="`transparent`" style="padding-top: 0;" />
			<view class="header-bottom">
				<view class="header-bottom-tip flex-row-center">
					<image src="/static/images/icons/diamond.png" class="header-bottom-tip-icon"></image>
					<text class="header-bottom-tip-text">平台自营，采销严选，官方售后，品质无忧</text>
					<view class="header-bottom-tip-btn flex-row-center-center" @click="goAgreement()">
						<text>加入我们</text>
						<image src="/static/images/icons/right7_13.png" class="header-bottom-tip-btn-icon">
						</image>
					</view>
				</view>
			</view>
		</view>
		<view class="serveList-content">
			<view class="header-card" style="visibility: hidden">
				<view class="header-top flex-row-center" :style="{ height: `${statusBarHeight + 88}rpx` }">
					<view class="left-area" @click="goBack">
						<image src="/static/images/whiteBack.png" mode="aspectFit" class="back-icon"></image>
						<image src="/static/images/icons/selfLogo.png" mode="aspectFit" class="left-area-img"></image>
					</view>
				</view>
				<searchBox placeholder="搜索手艺人名称" v-model="queryData.title" @confirm="searchConfrim"
					@search="searchConfrim" :bg-clor="`transparent`" />
				<!-- <view class="header-bottom">
						<view class="header-bottom-tip flex-row-center">
							<image src="/static/images/icons/diamond.png" class="header-bottom-tip-icon"></image>
							<text class="header-bottom-tip-text">平台自营，采销严选，官方售后，品质无忧</text>
							<view class="header-bottom-tip-btn flex-row-center-center">
								<text>加入我们</text>
								<image src="/static/images/icons/right7_13.png" class="header-bottom-tip-btn-icon">
								</image>
							</view>
						</view>
					</view> -->
			</view>



			<!-- <FilterPanel @filterConfirm="handleFilter"></FilterPanel> -->
			<CommonList ref="groupRef" :apiUrl="'/user/serversSelf/list'" :refresherEnabled="true"
				:listScrollHeight="`calc(100vh - ${statusBarHeight + 280}rpx)`" style="transform: translateY(60rpx);">
				<template #headerScroll>
					<!-- 二级icon分类 -->


					<view class="serveList-tabs">
						<serviecFirstTab :tabs="tabs" bgColor="transparent" :activeId="queryData.first_class"
							activeColor="#E8101E" @tab-click="tabClick">
						</serviecFirstTab>
						<view class="icon-tabs">
							<view v-for="(item, idx) in iconTabs" :key="item.id" class="icon-tab flex-row-center-center"
								:class="{active: queryData.second_class == item.id}" @click="getSecondlist(item.id)">
								<text class="icon-text">{{ item.title }}</text>
							</view>
						</view>
					</view>
				</template>
				<template #listData="{ list }">
					<selfCardList :goodsList="list" class="trans-y" @self-click="selfClick"></selfCardList>
				</template>

				<!-- 空数据状态 -->
				<template #empty>
					<noData class="trans-y"></noData>
				</template>
			</CommonList>
		</view>

	</view>
</template>

<script>
	import request from "@/utils/request";
	import searchBox from "@/pages/service/components/search-box.vue";
	import CommonList from "@/components/common/CommonList.vue";
	import serviecFirstTab from "@/components/common/service-first-tab.vue";
	import selfCardList from "./components/self-card-list.vue"
	export default {
		components: {
			searchBox,
			CommonList,
			serviecFirstTab,
			selfCardList
		},
		data() {
			return {
				queryData: {
					title: "",
					first_class: "",
					second_class: "",
				},
				statusBarHeight: 0,
				tabs: [],
				iconTabs: [],
			};
		},
		async onLoad(options) {
			let addressRes = uni.getStorageSync("userAdrees").addressRes || getApp().globalData.addressRes;
			this.queryData.province = addressRes.pcode
			this.queryData.city = addressRes.cCode
			// 获取状态栏高度
			const systemInfo = await uni.getSystemInfoSync()
			let screenWidth = systemInfo.screenWidth;
			this.statusBarHeight = this.pxToRpx(systemInfo.statusBarHeight, screenWidth);
			await this.getFirstClass();
			this.queryData.first_class = this.tabs[0].id
			await this.getIconTabs();
			this.queryData.second_class = this.iconTabs[0].id;
			this.search();
		},
		methods: {
			goAgreement() {
				//清空全局身份
				getApp().globalData.artisanType = "";
				uni.navigateTo({
					url: "/pages/selfOperated/agreement?title=平台自营项目介绍&type=18",
				});
			},
			search() {
				this.$refs.groupRef.manualRefresh(this.queryData);
			},
			async getFirstClass() {
				// 加载一级类目
				await request.post("/user/serversSelf/firstClass").then((res) => {
					if (res.code == 200) {
						this.tabs = res.data;
						// this.search();
					} else {
						uni.showToast({
							title: res.msg || "错误",
							icon: "none",
						});
					}

				}).catch(err => {
					console.error("err:", err);
				})
			},
			async getIconTabs() {
				// 加载二级类目
				await request.post('/user/serversSelf/secondClass', {
					id: this.queryData.first_class
				}).then((res) => {
					if (res.code == 200) {
						this.iconTabs = res.data;
					} else {
						uni.showToast({
							title: res.msg || "错误",
							icon: "none",
						});
					}
				}).catch(err => {
					console.error("err:", err);
				})
			},
			selfClick(e) {
				uni.navigateTo({
					url: `/pages/selfOperated/detail?id=${e.id}`,
				});
			},
			tabClick(id) {
				this.queryData.first_class = id;
				this.queryData.second_class = "";
				this.getIconTabs()
				this.search();
			},
			getSecondlist(id) {
				this.queryData.second_class = id;
				this.search();
			},
			goBack() {
				this.$emit('back')
				uni.navigateBack({
					delta: 1
				})
			},
			handleConfirm() {
				// 确定按钮逻辑
				this.closePopup();
			},
			searchConfrim(e) {
				this.search();
			},
		}
	}
</script>

<style lang="less">
	.serveList {
		.header-card {
			background-image: url("/static/images/background/headerBj2.png");
			background-position: top;
			background-repeat: no-repeat;
			background-size: cover;

			.header-top {
				height: 88rpx;
				padding: 0 24rpx;

				.left-area {
					display: flex;
					align-items: center;

					.back-icon {
						width: 36rpx;
						height: 36rpx;
					}

					.left-area-img {
						width: 144rpx;
						height: 52rpx;
						margin-left: 20rpx;
					}
				}
			}
		}

		.header-bottom {
			background-image: url("/static/images/background/headerBj2.png");
			background-position: bottom;
			background-repeat: no-repeat;
			background-size: cover;
			height: 145rpx;
			position: relative;

			.header-bottom-tip {
				position: absolute;
				top: 10rpx;
				left: 30rpx;

				.header-bottom-tip-icon {
					width: 25rpx;
					height: 23rpx;
				}

				.header-bottom-tip-text {
					margin-left: 7rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFF4F6;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
				}

				.header-bottom-tip-btn {
					margin-left: 30rpx;
					font-weight: 400;
					font-size: 20rpx;
					color: #FFF4F6;
					text-align: left;
					font-style: normal;
					height: 34rpx;
					border-radius: 17rpx;
					border: 1rpx solid rgba(255, 255, 255, 0.31);
					padding: 0 11rpx 0 14rpx;

					.header-bottom-tip-btn-icon {
						width: 7rpx;
						height: 13rpx;
						margin-left: 6rpx;
					}
				}
			}

		}

		.serveList-content {


			.trans-y {
				// transform: translateY(-85rpx);
			}

			.serveList-tabs {
				width: 100%;
				background: linear-gradient(180deg, #F9E2E3 0%, #FFFFFF 100%);
				border-radius: 20rpx 20rpx 0 0;
				// transform: translateY(-85rpx);
				padding-bottom: 24rpx;

				.service-first-tab {
					box-shadow: none;
				}

				.icon-tabs {
					margin-top: 24rpx;
					padding: 0 30rpx;
					display: flex;
					gap: 13rpx;

					.icon-tab {
						box-sizing: border-box;
						width: 168rpx;
						height: 56rpx;
						background: #F0F0F0;
						border-radius: 6rpx;

						.icon-text {
							font-weight: 400;
							font-size: 26rpx;
							color: #666666;
							text-align: center;
							font-style: normal;
						}
					}

					.active {
						background: rgba(252, 67, 124, 0.1);

						.icon-text {
							font-weight: 500;
							color: #E8101E;
						}
					}
				}
			}
		}
	}

	.positonFixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}

	//list样式
	.common-list {
		background-color: transparent !important;
		//border-radius: 10px 10px 0px 0px;
		padding-bottom: 0rpx;

		::v-deep .list-scroll {
			margin-top: 0rpx;
		}

		::v-deep .list-container {
			padding: 0rpx;
		}
	}
</style>