<template>
	<view class="view">
		<div class="content" v-for="(item,index) in list" :key="index">
			<div class="row" @click="toMessage(item.id)">
				<!-- <div class="left">
					<div v-if="item.type_name=='系统公告1'" class="iconBox"
						style="background: linear-gradient(141deg, #86D8F5 0%, #00B2F2 100%);">
						<image :src="$util.img(item.icon)" mode="" style="width: 44rpx;height: 44rpx;"></image>
					</div>
					<div v-if="item.type_name=='系统公告2'" class="iconBox"
						style="background: linear-gradient(141deg, #FFAC73 0%, #FE6E0B 100%);">
						<image :src="$util.img('/upload/weapp/user/ej.png')" mode=""
							style="width: 44rpx;height: 44rpx;"></image>
					</div>
				</div> -->
				<div class="center">
					<div class="type">{{item.type_name}}</div>
					<!-- <div class="desc">订单消息、系统消息</div> -->
				</div>
				<div class="right">
					<!-- <u-badge max="99" :value="value"></u-badge> -->
					<u-icon name="arrow-right" style="margin-left: 16rpx;"></u-icon>
				</div>
			</div>

			<u-line></u-line>



		</div>
		<div class="content" v-if="token">
			<div class="row" @click="toMessage('news')">

				<div class="center">
					<div class="type">消息</div>
					<div class="desc">未读信息：{{read_no_num}}条 已读信息：{{read_yew_num}}条</div>
				</div>
				<div class="right">
					<!-- <u-badge max="99" :value="value"></u-badge> -->
					<u-icon name="arrow-right" style="margin-left: 16rpx;"></u-icon>
				</div>
			</div>

			<u-line></u-line>



		</div>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 8,
				list: [],
				read_no_num: "",
				read_yew_num: "",
				token: uni.getStorageSync('token'),
			}
		},
		onShow() {
			this.$api.sendRequest({
				url: '/api/notice/typelists',
				data: {},
				success: res => {
					console.log(res.data);
					this.list = res.data
				}
			})
			if (this.token) {
				this.getMessageNum()
			}

		},
		methods: {
			toMessage(id) {
				console.log(id, 'id');
				uni.navigateTo({
					url: `/pages_tool/news/message?id=${id}`
				})

			},
			toCustomers() {

			},
			getMessageNum() {
				this.$api.sendRequest({
					url: '/api/notice/messageNum',
					success: res => {
						this.read_no_num = res.data.read_no_num;
						this.read_yew_num = res.data.read_yew_num
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.view {
		height: 100vh;
		background-color: #fff;
		padding: 0 28rpx;

		.content {
			.row {
				padding: 38rpx 0;
				display: flex;

				.left {
					display: flex;
					justify-content: center;
					align-items: center;

					.iconBox {
						width: 88rpx;
						height: 88rpx;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.center {
					padding-left: 20rpx;
					flex-grow: 1;

					.type {
						font-size: 32rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 600;
						color: #222222;
					}

					.desc {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}

				.right {
					display: flex;
					justify-content: center;
					align-items: center;
					padding-right: 12rpx;
				}
			}
		}
	}
</style>