<template>

	<view>

		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>



		<view class="service-container">

			<view style="width:100%; position: relative;height: 290rpx;">
				<image src="/static/bg.png" mode="heightFix"
					style="overflow:hidden;height: 290rpx;border-radius: 15rpx;"></image>
				<text style="position: absolute;
		              top: 50%;
		              left: 50%;
		              transform: translate(-50%, -50%);
		              color: #fff; display: block;
		              font-size: 48rpx; 
					  font-weight: bold;
		              white-space: nowrap;text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);">一件事 快速响应</text>
			</view>

			<!-- 主内容区 -->
			<view class="service-main">
				<!-- 服务分类区块 -->
				<view v-for="(section, index) in list" :key="index" class="service-section">
					<!-- 分类标题 -->
					<view class="section-header">
						<image class="section-icon" :src="section.img" mode="aspectFit" />
						<text class="section-title">{{ section.name }}</text>
					</view>

					<!-- 服务项目网格 -->
					<view class="service-grid">
						<view v-for="(item, idx) in section.list" :key="idx" class="service-card"
							@click="navigateToService(item)" :class="index % 2 === 0 ? 'bg1' : 'bg2'">
							<text class="service-name">{{ item.name }} </text>
							<image class="service-icon" :src="item.icon" mode="aspectFit" />
						</view>
					</view>
				</view>

			</view>

			<!-- 页脚信息 -->
			<view class="service-footer">
				<text class="footer-text">本服务由重庆火车北站地区综合管理局提供</text>
				<text class="footer-contacts">
					服务咨询热线:
					<text class="hotline" @click="callPhoneNumber">023-63051362</text>
				</text>
			</view>
		</view>




	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: "帮扶",
						img: "/static/img_t/axbf.svg",
						list: [{
								name: '寻人服务',
								type_code: 'xrfw',
								url: '/pages/index/xwqs',
								icon: '/static/img_t/xrfw.svg'
							}, {
								name: '寻物登记',
								type_code: 'xwqs',
								url: '/pages/index/xwqs',
								icon: '/static/img_t/swzl.svg'
							},
							{
								name: '母婴服务',
								type_code: 'myfw',
								url: '/pages/index/myfw',
								icon: '/static/img_t/myfw.svg'
							},
							// {
							// 	name: '临时医疗服务',
							// 	type_code: 'lsyljz',
							// 	url: '',
							// 	icon: '/static/img_t/lsyl.svg'
							// },
							// {
							// 	name: '人员摔倒',
							// 	type_code: 'rysdcl',
							// 	url: '',
							// 	icon: '/static/img_t/rysd.svg'
							// },
							{
								name: '老弱病残帮扶',
								type_code: 'lrbcybf',
								url: '',
								icon: '/static/img_t/bf.svg'
							},
							// {
							// 	name: '接送站服务',
							// 	type_code: 'tslksjzfw',
							// 	url: '',
							// 	icon: '/static/img_t/jsfw.svg'
							// },
							// {
							// 	name: '咨询服务',
							// 	type_code: 'zlzxqj',
							// 	url: '',
							// 	icon: '/static/img_t/zxfw.svg'
							// },
							// {
							// 	name: '志愿者服务',
							// 	type_code: 'zyzfw',
							// 	url: '/pages/index/myfw',
							// 	icon: '/static/img_t/zyzfw.svg'
							// },
						]
					},
					// {
					// 	name:"救助",
					// 	img:"/static/img_t/jz.svg",
					// 	list:[{
					// 		name: '困难救助',
					// 		type_code: 'knlkjz',
					// 		url: '',
					// 		icon: '/static/img_t/knjz.svg'
					// 	},
					// 	{
					// 		name: '流浪乞讨人员救助',
					// 		type_code: 'llqtryjz',
					// 		url: '',
					// 		icon: '/static/img_t/llqtryjz.svg'
					// 	},]
					// },
					{
						name: "问题反馈",
						img: "/static/img/fkgl.svg",
						list: [
							// {
							// 	name: '设施设备异常',
							// 	type_code: 'zqsssbwx',
							// 	url: '',
							// 	icon: '/static/img_t/sssbyc.svg'
							// },
							// {
							// 	name: '化粪池气体泄漏',
							// 	type_code: 'zqsssbwx',
							// 	url: '',
							// 	icon: '/static/img_t/hfcqtxl.svg'
							// },
							// {
							// 	name: '标识牌倾斜',
							// 	type_code: 'zqsssbwx',
							// 	url: '',
							// 	icon: '/static/img_t/bspqx.svg'
							// },
							// {
							// 	name: '商业投诉',
							// 	type_code: 'zqts',
							// 	url: '',
							// 	icon: '/static/img/syts.svg'
							// },
							{
								name: '投诉建议',
								type_code: 'zqts',
								url: '',
								icon: '/static/img/lkts.svg'
							}
						]
					},
					// {
					// 	name:"应急服务",
					// 	img:"/static/img_t/yjfw.svg",
					// 	list:[{
					// 		name: '人员意外伤亡',
					// 		type_code: 'ryywswnew',
					// 		url: '',
					// 		icon: '/static/img_t/ryywsw.svg'
					// 	}]
					// }
				]
			}
		},
		onLoad() {
			// uni.request({
			// 	url:'/myapi',
			// 	// url: 'https://lk.cqbzzgj.cn/api/Index/apppost', //仅为示例，并非真实接口地址。
			// 	data: {
			// 		"action": 'Home/integrateAddVisitorCount',
			// 	},
			// 	method: "POST",
			// 	success: (res) => {
			
			// 	}
			// });
		},

		methods: {
			navigateToService(itme) {
				var url = ''
				// if(itme.url == ''){
				url = '/pages/index/post?code=' + itme.type_code + '&name=' + itme.name
				// }else{
				// 	url = itme.url+'?code='+itme.type_code+'&name='+itme.name
				// }

				uni.navigateTo({
					url: url
				})
			},
			callPhoneNumber() {
				uni.makePhoneCall({
					phoneNumber: '023-63051362',
					success: () => {},
					fail: () => {}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	/* 容器样式 */
	.service-container {
		background: #fff;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	/* 主内容区 */
	.service-main {
		flex: 1;
		padding: 24rpx 20rpx;
		overflow-y: auto;
	}

	/* 服务分类区块 */
	.service-section {
		border-radius: 16rpx;
		padding: 32rpx;
	}

	/* 分类标题 */
	.section-header {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;

		.section-icon {
			width: 36rpx;
			height: 36px;
			margin-right: 16rpx;
		}

		.section-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #333;
		}
	}

	/* 服务项目网格 */
	.service-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24rpx;
	}
	
	.bg1{
		background: rgba(254,164,0,0.1);
	}
	.bg2{
		background:   rgba(87,191,254,0.1);
	}

	/* 单个服务卡片 */
	.service-card {
		border-radius: 20rpx;
		padding: 28rpx;
		display: flex;
		align-items: flex-start;
		transition: all 0.2s ease;
		height: 100rpx;
		justify-content: space-between;

		&:active {
			transform: scale(0.98);
			background: #eee;
		}

		.service-icon {
			width: 72rpx;
			height: 100%;
		}

		.service-name {
			font-size: 36rpx;
			color: #333;
			line-height: 1.4;
			// max-width: 160rpx;
			display: block;
		}
	}

	/* 页脚样式 */
	.service-footer {
		padding: 32rpx;
		// background: #fff;
		text-align: center;
		border-top: 1rpx solid #eee;

		.footer-text {
			font-size: 24rpx;
			color: #B3B5B9;
			display: block;
			margin-bottom: 16rpx;
		}

		.footer-contacts {
			font-size: 24rpx;
			color: #B3B5B9;
			text-align: center;
		}

		.hotline {
			color: #1E92F0;
			font-size: 24rpx;
			font-weight: 500;
		}
	}
</style>