<template>
	<view class="headlth">
		<!-- Swiper Section -->
		<view class="swiper">
			<swiper :autoplay="true" :interval="3000" :duration="500">
				<swiper-item>
					<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_img.png" mode="widthFix" />
				</swiper-item>
			</swiper>
		</view>

		<!-- Tab List -->
		<view class="tabList">
			<view class="tabItem" v-for="(item, index) in tabList" :key="index" @tap="jump(item.url)">
				<view class="tabImg">
					<image :src="item.img" mode="heightFix" />
				</view>
				<view class="tabName">
					{{item.name}}
				</view>
			</view>
		</view>

		<view class="gray"></view>

		<!-- Hot Services -->
		<view class="tit">
			热门服务
		</view>

		<view class="serviceTag">
			<view class="serviceTagItem" v-for="(service, idx) in healthServices" :key="idx">
				<view class="serviceTagItem_name">{{service.name}}</view>
				<view class="serviceTagItem_msg">{{service.value}}</view>
				<view :class="'serviceTagItem_img' + (idx+1)">
					<image :src="service.icon" mode="widthFix" />
				</view>
			</view>
		</view>

		<view class="gray"></view>

		<!-- Tabs -->
		<view class="tabs">
			<view class="tab" :class="{active: tabIndex == 0}" @tap="changeTab(0)">服务列表</view>
			<view class="tab" :class="{active: tabIndex == 1}" @tap="changeTab(1)">商户列表</view>
		</view>

		<!-- Service List -->
		<view class="list_item" v-if="tabIndex == 0" v-for="(item, index) in serverList" :key="index">
			<view class="item_tit">
				<view class="item_tit_left">{{item.cate_name}}</view>
				<view class="item_tit_right" @tap="ServerMore(item.cate_id)">
					更多
					<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/water_filter/filter_more.png"
						mode="widthFix" />
				</view>
			</view>
			<view class="item_goodsList">
				<view class="item_goodsItem" v-for="(items, subIndex) in item.appoints" :key="subIndex"
					@tap="ServerDesc(items.appoint_id)">
					<view class="item_goodsItem_tit">
						<image :src="items.photo" mode="aspectFill" />
					</view>
					<view class="item_goodsItem_name">{{items.title}}</view>
					<view class="item_goodsItem_msg">
						￥
						<view>{{items.price}}</view>
						<text>/{{items.unit}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- Merchant List -->
		<view class="merchantList" v-if="tabIndex == 1">
			<view class="merchantItem" v-for="(item, index) in 4" :key="index">
				<view class="merchantItem_left">
					<view class="merchantItem_left_img">
						<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/gropBuy/goods.png" mode="widthFix" />
					</view>
					<view class="merchantItem_left_msg">
						<view class="merchantItem_left_msg_tit">永训医疗</view>
						<view class="merchantItem_left_msg_add">衡阳市石鼓区中山北路1号</view>
						<view class="merchantItem_left_msg_msg">中国领先的高科技医疗设备研...</view>
						<view class="merchantItem_left_msg_tag">健康 卫生 先进</view>
					</view>
				</view>
				<view class="merchantItem_right">
					电话询价
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
						name: "快速建档",
						img: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_icon1.png',
						url: "../express/express",
					},
					{
						name: "健康自测",
						img: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_icon2.png',
						url: "../SelfTest/SelfTest",
					},
					{
						name: "健康管理",
						img: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_icon3.png',
						url: "",
					},
					{
						name: "上门服务",
						img: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_icon4.png',
						url: "/packages/doorToDoor/pages/doorToDoor/doorToDoor",
					},
					{
						name: "自检报告",
						img: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_icon5.png',
						url: "../report/report",
					},
					{
						name: "健康饮食",
						img: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_icon6.png',
						url: "../food/food",
					},
					{
						name: "健康运动",
						img: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_icon7.png',
						url: "../sports/sports",
					},
					{
						name: "社区商城",
						img: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_icon8.png',
						url: "",
					},
				],
				healthServices: [{
						name: '体温',
						value: '37°C',
						icon: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_icon_1.png'
					},
					{
						name: '血压',
						value: '37mmHg',
						icon: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_icon_2.png'
					},
					{
						name: '血糖',
						value: '37mmol/L',
						icon: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_icon_3.png'
					},
					{
						name: '心率',
						value: '37次/分',
						icon: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/health_icon_4.png'
					}
				],
				tabIndex: 0,
			   serverList:[
			      {
			        cate_name: '家政保洁',
			        appoints: [
			          {
			            appoint_id: 1,
			            photo: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/Mask_group_1.png',
			            title: '上门抽血',
			            price: 45,
			            unit: '次',
			          },
			          {
			            appoint_id: 2,
			            photo: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/Mask_group_2.png',
			            title: '上门肌注',
			            price: 65,
			            unit: '次',
			          },
			          {
			            appoint_id: 3,
			            photo: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/Mask_group_3.png',
			            title: '脐带护理',
			            price: 95,
			            unit: '次',
			          }
			        ]
			      },
			      {
			        cate_name: '健康养生',
			        appoints: [
			          {
			            appoint_id: 1,
			            photo: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/Mask_group_4.png',
			            title: '体质养生',
			            price: 45,
			            unit: '张',
			          },
			          {
			            appoint_id: 2,
			            photo: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/Mask_group_5.png',
			            title: '四季养生',
			            price: 300,
			            unit: '套',
			          },
			          {
			            appoint_id: 3,
			            photo: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/Mask_group_6.png',
			            title: '肝脾养生',
			            price: 451,
			            unit: '套',
			          }
			        ]
			      },
			      {
			        cate_name: '跑腿服务',
			        appoints: [
			          {
			            appoint_id: 1,
			            photo: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/Mask_group_7.png',
			            title: '同城快递',
			            price: 45,
			            unit: '件',
			          },
			          {
			            appoint_id: 2,
			            photo: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/Mask_group_8.png',
			            title: '快递代取',
			            price: 300,
			            unit: '件',
			          },
			          {
			            appoint_id: 3,
			            photo: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/Mask_group_9.png',
			            title: '外卖代取',
			            price: 451,
			            unit: '件',
			          }
			        ]
			      },
			      {
			        cate_name: '设备配套',
			        appoints: [
			          {
			            appoint_id: 1,
			            photo: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/Mask_group_10.png',
			            title: '血糖计',
			            price: 45,
			            unit: '个',
			          },
			          {
			            appoint_id: 2,
			            photo: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/Mask_group_11.png',
			            title: '血压计',
			            price: 300,
			            unit: '个',
			          },
			          {
			            appoint_id: 3,
			            photo: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/health/Mask_group_12.png',
			            title: '尿酸检测仪',
			            price: 451,
			            unit: '个',
			          }
			        ]
			      }
			    ],//服务列表
			}
		},
		methods: {
			jump(url) {
				uni.navigateTo({
					url: url
				});
			},
			changeTab(index) {
				this.tabIndex = index;
			},
			ServerMore(cateId) {
				// Handle more click
				console.log('More clicked for category:', cateId);
			},
			ServerDesc(appointId) {
				// Handle service description click
				console.log('Service clicked:', appointId);
			}
		},
		onLoad() {
			// Load your data here
			// this.loadTabList();
			// this.loadServerList();
		}
	}
