<script setup>
// Copyright 2024 FlexCDN root@flexcdn.cn. All rights reserved. Official site: https://flexcdn.cn .

import ctxRef from "@/utils/ctx_ref.js"
import Context from "./index.js"
import Menu from "../@menu.vue"
import TipIcon from "@/components/common/TipIcon.vue";
import GreyLabel from "@/components/common/GreyLabel.vue";
import Pager from "@/components/common/Pager.vue";
import ListTable from "@/components/common/ListTable.vue";
import TColumn from "@/components/ui/TColumn.vue";
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";
import NavButtons from "@/components/common/NavButtons.vue";
import NavButton from "@/components/common/NavButton.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<Menu active-tab="user"></Menu>

	<NavButtons>
		<NavButton @click.prevent="ctx.createUser" action-create>创建用户</NavButton>
		<span class="ml-2"><TipIcon content="这里管理用于申请免费证书的用户信息" class="flex"></TipIcon></span>
	</NavButtons>

	<NotFoundInfo v-if="ctx.users.length == 0">暂时还没有用户。</NotFoundInfo>

	<div v-if="ctx.users.length > 0">
		<ListTable :items="ctx.users">
			<TColumn header="用户Email" class="email-column" frozen>
				<template #body="{data: user}">
					<a href="" @click.prevent="ctx.updateUser(user.id)">{{ user.email }}
						<i class="icon expand small"></i></a>
					<div class="label-group mt-1">
						<GreyLabel v-if="user.provider != null">{{ user.provider.name }}</GreyLabel>
						<GreyLabel v-if="user.account != null">{{ user.account.name }}</GreyLabel>
					</div>
				</template>
			</TColumn>
			<TColumn header="备注" class="description-column">
				<template #body="{data: user}">
					<span v-if="user.description.length > 0">{{ user.description }}</span>
					<span v-else class="disabled">-</span>
				</template>
			</TColumn>
			<TColumn header="操作" class="two op" frozen align-frozen="right">
				<template #body="{data: user}">
					<a href="" @click.prevent="ctx.updateUser(user.id)">修改</a> &nbsp;
					<a href="" @click.prevent="ctx.deleteUser(user.id)">删除</a>
				</template>
			</TColumn>
		</ListTable>
	</div>

	<Pager :data="ctx.page"></Pager>
</template>

<style lang="postcss" scoped>
</style>