<template>
	<!-- backBtn+logoutBtn 开启顶部两个按钮 -->
	<Container backBtn logoutBtn @handleBack="goBack">
		<template #main>
			<view class="wrap">
				<view class="list-card">
					<view class="item" v-for="(item,idx) in businessList" :key="idx">
						<view class="left">
							<text class="dot">◆</text>
							<text class="title-text">{{ item.name }}</text>
						</view>
						<view class="btn-box">
							<view class="btn-guide" @click="openGuide(item)">办事指南</view>
							<view class="btn-take" @click="toTakeNum(item)">取号</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</Container>
</template>

<script>
	import Container from '@/components/container/container.vue'
	export default {
		components: {
			Container
		},
		data() {
			return {
				businessList: [{
						name: '个人社保参保证明查询打印'
					},
					{
						name: '城镇职工基本养老保险关系转移接续申请'
					},
					{
						name: '住房公积金个人住房贷款购房"一件事"'
					},
					{
						name: '租赁非公共租赁住房提取'
					},
					{
						name: '租赁公共租赁住房提取'
					},
					{
						name: '住房档案变更（房屋坐落变更）'
					},
				]
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},

			// 点击取号：跳转刷身份证页面
			toTakeNum(row) {
				uni.showToast({
					title: '取号成功',
					icon: 'none'
				})
			},
			// 办事指南（可弹窗/新页面）
			openGuide(item) {
				uni.navigateTo({
					url: `/pages/home/guide?theme=${item}`
				})
			}
		}
	}
</script>

<style scoped>
	.wrap {
		width: 100%;
		height: 100%;
		padding: 200px 60px 150px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}

	.list-card {
		width: 100%;
		height: 740px;
		background: #fff;
		border-radius: 60px;
		padding: 30px 80px;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px;
		border-bottom: 1px solid rgba(188, 200, 209, 1);
	}

	.item:first-child {
		padding-top: 0;
	}

	.item:last-child {
		padding-bottom: 0;
		border-bottom: none;
	}

	.left {
		display: flex;
		align-items: flex-start;
		width: 68%;
	}

	.dot {
		color: #3688ff;
		font-size: 30px;
		margin-right: 20px;
	}

	.title-text {
		font-size: 30px;
		color: rgba(51, 51, 51, 1);
		line-height: 1.5;
	}

	.btn-box {
		display: flex;
		gap: 20px;
	}

	.btn-guide {
		background: #28c068;
		color: #fff;
		font-size: 30px;
		padding: 1.2vh 3vw;
		border-radius: 99px;
	}

	.btn-take {
		background: #367bfa;
		color: #fff;
		font-size: 30px;
		padding: 1.2vh 3vw;
		border-radius: 99px;
	}
</style>