<script setup>
import "@/lib/array.js"
import TInputText from "@/components/ui/TInputText.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";
import NSRoutesSelector from "@/components/ns/NSRoutesSelector.vue";
import {ref} from "vue";
import TInputGroupAddon from "@/components/ui/TInputGroupAddon.vue";
import TInputGroup from "@/components/ui/TInputGroup.vue";
import PlusButton from "@/components/common/PlusButton.vue";

const props = defineProps(["v-types"])

const nameInputs = ref([])

const {types, records, lastIndex, isAddingRoutes} = (function () {
	let types = props.vTypes
	if (types == null) {
		types = []
	}
	return {
		types: ref(types),
		records: ref([
			{
				name: "",
				type: "A",
				value: "",
				routeCodes: [],
				ttl: 600,
				index: 0
			}
		]),
		lastIndex: ref(0),
		isAddingRoutes: ref(false) // 是否正在添加线路
	}
})()

const add = function () {
	records.value.push({
		name: "",
		type: "A",
		value: "",
		routeCodes: [],
		ttl: 600,
		index: ++lastIndex.value
	})
	setTimeout(function () {
		nameInputs.value.$last().focus()
	}, 100)
}

const remove = function (index) {
	records.value.$remove(index)
}

const addRoutes = function () {
	isAddingRoutes.value = true
}

const cancelRoutes = function () {
	setTimeout(function () {
		isAddingRoutes.value = false
	}, 1000)
}

const changeRoutes = function (record, routes) {
	if (routes == null) {
		record.routeCodes = []
	} else {
		record.routeCodes = routes.map(function (route) {
			return route.code
		})
	}
}
</script>

<template>
	<div>
		<input type="hidden" name="recordsJSON" :value="JSON.stringify(records)"/>
		<table class="ui table selectable celled" style="max-width: 60em">
			<thead class="full-width">
			<tr>
				<th style="width:10em">记录名</th>
				<th style="width:7em">记录类型</th>
				<th>线路</th>
				<th v-if="!isAddingRoutes">记录值</th>
				<th v-if="!isAddingRoutes">TTL</th>
				<th class="one op" v-if="!isAddingRoutes">操作</th>
			</tr>
			</thead>
			<tr v-for="(record, index) in records" :key="record.index">
				<td>
					<TInputText type="text" style="width:10em" v-model="record.name" ref="nameInputs"/>
				</td>
				<td>
					<TSelect v-model="record.type">
						<TOption v-for="type in types" :value="type.type">{{ type.type }}</TOption>
					</TSelect>
				</td>
				<td>
					<NSRoutesSelector @add="addRoutes" @cancel="cancelRoutes" @change="changeRoutes(record, $event)"></NSRoutesSelector>
				</td>
				<td v-if="!isAddingRoutes">
					<TInputText type="text" style="width:10em" maxlength="512" v-model="record.value"/>
				</td>
				<td v-if="!isAddingRoutes">
					<TInputGroup>
						<TInputText type="text" v-model="record.ttl" style="width:5em" maxlength="8"/>
						<TInputGroupAddon>
							<span>秒</span>
						</TInputGroupAddon>
					</TInputGroup>
				</td>
				<td v-if="!isAddingRoutes" class="vertical-middle">
					<a href="" title="删除" @click.prevent="remove(index)"><i class="pi pi-remove"></i></a>
				</td>
			</tr>
		</table>
		<PlusButton size="small" type="button" @click.prevent="add"></PlusButton>
	</div>
</template>

<style scoped lang="postcss">

</style>