<template>
	<view class="page">
		<view v-if="list.length > 0">
			<view class="list">
				<view v-for="(item,index) in list" :key="index" @click="handelClick(item)">
					<view class="time">
						{{$u.timeFrom(item.sendTime)}}
					</view>
					<view class="list-item">
						<image class="head" :src="`${vuex_ossUrlPubilc}/${item.coverPicPath[0].response.object}`"></image>
						<view class="item-t">
							{{item.title}}
						</view>
						<view class="tag">
							{{type[item.type]}}
						</view>
						<view v-if="item.ifRead == 'unread'" class="red"></view>
					</view>
				</view>
			</view>
			<view style="height: 40rpx;"></view>
			<c-loading :loading="loading"></c-loading>
			<view style="height: 40rpx;"></view>
		</view>
		<view v-else style="width: 100%; height: 100%;">
			<view style="margin: 150px auto 0; width: 187px;height: 110px;">
				<image style="width: 187px;height: 110px;" :src="'/static/img/internship/nodata.png'"></image>
			</view>
			<view style="width: 100%; margin-top: 10px; text-align: center; font-size: 13px; color: #121212;">暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	import {
		msglistUrl,
	} from '@/config/api.js';
	import listMixin from "@/common/mixins/list-mixin.js";
	export default {
		mixins: [listMixin],
		data() {
			return {
				source: '',
				list: [],
				type: {
					system: '系统公告',
					inform: '通知公告',
					safety_rules: '安全条例',
					vital_document: '重要文件'
				}
			}
		},
		
		onLoad(e) {
			this.source = e.type == '1' ? 'operation' : 'teacher'
			this.loadTestData()
		},
		
		onShow(e) {
			// if (JSON.stringify(this.vuex_user) == '{}') {
			// 	return
			// }
			// this.loadTestData()
		},

		methods: {
			handelClick(item) {
				item.ifRead = 'read'
				this.$u.route({
					url: "/pages/main/message/message-detail/message-detail",
					params: {
						id: item.id
					}
				});
			},
			
			loadTestData() {
				this.finished = false;
				this.loading = "loadmore";
				this.page = 0;
				this.list = [];
				this.mylist = [];
				this._getList();
			},
			
			// 模拟后端分页
			async getData(requestParams) {
				const {
					search = {}
				} = requestParams;
			
				let params = {};
				params.pageNumber = requestParams.page + 1;
				params.pageSize = 10;
				params.source = this.source
			
				return await msglistUrl(params);
			},
			
			// 数据请求(没错就是这么少的代码)
			async _getList() {
				if (this.page == 0) {
					this.list = [];
				}
			
				uni.showLoading({
					title: '数据加载中~',
					mask: true
				})
			
				// 根据实际情况修改自己修改key
				let result = await this.getData({
					page: this.page, // 传入页码
					size: this.size, // 传入每页条数
					search: this.search, // 传入搜索的对象
				});
			
				this.total = result.total;
			
				result.records.map((item) => {
					item.coverPicPath = JSON.parse(item.coverPicPath)
					this.list.push(item);
				});
			
				if (this.list.length == this.total) {
					this.finished = true;
					this.loading = 'nomore';
				}
			
				uni.hideLoading();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 32rpx;
		background: #FDFDFD;
		
		.list {
			// margin-bottom: 15px;
			
			.time {
				font-size: 14px;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				color: rgba(0,0,0,0.45);
				text-align: center;
			}
			
			.list-item {
				margin-top: 15px;
				margin-bottom: 20px;
				width: 100%;
				// height: 238px;
				background: #FFFFFF;
				box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.06);
				border-radius: 8px;
				// overflow: hidden;
				position: relative;
				
				.head {
					width: 100%;
					height: 172px;
					background: #EBEBEB;
					border-top-left-radius: 8px;
					border-top-right-radius: 8px;
				}
				
				.item-t {
					margin: 10px 20px 0;
					font-size: 16px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #000000;
				}
				
				.tag {
					margin: 10px 20px;
					display: inline-block;
					padding: 5px;
					background: rgba(12,177,122,0.06);
					border-radius: 2px;
					font-size: 11px;
					font-family: PingFangSC-Light, PingFang SC;
					font-weight: 300;
					color: #0CB17A;
				}
				
				.tag1 {
					margin: 10px 0px;
					display: inline-block;
					padding: 5px;
					background: rgba(12,177,122,0.06);
					border-radius: 2px;
					font-size: 11px;
					font-family: PingFangSC-Light, PingFang SC;
					font-weight: 300;
					color: #0CB17A;
				}
				
			}
			
			.red {
				position: absolute;
				left: -4px;
				top: -4px;
				width: 12px;
				height: 12px;
				border-radius: 6px;
				background-color: red;
			}
		}
	}
</style>