<template>
	<view class="inform-list">
		<custom-tabs type="c1" :value="activeTab" @change="handleTabChange" :animation="true" class="custom-tabs">
			<block v-for="(item, index) in tabs" :key="index">
				<custom-tab-pane class="custom-tab-pane" :label="item" :name="'c1_' + index"></custom-tab-pane>
			</block>
		</custom-tabs>
		<scroll-view scroll-y class="content" >
			<view class="item" v-for="item in noticeBarText" :key="item.id" @tap="handleInform(item.id)">
				<view class="item-title">
					{{ item.messageHeader }}
				</view>
				<view class="item-text">
					<text class="text" style="color: #1492FF;">
						{{ item.rank === 0 ? '普通' : '重要' }}
					</text>
					<text class="text">{{ tabOption(item.type) }}</text>
					<text class="text">|</text>
					<text class="text">{{ item.publishDept }}</text>
					<text class="text">{{ item.createTime !== null? item.createTime :'-' }}</text>
				</view>
			</view>
		</scroll-view>
		<uni-pagination :total="total" title="标题文字" @change="pageChange"/>
	</view>
</template>

<script>
import { getNoticeList } from "@/api/notice.js";
export default {
	name: 'InformList',
	data() {
		return {
			tabs: ['综合', '通知', '公告'],
			activeTab: 0,
			noticeBarText: [],
			activeType: '',
			current: 1,
			total: 0,
		}
	},
	onLoad(options) {
		this.getNoticeList();
	},
	methods: {
		handleTabChange(e) {
			console.log(e);

			switch (e.value) {
				case 1:
					this.activeType = 1;
					break
				case 2:
					this.activeType = 0;
					break
				default:
					this.activeType = '';
			}

			this.getNoticeList();
		},
		tabOption(value) {
			// 0公告 1消息 2其他
			switch (value) {
				case 0:
					return '公告';
				case 1:
					return '消息';
				default:
					return '其他';
			}
		},
		handleInform(id) {
			uni.navigateTo({
				url: `/subPages/pages/inform/inform?noticeId=${id}`,
			});
		},

		getNoticeList() {
			const data = {
				current: this.current,
				size: 10,
				status: 2,
				type: this.activeType
			};
			getNoticeList(data).then((res) => {
				this.total = res.data.total;
				this.noticeBarText = res.data.records;
			});
		},
		pageChange({type,current}) {
			// console.log(type, current);
			this.current = current;
			this.getNoticeList();
		}
	}
}
</script>

<style lang="scss" scoped>
@import './InformList.css';

.content {
	flex-direction: column;

	.item {
		padding: 0 20px 20px;

		.item-title {
			margin-bottom: 5px;
		}

		.item-text {
			font-size: 14px;

			.text {
				margin-right: 10px;
			}
		}
	}
}

.inform-list {
	overflow: hidden;
}
</style>