<template>
	<el-container>
		<el-main class="nopadding">
			<ul class="msg-list">
				<li v-for="item in msgList" v-bind:key="item.accept_id" @click="toMessage(item.accept_id)">
					<a :href="item.link" target="_blank">
						<div class="msg-list__main">
							<p :class="item.status == 0 ? 'unread' : ''">{{ item.title }}</p>
						</div>
						<div class="msg-list__time">
							<p v-time.tip="item.create_time" :class="item.status == 0 ? 'unread' : ''"></p>
						</div>
					</a>
				</li>
				<el-empty v-if="msgList.length==0" description="暂无新消息" :image-size="100"></el-empty>
			</ul>
		</el-main>
		<el-footer>
			<el-button type="primary" @click="toMessage(0)">消息中心</el-button>
			<el-button @click="markRead">全部已读</el-button>
		</el-footer>
	</el-container>
</template>

<script setup>
import {ref, onMounted, getCurrentInstance} from "vue";
import api from "@/api";
import {useRouter} from "vue-router";

const emit = defineEmits(['closed']);
const {proxy} = getCurrentInstance()
const router = useRouter()

let msgList = ref([])

onMounted(() => {
	loadData()
})

async function loadData() {
	// let res = await api.home.message.newMsg()
	// this.msgList = res.data
}

//标记已读
async function markRead() {
	// let res = await api.home.message.read()
	msgList.value.forEach((item) => {
		item.status = 1
	})
	// proxy.$message.success(res.msg)
	emit('closed', 0)
}

function toMessage(accept_id) {
	router.push({name: 'messageCenter', query: {accept_id: accept_id}})
	proxy.$emit('closed', -1)
}
</script>

<style scoped>
.msg-list li {
	border-top: 1px solid #eee;
}

.msg-list li a {
	display: flex;
	padding: 20px;
}

.msg-list li a:hover {
	background: #ecf5ff;
}

.msg-list__main {
	flex: 1;
}

.msg-list__main h2 {
	font-size: 15px;
	font-weight: normal;
	color: #333;
}

.msg-list__main p {
	font-size: 12px;
	color: #999;
	line-height: 1.8;
	margin-top: 5px;
}

.msg-list__time {
	width: 100px;
	text-align: right;
	color: #999;
}

.msg-list__time p {
	font-size: 12px;
	color: #999;
	line-height: 1.8;
	margin-top: 5px;
}

.unread {
	color: #333 !important;
}

.dark .msg-list__main h2 {
	color: #d0d0d0;
}

.dark .msg-list li {
	border-top: 1px solid #363636;
}

.dark .msg-list li a:hover {
	background: #383838;
}
</style>
