<template>
	<view class="notaic">
		<u-navbar back-icon-color='#fff' :background="{ background: '#409eff'}" back-text="" title-color='#fff'
			title="系统消息">
			<template v-slot:right>
				<view class="clear">清除未读</view>
			</template>
		</u-navbar>
		<view class="tab">
			<view class="tab-box">
				<view class="tab-item" :class="tabIndex == 0 ? 'active' : ''" @click="tab(0)">
					全部
				</view>
				<view class="tab-item" :class="tabIndex == 1 ? 'active' : ''" @click="tab(1)">
					已读
				</view>
				<view class="tab-item" :class="tabIndex == 2 ? 'active' : ''" @click="tab(2)">
					未读
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item">
				<view class="time">
					<view class="red"></view>
					<view class="text">2024-12-12 08:00:00</view>
					<u-icon name="arrow-right" color="#c1c1c1" size="28"></u-icon>
				</view>
				<view class="dec">
					您有一个保养任务，请及时处理。
				</view>
				<view class="type">
					消息类型 <span>保养任务</span>
				</view>
				<view class="type">
					任务时间 <span>2023-06-02 09:00~2023-06-02 09:00</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import storage from '@/utils/storage'

	export default {
		data() {
			return {
				tabIndex: 0
			}
		},

		methods: {
			tab(index) {
				this.tabIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.clear {
		color: white;
		padding-right: 20rpx
	}

	.tab {
		position: fixed;
		width: 100%;
		background: white;
		padding: 20rpx 30rpx;
	}

	.tab-box {
		border-radius: 16rpx;
		border: 1px solid #409eff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		overflow: hidden;

		.tab-item {
			flex: 1;
			border-right: 1px solid #409eff;
			color: #409eff;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;

			&:nth-last-child(1) {
				border: none;
			}
		}

		.active {
			background: #409eff;
			color: white;
		}
	}
	.list{
		padding: 140rpx 30rpx 20rpx ;
		.item{
			background: white;
			border-radius: 16rpx;
			.time{
				display: flex;
				padding: 20rpx 30rpx;
				border-bottom: 1px solid #e4e4e4;
				position: relative;
				.red{
					position: absolute;
					left: 16rpx;
					top: 50%;
					width: 6rpx;
					height: 6rpx;
					background: red;
					border-radius: 50%;
					margin-top: -3rpx;
				}
				.text{
					color: #717171;
					width: 0px;
					flex: 1;
				}
			}
			.dec{
				padding: 30rpx;
			}
			.type{
				padding:0px 30rpx 20rpx;
				color: #888888;
				span{
					color: #000;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>