<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 TipIcon from "@/components/common/TipIcon.vue";
import TColumn from "@/components/ui/TColumn.vue";
import ListTable from "@/components/common/ListTable.vue";
import Navbar from "@/components/common/Navbar.vue";
import NavTab from "@/components/common/NavTab.vue";
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<Navbar>
		<template #tabs>
			<NavTab href="." name="AccessKey列表" :active="true"></NavTab>
			<NavTab separator></NavTab>
			<NavTab static @click.prevent="ctx.createAccessKey()" name="创建AccessKey" action-create></NavTab>
			<NavTab separator/>
			<NavTab static>
				<template #name>
					<TipIcon content="AccessKey可以用来访问API接口。" class="flex"></TipIcon>
				</template>
			</NavTab>
		</template>
	</Navbar>

	<NotFoundInfo disable-spacing v-if="ctx.accessKeys.length == 0">暂时还没有AccessKey。</NotFoundInfo>

	<div v-if="ctx.accessKeys.length > 0">
		<ListTable :items="ctx.accessKeys" :row-class="accessKey => accessKey.isOn ? '' : 'gray'">
			<TColumn header="AccessKey ID" class="description-column" frozen>
				<template #body="{data: accessKey}">
					{{ accessKey.uniqueId }}
				</template>
			</TColumn>
			<TColumn header="AccessKey密钥" class="description-column">
				<template #body="{data: accessKey}">
					{{ accessKey.secret }}
				</template>
			</TColumn>
			<TColumn header="备注" class="description-column">
				<template #body="{data: accessKey}">
					{{ accessKey.description }}
				</template>
			</TColumn>
			<TColumn header="状态" class="fixed-status-column">
				<template #body="{data: accessKey}">
					<span v-if="accessKey.isOn" class="green">已启用</span>
					<span v-else class="disabled">已禁用</span>
				</template>
			</TColumn>
			<TColumn header="操作" class="two op" frozen align-frozen="right">
				<template #body="{data: accessKey}">
					<a href="" v-if="accessKey.isOn" @click.prevent="ctx.updateAccessKeyIsOn(accessKey.id, false)">禁用</a>
					<a href="" v-if="!accessKey.isOn" @click.prevent="ctx.updateAccessKeyIsOn(accessKey.id, true)">启用</a>
					&nbsp; <a href="" @click.prevent="ctx.deleteAccessKey(accessKey.id)">删除</a>
				</template>
			</TColumn>
		</ListTable>
	</div>
</template>

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