<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 NotFoundBox from "@/components/common/NotFoundBox.vue";
import Pager from "@/components/common/Pager.vue";
import ListTable from "@/components/common/ListTable.vue";
import TColumn from "@/components/ui/TColumn.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 :active-tab="ctx.status">
		<template #tabs>
			<NavTab href="/tickets?status=none" value="none">
				<template #name>
					进行中({{ ctx.countNewTickets }})
				</template>
			</NavTab>
			<NavTab href="/tickets?status=solved" value="solved" name="已解决"></NavTab>
			<NavTab href="/tickets?status=closed" value="closed" name="已关闭"></NavTab>
			<NavTab separator></NavTab>
			<NavTab static @click.prevent="ctx.createTicket" action-create name="提交工单"></NavTab>
		</template>
	</Navbar>

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

	<div v-if="ctx.tickets.length > 0">
		<ListTable :items="ctx.tickets">
			<TColumn header="工单标题" class="title-column" frozen>
				<template #body="{data: ticket}">
					<a :href="'/tickets/ticket?ticketId=' + ticket.id + '&fromURL=' + ctx.currentURL">{{ ticket.subject }}</a>
				</template>
			</TColumn>
			<TColumn header="最后操作时间" class="datetime-column">
				<template #body="{data: ticket}">
					{{ ticket.lastLogTime }}
				</template>
			</TColumn>
			<TColumn header="最后操作人" class="user-column">
				<template #body="{data: ticket}">
  					<span v-if="ticket.latestLog != null && ticket.latestLog.admin != null">
               			<i class="icon secret user"></i> 管理员
					</span>
					<span v-else class="grey">自己</span>
				</template>
			</TColumn>
			<TColumn header="分类" class="name-column">
				<template #body="{data: ticket}">
					<span v-if="ticket.category != null">{{ ticket.category.name }}</span>
					<span v-else class="disabled">-</span>
				</template>
			</TColumn>
			<TColumn header="状态" class="fixed-status-column">
				<template #body="{data: ticket}">
					<span :class="{olive: ticket.status == 'none', green: ticket.status == 'solved', red: ticket.status == 'closed'}">{{ ticket.statusName }}</span>
				</template>
			</TColumn>
			<TColumn header="操作" class="one op" frozen align-frozen="right">
				<template #body="{data: ticket}">
					<a :href="'/tickets/ticket?ticketId=' + ticket.id+ '&fromURL=' + ctx.currentURL">详情</a>
				</template>
			</TColumn>
		</ListTable>

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

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