<template>
	<view class="wrap">
		<view class="header">消息（{{message.length}}）</view>
		<view class="back"></view>
		<view class="message_list">
			<view class="wrap" v-for="item,index in message" :key="index">
				<view class="message_list_item clear" @tap="toDetail(item)" >
					<view class="item_lf"> 
						<image v-if="item.title === '系统消息'" src="https://wx.fujinyangche.com/nvrnetwork/images/xitong.png"></image>
						<image v-if="item.title === '采购订单推荐信息'" src="https://wx.fujinyangche.com/nvrnetwork/images/caigou.png"></image>
						<image v-if="item.title === '平台消息'" src="https://wx.fujinyangche.com/nvrnetwork/images/pingtai.png"></image>
						<!-- 提示新消息 -->
						<view class="news" v-if="item.isRead == 0"></view>
					</view>
					<view class="item_middle">
						<view class="item_middle_title">{{item.title}}</view>
						<view class="item_middle_small">{{item.content}}</view>
					</view>
					<view class="item_rg">{{item.date}}</view>
				</view>
				<view class="back"></view>
			</view>	
		</view>
	</view>
</template>

<script>
	import api from "../../../../../api.js";
	let app = getApp();
	export default {
		data() {
			return {
				message:[],
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getData();
		},
		methods: {
			//加载数据
			getData(){
				let data = {
					token:app.globalData.token
				}
				api.getUserMessageList(data).then((res)=>{
					console.log(res);
					this.message = res.data.data.message
				})
			},
			//跳转详情页
			toDetail(item){
				uni.navigateTo({
					url:'../message_detail/message_detail?id=' + item.id
				})
			}
		}
	}
</script>

<style>
	.clear:after{
		content: "";
		display: block;
		clear: both;
	}
	.header{
	  height:100rpx;
	  line-height: 100rpx;
	  font-size: 30rpx;
	  color:#666666;
	  text-indent: 30rpx;
	  border-top:1px solid #f2f2f2;
	  box-sizing: border-box;
	}
	.message_list{
	  width:100%;
	  overflow: hidden;
	}
	.message_list_item{
	  width:100%;
	  height:134rpx;
	  padding: 24rpx 30rpx 0 32rpx;
	  box-sizing: border-box;
	}
	.item_lf{
	  width:72rpx;
	  height:72rpx;
	  float:left;
	  position: relative;
	  margin-top:8rpx;
	}
	.news{
	  width:20rpx;
	  height:20rpx;
	  background-color: #E11521;
	  border-radius: 50%;
	  border:1px solid #ffffff;
	  position: absolute;
	  top:-2rpx;
	  right:-2rpx;
	}
	.item_lf image{
	  display: block;
	  width: 100%;
	  height:100%;
	}
	.item_middle{
	  float:left;
	  margin-left: 30rpx;
	}
	.item_middle_title{
	  font-size: 30rpx;
	  color:#222222;
	  font-weight: bold;
	}
	.item_middle_small{
	  width:460rpx;
	  font-size: 24rpx;
	  color:#999999;
	  margin-top:10rpx;
	  overflow: hidden;
	  text-overflow:ellipsis;
	  white-space: nowrap;
	}
	.item_rg{
	  float:right;
	  font-size: 22rpx;
	  color:#cccccc;
	  margin-top:6rpx;
	}
	.back{
		width: 100%;
		height: 20rpx;
		background-color: #f7f7f7;
	}
</style>
