<template>
	<view class="system-message">
		<u-tabs :list="menuList" bg-color="#F0F3FF" :is-scroll="false" v-model="currentMenu"
			@change="handleChangeMenu"></u-tabs>

		<view class="message-list">
			<view class="message-item" v-for="item in dataList">
				<view class="typeAndDate">
					<view> {{item.type}} </view>
					<view> {{item.createDate}} </view>
				</view>
				<view class="u-m-t-20">
					{{item.programName}}
				</view>
				<view class="u-m-t-20">
					<span class="u-m-r-10" style="color: #666;">项目公司</span>{{item.programCom}}
				</view>
				<view class="u-m-t-20 u-m-b-20">
					<span class="u-m-r-10" style="color: #666;">进度信息</span>{{item.process}}
				</view>
				<view class="btn">
					查看详情
				</view>
			</view>
		</view>

	</view>
</template>

<script lang="ts" setup>
	import { onMounted, ref } from 'vue';

	const menuList = [{
		name: '提醒'
	}, {
		name: '物流'
	}, {
		name: '订单',
	}, {
		name: '优惠',
	}, {
		name: '其他',
	}]
	const currentMenu = ref(0)
	const handleChangeMenu = (index) => {
		console.log("handleChangeMenu");
	}

	const dataList = ref([])

	const mockData = () => {
		for (var i = 0; i < 20; i++) {
			dataList.value.push({
				type: "项目通知",
				programName: "测试" + (i + 1),
				programCom: "项目公司" + (i + 1),
				process: "项目信息",
				createDate: "2025-09-" + (i + 1)
			})
		}
	}

	onMounted(() => {
		mockData()
	})
</script>

<style lang="scss" scoped>
	.system-message {
		width: 100%;
		height: 100%;
		background-color: #F0F3FF;

		.message-list {
			margin-top: 20rpx;
			padding: 0 40rpx 20rpx;

			.message-item {
				border-radius: 20rpx;
				padding: 20rpx;
				background: #DDE8FF;
				margin-bottom: 10rpx;

				font-family: Work Sans;
				font-weight: 400;
				font-size: 26rpx;
				leading-trim: NONE;
				line-height: 100%;
				letter-spacing: -2%;

				.typeAndDate {
					display: flex;
					justify-content: space-between;
				}

				.btn {
					display: inline;
					background: #7B99FF;
					border-radius: 8rpx;
					padding: 4rpx 20rpx;
					color: #002499;
				}
			}
		}
	}
</style>