<script setup>

import "@/lib/array.js"
import useUtils from "@/utils/utils.js"
import {inject, onMounted, ref} from "vue"
import TLabel from "@/components/ui/TLabel.vue";
import JSPage from "@/components/common/JSPage.vue";
import PlusButton from "@/components/common/PlusButton.vue";
import ListTable from "@/components/common/ListTable.vue";
import TColumn from "@/components/ui/TColumn.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const utils = useUtils()

const Tea = inject("$Tea")

const props = defineProps(["v-objects", "v-user-id"])

const serverPageRef = ref()
const {userId, objects, objectCodes, isAdding, servers, serversIsLoading} = (function () {
	let objects = props.vObjects
	if (objects == null) {
		objects = []
	}

	let objectCodes = []
	objects.forEach(function (v) {
		objectCodes.push(v.code)
	})

	return {
		userId: ref(props.vUserId),
		objects: ref(objects),
		objectCodes: ref(objectCodes),
		isAdding: ref(true),

		servers: ref([]),
		serversIsLoading: ref(false)
	}
})()

const add = function () {
	isAdding.value = true
}

const cancel = function () {
	isAdding.value = false
}

const remove = function (index) {
	utils.confirm("确定要删除此防护对象吗？", function () {
		objects.value.$remove(index)
		notifyChange()
	})
}

const removeObjectCode = function (objectCode) {
	let index = -1
	objectCodes.value.forEach(function (v, k) {
		if (objectCode == v) {
			index = k
		}
	})
	if (index >= 0) {
		objects.value.$remove(index)
		notifyChange()
	}
}

const getUserServers = function (page) {
	serversIsLoading.value = true
	Tea.action(".userServers")
		.post()
		.params({
			userId: userId.value,
			page: page,
			pageSize: 5
		})
		.success(function (resp) {
			servers.value = resp.data.servers

			serverPageRef.value.updateMax(resp.data.page.max)
			serversIsLoading.value = false
		})
		.error(function () {
			serversIsLoading.value = false
		})
}

const changeServerPage = function (page) {
	getUserServers(page)
}

const selectServerObject = function (server) {
	if (existObjectCode("server:" + server.id)) {
		return
	}

	objects.value.push({
		"type": "server",
		"code": "server:" + server.id,

		"id": server.id,
		"name": server.name
	})
	notifyChange()
}

const notifyChange = function () {
	let newObjectCodes = []
	objects.value.forEach(function (v) {
		newObjectCodes.push(v.code)
	})
	objectCodes.value = newObjectCodes
}

const existObjectCode = function (objectCode) {
	let found = false
	objects.value.forEach(function (v) {
		if (v.code == objectCode) {
			found = true
		}
	})
	return found
}

onMounted(() => {
	getUserServers(1)
})

</script>

<template>
	<div>
		<input type="hidden" name="objectCodesJSON" :value="JSON.stringify(objectCodes)"/>

		<!-- 已有对象 -->
		<div>
			<div v-if="objects.length == 0"><span class="grey">暂时还没有设置任何防护对象。</span></div>
			<div v-if="objects.length > 0">
				<DefinitionTable>
					<tbody>
					<tr>
						<td class="title">已选中防护对象</td>
						<td>
							<div class="label-group">
								<TLabel outlined="" v-for="(object, index) in objects">
									<span v-if="object.type == 'server'">网站：{{ object.name }}</span>
									&nbsp;
									<a href="" title="删除" @click.prevent="remove(index)"><i class="pi pi-remove small"></i></a>
								</TLabel>
							</div>
						</td>
					</tr>
					</tbody>
				</DefinitionTable>
			</div>
		</div>
		<div class="margin"></div>

		<!-- 添加表单 -->
		<div v-if="isAdding">
			<DefinitionTable>
				<tbody>
				<tr>
					<td class="title">对象类型</td>
					<td>网站</td>
				</tr>
				<!-- 网站列表 -->
				<tr>
					<td>网站列表</td>
					<td>
						<span v-if="serversIsLoading">加载中...</span>
						<div v-if="!serversIsLoading && servers.length == 0">暂时还没有可选的网站。</div>
						<div v-show="!serversIsLoading && servers.length > 0">
							<ListTable :items="servers">
								<TColumn header="网站名称">
									<template #body="{data: server}">
										{{ server.name }}
									</template>
								</TColumn>
								<TColumn header="操作" class="one op">
									<template #body="{data: server}">
										<a href="" @click.prevent="selectServerObject(server)" v-if="!existObjectCode('server:' + server.id)">选中</a>
										<a href="" @click.prevent="removeObjectCode('server:' + server.id)" v-else><span class="red">取消</span></a>
									</template>
								</TColumn>
							</ListTable>
						</div>

						<JSPage ref="serverPageRef" @change="changeServerPage"></JSPage>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>
		</div>

		<!-- 添加按钮 -->
		<div v-if="!isAdding">
			<PlusButton size="small" type="button" @click.prevent="add"></PlusButton>
		</div>
	</div>
</template>

<style scoped>
</style>
