<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 "./index.css"
import Pager from "@/components/common/Pager.vue";
import CardView from "@/components/common/CardView.vue";
import CardRow from "@/components/common/CardRow.vue";
import CardDivider from "@/components/common/CardDivider.vue";
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";
import Navbar from "@/components/common/Navbar.vue";

const ctx = ctxRef(new Context())

let parentURL = ctx.fromURL
if (parentURL == null || parentURL.length == 0) {
	parentURL = "/tickets?status=" + ctx.ticket.status
}
</script>

<template>
	<Navbar disable-spacing :content-name="ctx.ticket.subject" :parent-items="[['工单列表', parentURL]]"></Navbar>

	<CardView>
		<CardRow>
			<template #name>工单标题</template>
			<template #value>{{ ctx.ticket.subject }}</template>
		</CardRow>
		<CardRow>
			<template #name>最后操作时间</template>
			<template #value>
				{{ ctx.ticket.lastLogTime }}
			</template>
		</CardRow>
		<CardRow>
			<template #name>分类</template>
			<template #value>
				<span v-if="ctx.ticket.category != null">{{ ctx.ticket.category.name }}</span>
				<span v-else class="disabled">-</span>
			</template>
		</CardRow>
		<CardRow>
			<template #name>状态</template>
			<template #value>
				<span :class="{olive: ctx.ticket.status == 'none', green: ctx.ticket.status == 'solved', red: ctx.ticket.status == 'closed'}">{{ ctx.ticket.statusName }}</span>
			</template>
		</CardRow>
		<CardRow>
			<template #name>操作</template>
			<template #value>
				<a href="" @click.prevent="ctx.reply(ctx.ticket.id)">[回复]</a>
			</template>
		</CardRow>

		<CardDivider></CardDivider>

		<CardRow full>
			<template #name>工单内容</template>
			<template #value>
				<div v-html="ctx.ticket.body"></div>
			</template>
		</CardRow>
	</CardView>

	<h5 class="group-header">工单回复</h5>
	<NotFoundInfo v-if="ctx.logs.length == 0">暂时还没有回复。</NotFoundInfo>

	<div v-if="ctx.logs.length > 0">
		<table class="ui table selectable" v-for="log in ctx.logs">
			<thead>
			<tr>
				<th class="log-header">
                <span v-if="log.adminId > 0">
                   <i class="icon secret user"></i> 管理员
                </span>
					<span v-if="log.userId > 0" class="grey">
                    自己
                </span>
					@ {{ log.createdTime }}

					&nbsp; | &nbsp;
					<span v-if="log.statusName.length > 0" :class="{olive: log.status == 'none', green: log.status == 'solved', red: log.status == 'closed'}">{{ log.statusName }}</span>
				</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td>
					<div v-html="log.comment" v-if="log.comment.length > 0"></div>
					<span class="disabled" v-else>没有内容</span>
				</td>
			</tr>
			</tbody>
		</table>

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

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