</script>

<style scoped>
	image {
		width: 100%;
		height: 100%;
	}

	.swiper {
		width: 710rpx;
		height: 300rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.swiper .swiper {
		width: 100%;
		height: 100%;
	}

	.swiper image {
		width: 100%;
		height: 100%;
	}

	.tabList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 40rpx;
	}

	.tabItem {
		display: flex;
		width: 25%;
		align-items: center;
		flex-direction: column;
		margin-bottom: 46rpx;
	}

	.tabImg {
		height: 54rpx;
	}

	.tabName {
		font-weight: 400;
		font-size: 26rpx;
		color: #222222;
	}

	.tit {
		font-weight: bold;
		font-size: 32rpx;
		color: #222222;
		margin-left: 20rpx;
		padding-top: 30rpx;
	}

	.serviceTag {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.serviceTagItem {
		width: 171rpx;
		height: 212rpx;
		background: linear-gradient(148deg, #FFF3EF 0%, #FFD0C0 100%);
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;
		padding-left: 28rpx;
		padding-top: 37rpx;
		position: relative;
	}

	.serviceTagItem_name {
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
	}

	.serviceTagItem_msg {
		margin-top: 76rpx;
		margin-left: 0rpx;
		z-index: 2;
		position: relative;
	}

	.serviceTagItem_img1 {
		width: 70rpx;
		height: 105rpx;
		position: absolute;
		bottom: 5rpx;
		right: 8rpx;
	}

	.serviceTagItem_img2 {
		width: 68.89rpx;
		height: 87.54rpx;
		position: absolute;
		bottom: 15rpx;
		right: 6rpx;
	}

	.serviceTagItem_img3 {
		height: 79rpx;
		width: 71rpx;
		position: absolute;
		bottom: 18rpx;
		right: 7rpx;
	}

	.serviceTagItem_img4 {
		width: 70rpx;
		height: 105rpx;
		position: absolute;
		bottom: 5rpx;
		right: 8rpx;
	}

	.tabs {
		display: flex;
		align-items: center;
		margin-left: 20rpx;
		padding-top: 30rpx;
	}

	.tabs .tab {
		font-weight: 400;
		font-size: 28rpx;
		color: #555555;
		margin-right: 70rpx;
	}

	.tabs .active {
		font-weight: bold;
		font-size: 32rpx;
		position: relative;
	}

	.tabs .active::after {
		content: '';
		width: 127rpx;
		height: 10rpx;
		background: #FF512A;
		position: absolute;
		left: 50%;
		bottom: -10rpx;
		transform: translateX(-50%);
	}

	.tabs .active::before {
		width: 127rpx;
		height: 10rpx;
		filter: blur(6.599999904632568rpx);
		background: #FF5D73;
		position: absolute;
		left: 50%;
		bottom: -10rpx;
		transform: translateX(-50%);
	}

	.list {
		margin-top: 36rpx;
	}

	.item_tit {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 20rpx;
		margin-bottom: 32rpx;
		margin-top: 30rpx;
	}

	.item_tit_left {
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
	}

	.item_tit_right {
		font-weight: 400;
		font-size: 24rpx;
		color: #D5AC66;
		display: flex;
		align-items: center;

	}

	.item_tit_right image {
		width: 12rpx;
		height: 22rpx;
		margin-left: 8rpx;
	}

	.item_goodsItem_tit {
		width: 223rpx;
		height: 161rpx;
	}

	.item_goodsItem_name {
		font-weight: 400;
		font-size: 26rpx;
		color: #222222;
		margin-top: 20rpx;
		margin-left: 10rpx;
	}

	.item_goodsItem_msg {
		font-weight: 400;
		font-size: 22rpx;
		color: #FF512A;
		display: flex;
		align-items: flex-end;
		margin-top: 6rpx;
		margin-left: 13rpx;
	}

	.item_goodsItem_msg view {
		font-weight: 500;
		font-size: 36rpx;
	}

	.item_goodsItem_msg text {
		font-size: 22rpx;
		color: #FF512A;
	}

	.item_goodsList {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
	}

	.list_item {
		padding-bottom: 32rpx;
		border-bottom: 1rpx solid #E6E6E6;
	}




	.merchantList {
		margin: 0 20rpx;
		margin-top: 30rpx;
	}

	.merchantItem {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #E6E6E6;
		box-sizing: border-box;
	}

	.merchantItem_right {
		font-weight: 400;
		font-size: 26rpx;
		color: #FFFFFF;
		width: 150rpx;
		height: 50rpx;
		background: #D5AC66;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.merchantItem_left {
		display: flex;
		align-items: center;
	}

	.merchantItem_left_img {
		width: 180rpx;
		height: 180rpx;
		border-radius: 20rpx;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.merchantItem_left_msg_tit {
		font-weight: 400;
		font-size: 32rpx;
		color: #000000;
	}

	.merchantItem_left_msg_add {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		margin-top: 14rpx;
	}

	.merchantItem_left_msg_msg {
		font-weight: 400;
		font-size: 22rpx;
		color: #FF512A;
		background: #FFF0ED;
		padding: 2rpx;
		margin-top: 16rpx;
	}

	.merchantItem_left_msg_tag {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		margin-top: 18rpx;
	}
</style>