<template>
	<view class="page">
		<view v-for="(item,index) in listData" :key="index">
			<view class="itemBox">
				<view class="avatarBox">
					<image class="imgicon" :src="item.imgurl" mode="widthFix"></image>
					<u-badge size="mini" class="badge" :absolute="false"  :count="item.Num"></u-badge>
				</view>
				
				<view class="infoBox">
					<view class="infoTop">
						<view class="infoName">
							{{item.Title}}
						</view>
						<view class="infoDate">
							{{item.Time}}
						</view>
					</view>
					<view class="infoTipMsg">
						{{item.Description}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: "消息",
				listData: []
			}
		},
		methods: {
			getMiaiMessageCenter(){
				this.request2(
				  	{
				  		url: '/api/AppletMiai/GetMiaiMessageCenter',
				  		data:{} 
				  	},
				  	res => {
						if(res.resultCode==1){
							this.listData=[]
							for(let key in res.data ){
								if(key=="CircleModel"){
									res.data.CircleModel.imgurl="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/Blind-quan.png"
								}else if(key=="PPPlusModel"){
									res.data.PPPlusModel.imgurl="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/Blind-xitong.png"
								}else if(key=="SystemModel"){
									res.data.SystemModel.imgurl="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/Blind-ppplus.png"
								}else if(key=="VisitorModel"){
									res.data.VisitorModel.imgurl="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/Blind-fangke.png"
								}
								this.listData.push(res.data[key])
							}
							
						}
				  	}
				  );
			}
		},
		mounted() {
			this.getMiaiMessageCenter()
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 0 30rpx;
	}

	.itemBox {
		width: 100%;
		height: 148rpx;
		display: flex;
		align-items: center;
		.avatarBox{
			position: relative;
			width: 88rpx;
			height: 88rpx;
			.imgicon{
				width: 88rpx;
				height: 88rpx;
			}
			/deep/.badge{
				position: absolute;
				top: 0rpx;
				right: 0rpx;
			}
		}
	}
	
	.infoBox{
		height: 148rpx;
		margin-left: 27rpx;
		flex-grow: 5;
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		border-bottom: 1rpx solid #E2E2E2;
		.infoTop{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// margin-bottom: 5rpx;
			.infoName{
				font-size: 30rpx;
				font-weight: bold;
				color: #000000;
			}
			.infoDate{
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
			}
		}
		.infoTipMsg{
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;
		}
	}
	
	
	
</style>
