<template>
	<el-card shadow="never" class="mt10 right-notice" v-loading="state.noticeLoading">
		<el-tabs v-model="activeName" @tab-change="handleClick">
			<el-tab-pane label="知识库" name="0"></el-tab-pane>
			<el-tab-pane label="公告" name="1"></el-tab-pane>
		</el-tabs>
		<el-button type="primary" link @click="more(activeName)" class="more"> 更多<SvgIcon name="ele-ArrowRight" /> </el-button>
		<template v-if="state.noticeList.length">
			<vue3-seamless-scroll :list="state.noticeList" :step=".5" class="right-notice-scroll" :hover="true" :limitScrollNum="6">
				<div class="right-notice-scroll-item" v-for="(item, index) in state.noticeList" :key="index">
					<span class="right-notice-scroll-item-name text-no-wrap" @click="goLink(item)">
						<SvgIcon name="ele-Reading" class="mr3 mt2" v-if="activeName === '0'" />
						<SvgIcon name="iconfont icon-jiadayinliang" class="mr3 mt1" v-else />
						<span>{{ item.title }}</span></span
					>
					<span class="right-notice-scroll-item-date"
						>{{ formatDate(item.creationTime, 'YYYY-mm-dd') }}
						<SvgIcon name="ele-DArrowRight" class="ml5" />
					</span>
				</div>
			</vue3-seamless-scroll>
		</template>
    <el-empty v-else :image-size="100"/>
	</el-card>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import { formatDate } from '@/utils/formatTime';
import { useRouter } from 'vue-router';
import { KnowledgePaged } from '@/api/knowledge';
import { bulletinList } from '@/api/auxiliary/notice';
const state = reactive({
	noticeList: [], // 通知公告
	noticeLoading: false, // 公告
});

const router = useRouter();
const activeName = ref('0');
// 知识库公告切换
const handleClick = (val: string) => {
	state.noticeLoading = true;
	state.noticeList = [];
	switch (val) {
		case '0':
			KnowledgePaged({ PageIndex: 1, PageSize: 10, Status: '3' })
				.then((response: any) => {
					state.noticeList = response?.result.items ?? [];
					state.noticeLoading = false;
				})
				.catch(() => {
					state.noticeLoading = false;
				});
			break;
		case '1':
			state.noticeLoading = false;
			bulletinList({ PageIndex: 1, PageSize: 10, BulletinState: '2', IsLoseEfficacy: false })
				.then((response: any) => {
					state.noticeList = response?.result.items ?? [];
					state.noticeLoading = false;
				})
				.catch(() => {
					state.noticeLoading = false;
				});
			break;
		default:
			break;
	}
};
// 知识库和通知公告详情
const goLink = (item: any) => {
	switch (activeName.value) {
		case '0':
			router.push({
				name: 'knowledgePreview',
				params: {
					id: item.id,
					tagsViewName: '知识查看',
				},
			});
			break;
		case '1':
			router.push({
				name: 'auxiliaryNoticeRead',
				params: {
					id: item.id,
					isRead: 0,
					tagsViewName: '公告详情',
				},
			});
			break;
	}
};
// 更多
const more = (val: string) => {
	switch (val) {
		case '0':
			router.push({ path: '/knowledge/index' });
			break;
		case '1':
			router.push({
				path: '/auxiliary/notice',
				state: {
					index: '1',
				},
			});
			break;
		default:
			break;
	}
};
onMounted(() => {
	handleClick('0');
});
</script>

<style scoped lang="scss">
.right-notice {
	position: relative;
	.more {
		position: absolute;
		right: 20px;
		top: 30px;
		z-index: 2;
	}
	&-scroll {
		height: 350px;
		overflow: hidden;
		&-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid var(--el-border-color);
			cursor: pointer;
			height: 50px;
			&:last-child {
				border-bottom: none;
			}
			&-name {
				flex: 1;
				max-width: 70%;
        display: flex;
        align-items: center;
			}
			&-date {
				display: flex;
				align-items: center;
				color: var(--el-color-info);
				text-align: right;
			}
			&:hover {
				color: var(--el-color-primary);
			}
		}
	}
}
</style>
