<template>
	<view class="content">
		<view class="header">
			<image src="../../static/icon/swiper.png" mode=""></image>
		</view>
		<view class="nas">
			<navigator
				:url="item.icon=='analysis'?item.href+'?icon='+item.icon+'&parentId='+item.code:item.href+'?icon='+item.icon"
				class="li" v-for="(item,index) in navList" :key="index">
				<image :src="'../../static/icon/'+item.icon+'.png'" mode=""></image>
				<text>{{item.name}}</text>
			</navigator>
		</view>
		<view class="contents">
			<view class="titles">
				<image src="../../static/icon/铃铛.png" mode=""></image>
				<text>消息中心</text>
			</view>
			<view class="text" v-for="(item,index) in userList" :key="index">
				<view class="textTop">
					<view class="textTopt">
						{{item.label}}
					</view>
					<view class="times" @click="more(item)">
						<text>更多</text>
						<image src="../../static/icon/more.png" mode=""></image>
					</view>
				</view>
				<view class="textBottom" @click="info(item)">
					<text>{{item.content}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		postRequest,
		getRequest
	} from '../../api/api.js'
	export default {
		data() {
			return {
				navList: [],
				userList: [],
				tableData: {
					companyId: "",
					current: 1,
					id: "",
					officeId: "",
					openId: "",
					orders: [{
						asc: true,
						column: ""
					}],
					size: 100
				},
				total: 0,
			}
		},
		onLoad() {

			getRequest('/loginVerify/findMenuList').then(res => {
				if (res.code == '200') {
					this.navList = res.data
				}
			});

			this.findAllMsgByUser()
		},
		methods: {
			more(item) {
				uni.navigateTo({
					url: `/pages/messageList/messageList?businessId=${item.businessId}`
				})
			},
			findAllMsgByUser() {
				postRequest('/sysMessage/findMsgGroupByType', {}).then(res => {
					if (res.code == '200') {
						this.userList = res.data;
					}
				})
			},
			info(item) {
				uni.navigateTo({
					url: item.url + '?businessId=' + item.businessId + '&msgId=' + item.id
				})
			},
			getList(num, item) {
				let data = {
					businessId: item.businessId,
					approval: num,
					msgId: item.id
				}
				postRequest('/thirdUser/approvalUser', data).then(res => {
					if (res.code == '200') {
						uni.showToast({
							title: num == 1 ? "审核成功" : "不通过"
						})
						this.findAllMsgByUser()
					} else {
						uni.showToast({
							title: res.msg
						})
						this.findAllMsgByUser()
					}
				})

			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.content {
		height: 100%;
	}

	.header {
		height: 20%;
		padding: 10px;
		text-align: center;
	}

	.header image {
		width: 100%;
		height: 100%;
		box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.2);
	}

	.nas {
		padding: 0rpx 10rpx;
	}

	.nas .li {
		width: 20%;
		height: 100rpx;
		display: inline-block;
		box-sizing: border-box;
		padding: 8px;
		font-size: 12px;
		text-align: center;
	}

	.nas .li image {
		width: 58%;
		height: 100%;
		padding: 14rpx;
	}

	.contents {
		margin-top: 10rpx;
		padding: 20rpx;
	}

	.titles {
		padding-bottom: 10rpx;
		display: flex;
		font-size: 14px;
	}

	.titles text {
		font-weight: bold;
	}

	.titles image {
		width: 5%;
		height: 34rpx;
		padding: 3px 10rpx;
	}

	.text {
		border: 1px solid #CCCCCC;
		padding: 0 10rpx;
		border-radius: 8rpx;
		font-size: 12px;
		margin-bottom: 10rpx;
	}

	.text .textTop {
		padding: 10rpx;
		border-bottom: 1px solid #CCCCCC;
		display: flex;
		justify-content: space-between;
	}

	.text .textTop .textTopt {
		background-color: #007AFF;
		color: white;
		text-align: center;
		padding: 20rpx;
		border-radius: 8rpx;
	}

	.text .textTop .times {
		display: flex;
		color: #cecece;
		width: 15%;
	}

	.text .textTop .times image {
		width: 40%;
		height: 36rpx;
	}

	.text .textBottom {
		padding: 20rpx 10rpx;
	}
</style>
