<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 TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";
import TInputText from "@/components/ui/TInputText.vue";
import TButton from "@/components/ui/TButton.vue";
import NSRouteSelector from "@/components/ns/NSRouteSelector.vue";
import SortArrow from "@/components/common/SortArrow.vue";
import Keyword from "@/components/common/Keyword.vue";
import LabelOn from "@/components/common/LabelOn.vue";
import Pager from "@/components/common/Pager.vue";
import TTag from "@/components/ui/TTag.vue";
import {ref} from "vue";
import ListTable from "@/components/common/ListTable.vue";
import Column from "primevue/column";
import TLabel from "@/components/ui/TLabel.vue";
import DomainMenu from "../@menu_domain.vue"
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";
import NavButtons from "@/components/common/NavButtons.vue";
import NavButton from "@/components/common/NavButton.vue";

const recordsSearchForm = ref()
const ctx = ctxRef(new Context(), {
	refs: {recordsSearchForm}
})

</script>

<template>
	<DomainMenu :ctx="ctx" activeTab="record"></DomainMenu>

	<NavButtons>
		<NavButton @click.prevent="ctx.createRecord" action-create>创建记录</NavButton>
	</NavButtons>

	<form method="get" action="/ns/domains/records" ref="recordsSearchForm">
		<input type="hidden" name="domainId" :value="ctx.domain.id"/>
		<div class="ui fields inline">
			<div class="ui field">
				<TSelect name="type" v-model="ctx.type">
					<TOption value="">[记录类型]</TOption>
					<TOption v-for="t in ctx.types" :value="t.type">{{ t.type }}</TOption>
				</TSelect>
			</div>
			<div class="ui field">
				<NSRouteSelector :v-route-code="ctx.routeCode"></NSRouteSelector>
			</div>
			<div class="ui field">
				<TInputText placeholder="记录名、备注..." name="keyword" v-model="ctx.keyword" style="width: 20em"/>
			</div>
			<div class="ui field">
				<TButton secondary="" type="submit">搜索</TButton>
			</div>
		</div>
	</form>

	<NotFoundInfo v-if="ctx.records.length == 0">暂时还没有记录。</NotFoundInfo>

	<div v-if="ctx.enableNameSearch || ctx.enableValueSearch" class="mt-4">
		<a href="" v-if="ctx.enableNameSearch" @click.prevent="ctx.searchWithName(ctx.searchingKeyword)">
			<TTag outlined="">使用name:"{{ ctx.searchingKeyword }}"精确搜索</TTag>
		</a>
		<a href="" v-if="ctx.enableValueSearch" @click.prevent="ctx.searchWithValue(ctx.searchingKeyword)">
			<TTag>使用value:"{{ ctx.searchingKeyword }}"精确搜索</TTag>
		</a>
	</div>

	<div v-if="ctx.records.length > 0" class="mt-4">
		<ListTable :items="ctx.records">
			<Column class="title-column" header-class="!align-top" frozen>
				<template #header>
					<div class="flex items-center gap-2">
						记录名
						<SortArrow name="nameOrder"></SortArrow>
					</div>
				</template>
				<template #body="{data:record}">
					<Keyword :v-word="ctx.keyword">{{ record.name }}&nbsp;</Keyword>
					<div v-if="(record.description != null && record.description.length > 0) || record.weight > 0 || (record.type == 'MX')">
						<span class="grey small" v-if="record.description != null && record.description.length > 0"><Keyword :v-word="ctx.keyword">{{ record.description }}</Keyword></span>
						<span class="grey small" v-if="record.type == 'MX'">优先级：{{ record.mxPriority }}</span>
						<span class="grey small" v-if="record.weight > 0">权重：{{ record.weight }}</span>
					</div>
				</template>
			</Column>
			<Column class="name-column" header-class="!align-top">
				<template #header>
					<div class="flex items-center gap-2">
						记录类型
						<SortArrow name="typeOrder"></SortArrow>
					</div>
				</template>
				<template #body="{data:record}">
					{{ record.type }}
				</template>
			</Column>
			<Column class="name-column" header-class="!align-top">
				<template #header>
					<div>
						记录值
					</div>
				</template>
				<template #body="{data:record}">
					<Keyword :v-word="ctx.keyword">{{ record.value }}</Keyword>
				</template>
			</Column>
			<Column class="value-column" header-class="!align-top">
				<template #header>
					<div class="flex items-center gap-2">
						TTL
						<SortArrow name="ttlOrder"></SortArrow>
					</div>
				</template>
				<template #body="{data:record}">
					{{ ctx.formatTTL(record.ttl) }}
				</template>
			</Column>
			<Column class="name-column" header-class="!align-top">
				<template #header>
					<div>
						线路
					</div>
				</template>
				<template #body="{data:record}">
					<div class="label-group">
						<TLabel outlined="" v-for="route in record.routes">{{ route.name }}</TLabel>
					</div>
				</template>
			</Column>
			<Column class="value-column" header-class="!align-top" v-if="ctx.domainHealthCheckIsOn">
				<template #header>
					<div>
						健康检查
						<SortArrow name="upOrder"></SortArrow>
					</div>
				</template>
				<template #body="{data:record}">
					<div v-if="record.type == 'A' || record.type == 'AAAA'">
                	<span v-if="record.healthCheck.isOn">
                    	<span v-if="record.isUp" title="在线"><i class="icon green circle small"></i>&nbsp;<span class="status green">在线</span></span>
                    	<span v-if="!record.isUp" title="离线"><i class="icon red circle small"></i>&nbsp;<span class="status red">离线</span></span>
                	</span>
						<span v-else class="disabled"><i class="icon circle small"></i>
                </span>
						<br/>
						<a href="" style="font-size: 0.9em; margin-top: 0.12em" @click.prevent="ctx.updateRecordHealthCheck(record.id)">[设置]</a>
						<span v-if="!record.isUp">&nbsp; <a href="" @click.prevent="ctx.upRecord(record)">[上线]</a></span>
					</div>
				</template>
			</Column>
			<Column class="value-column" header-class="!align-top">
				<template #header>
					<div>
						解析次数<br/><span class="grey">当前小时内</span>
					</div>
				</template>
				<template #body="{data:record}">
					<a href="" @click.prevent="ctx.showStat(record.id)" title="查看统计"><i class="icon chart area small"></i></a>&nbsp;
					<span v-if="record.stat.countRequests > 0">{{ record.stat.countRequestsFormat }}</span>
					<span v-else class="disabled">-</span>
				</template>
			</Column>
			<Column class="status-column" header-class="!align-top">
				<template #header>
					<div>
						状态
					</div>
				</template>
				<template #body="{data:record}">
					<LabelOn :v-is-on="record.isOn"></LabelOn>
				</template>
			</Column>
			<Column class="two op" header-class="!align-top" frozen align-frozen="right">
				<template #header>
					<div>
						操作
					</div>
				</template>
				<template #body="{data:record}">
					<a href="" @click.prevent="ctx.updateRecord(record.id)">修改</a> &nbsp;
					<a href="" @click.prevent="ctx.deleteRecord(record.id)">删除</a>
				</template>
			</Column>
		</ListTable>

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

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