<template>
	<div class="reply-by-receiver-list">
		<div class="items">
			<loading :showOn="!pageResult"/>
			<template v-if="pageResult">
				<section class="item" v-for="item in pageResult.list" :key="item.id">
					<header class="header">
						<div class="left">
							<div class="biz-type" v-text="(<any> UserCommentBizType)[item.comment.bizType]"></div>
							<h5 v-if="item.comment.article" class="title selectable" v-text="(item.comment.article as any).title"></h5>
							<div class="gray sender">
								<span class="word-space" v-if="item.sender" v-text="item.sender.name"></span>
								<span class="word-space" v-if="item.senderNick" v-text="item.senderNick"></span>
								<span v-if="item.sender || item.senderNick">回复</span>
							</div>
						</div>
						<div class="right">
							<t-link
								:href="UserAPI.getCommentTargetUrl(item.comment)"
								class="word-space"
								theme="primary"
								hover="color" target="_blank"
							>查看</t-link>
							<t-popconfirm
								content="确定继续删除这条回复通知吗？"
								@confirm="doDelete(item)"
								:popup-props="{ placement: 'left' }"
							>
								<t-link class="del" theme="danger" hover="color">删除</t-link>
							</t-popconfirm>
						</div>
					</header>
					<div class="content gray clip-text selectable" v-text="item.content"></div>
				</section>
			</template>
		</div>
		<footer v-if="pageResult && 16 < pageResult.total" class="footer">
			<t-pagination
				v-if="pageResult"
				:total="pageResult.total"
				:pageSize="16"
				:showPageSize="false"
				:onCurrentChange="(current: number) => page.index = current - 1"
			>
				<template #totalContent>
					<div style="flex: 1" v-text="`共 ${pageResult.total} 条回复`"></div>
				</template>
			</t-pagination>
		</footer>
	</div>
</template>

<script lang="ts" setup>
import { CommentReplyBizType, CommentReplyPage, CommentReplyView, Loading, PageResult, Toolkit } from "timi-web";
import { UserCommentBizType } from "@/types/User.ts";
import UserAPI from "@/api/UserAPI.ts";

const page = reactive<CommentReplyPage>({
	bizType: (<any>CommentReplyBizType).RECEIVER,
	index: 0,
	size: 12
});
const pageResult = ref<PageResult<CommentReplyView>>();
const fetchList = Toolkit.debounce(async () => pageResult.value = await UserAPI.listCommentReply(page));
watch(() => page.index, fetchList);
onMounted(fetchList);

async function doDelete(item: CommentReplyView) {
	item.id && await UserAPI.ignoreCommentReply(item.id);
	await fetchList();
}
</script>

<style lang="less" scoped>
.reply-by-receiver-list {
	height: 100%;
	display: flex;
	flex-direction: column;

	.items {
		flex: 1;
		font-size: 1rem;

		.item {
			padding: .5rem 1rem 2rem 1rem;

			&:hover {
				background: var(--tui-dark-white);
			}

			.header {
				display: flex;
				align-items: center;
				margin-bottom: .5rem;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					.biz-type {
						width: fit-content;
						color: #FFF;
						padding: .1rem .5rem;
						text-align: center;
						background: var(--tui-light-blue);
						margin-right: .5rem;
					}

					.title {
						margin: 0;
					}

					.sender {
						font-size: 12px;
					}
				}

				.right {
					display: flex;
					font-size: 14px;
					align-items: center;
					justify-content: flex-end;
				}
			}

			.content {
				font-size: 14px;
				margin-right: 1rem;
			}
		}
	}

	.footer {
		bottom: -1px;
		padding: var(--tui-page-padding);
		position: sticky;
		background: rgba(255, 255, 255, .8);
		border-top: var(--tui-border);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}
}
</style>
