<template>
	<view class="container">
		<view class="back-btn" @click="backToBefore()">
			<u-icon name="arrow-left" color="#fff" size="20" customStyle="margin:0 auto"></u-icon>

			<text class="back-text">项目查看</text>
		</view>

		<view class="main">
			<view class="item" v-for="item in itemList" :key="item.name" @click="goToPage(item.url)">
				<view class="item-name">{{item.name}}</view>

				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	import {
		onLoad
	} from "@dcloudio/uni-app"

	function backToBefore() {
		uni.navigateBack({})
	};
	let itemList = ref([{
		name: '基本信息',
		url: '/pages/overdue/baseInfo/index'
	}, {
		name: '资金来源',
		url: '/pages/overdue/fundsSource/index'
	}, {
		name: '施工阶段计划',
		url: '/pages/overdue/constructionStep/index'
	}, {
		name: '核准备案资料',
		url: '/pages/overdue/recordData/index'
	}, {
		name: '项目开工资料',
		url: '/pages/overdue/startData/index'
	}])

	let id = ref(null)

	function goToPage(url) {
		uni.navigateTo({
			url: `${url}?id=${id.value}`
		})
	}

	onLoad((option) => {
		id.value = option.id
	})
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: #EAF0FA;
	}

	.container {
		position: relative;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, #1869F6 0%, #EAF0FA 64%, #EAF0FA 100%);

		.back-btn {
			position: absolute;
			top: 8%;
			left: 4%;
			display: flex;
			font-size: 40rpx;
			font-weight: 500;
			color: #FFF;

			.back-text {
				margin-left: 28rpx;
			}
		}
	}

	.main {
		position: absolute;
		top: 14%;
		left: 4%;
		width: 92%;
		height: 635rpx;
		padding: 0 40rpx;
		background-color: #fff;
		border-radius: 40rpx;
		overflow: hidden;
	}

	.item {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 20%;
		box-sizing: border-box;
		border-bottom: 2rpx solid #EAF0FA;

		.item-name {
			display: flex;
			flex-direction: column;
			justify-content: center;
			font-size: 32rpx;
			color: #343437;
		}
	}
</style>