<script setup>
import useUtils from "@/utils/utils.js"
import {inject, ref} from "vue"
import TDivider from "@/components/ui/TDivider.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import TButton from "@/components/ui/TButton.vue";
import Keyword from "@/components/common/Keyword.vue";
import ListTable from "@/components/common/ListTable.vue";
import Column from "primevue/column";
import CopyToClipboard from "@/components/common/CopyToClipboard.vue";

const utils = useUtils()

const Tea = inject("$Tea")

const props = defineProps(["v-items", "v-keyword", "v-show-search-button", "v-can-update"])

const emits = defineEmits(["update-item", "delete-item", "checked"])

const {items, keyword, selectedAll, hasSelectedItems} = (function () {
	return {
		items: ref(props.vItems),
		keyword: ref((props.vKeyword != null) ? props.vKeyword : ""),
		selectedAll: ref(false),
		hasSelectedItems: ref(false)
	}
})()

const updateItem = function (itemId) {
	emits("update-item", itemId)
}

const deleteItem = function (itemId) {
	emits("delete-item", itemId)
}

const viewLogs = function (itemId) {
	utils.popup("/waf/iplists/accessLogsPopup?itemId=" + itemId, {
		width: "50em",
		height: "30em"
	})
}

const changeSelectedAll = function () {
	items.value.forEach(item => {
		item.isChecked = selectedAll.value
	})

	hasSelectedItems.value = selectedAll.value
	emits("checked", hasSelectedItems.value)
}

const changeSelected = function () {
	hasSelectedItems.value = items.value.$find((k, item) => {
		return item.isChecked
	}) != null
	emits("checked", hasSelectedItems.value)
}

const deleteAll = function () {
	let itemIds = []
	items.value.forEach(function (item) {
		if (item.isChecked) {
			itemIds.push(item.id)
		}
	})
	if (itemIds.length == 0) {
		return
	}

	Tea.action("/waf/iplists/deleteItems")
		.post()
		.params({
			itemIds: itemIds
		})
		.success(function () {
			utils.successToast("批量删除成功", 1200, utils.reload)
		})
}

const formatSeconds = function (seconds) {
	if (seconds < 60) {
		return seconds + "秒"
	}
	if (seconds < 3600) {
		return Math.ceil(seconds / 60) + "分钟"
	}
	if (seconds < 86400) {
		return Math.ceil(seconds / 3600) + "小时"
	}
	return Math.ceil(seconds / 86400) + "天"
}

const cancelChecked = function () {
	hasSelectedItems.value = false
	selectedAll.value = false
	items.value.forEach((v) => {
		v.isChecked = false
	})
	emits("checked", hasSelectedItems.value)
}

</script>

<template>
	<div>
		<div v-show="hasSelectedItems">
			<TButton secondary="" outlined type="button" @click.prevent="cancelChecked">取消所选</TButton> &nbsp;
			<TButton secondary="" outlined @click.prevent="deleteAll">批量删除所选</TButton>
		</div>

		<div v-if="items.length > 0" class="mt-4">
			<ListTable :items="items">
				<Column style="width: 1em" frozen>
					<template #header>
						<TCheckboxBinary v-model="selectedAll" @change="changeSelectedAll"/>
					</template>
					<template #body="{data:item}">
						<TCheckboxBinary v-model="item.isChecked" @change="changeSelected"/>
					</template>
				</Column>
				<Column header="IP" class="ip-column" frozen>
					<template #body="{data:item}">
						<span v-if="item.type != 'all'" :class="{green: item.list != null && item.list.type == 'white'}">
							<span v-if="item.value != null && item.value.length > 0"><Keyword :v-word="keyword">{{ item.value }}</Keyword> <span class="small red" v-if="item.isRead != null && !item.isRead">&nbsp;New&nbsp;</span></span>
							<span v-else>
								<Keyword :v-word="keyword">{{ item.ipFrom }}</Keyword> <span> <span class="small red" v-if="item.isRead != null && !item.isRead">&nbsp;New&nbsp;</span>&nbsp;<a :href="'/servers/iplists?ip=' + item.ipFrom" v-if="vShowSearchButton" title="搜索此IP"><span><i class="icon search small" style="color: #ccc"></i></span></a></span>
								<span v-if="item.ipTo.length > 0"> - <Keyword :v-word="keyword">{{ item.ipTo }}</Keyword></span>
							</span>
						</span>

						<div v-if="item.region != null && item.region.length > 0">
							<span class="grey small">{{ item.region }}</span>
							<span v-if="item.isp != null && item.isp.length > 0 && item.isp != '内网IP'" class="grey small"><span class="disabled">|</span> {{ item.isp }}</span>
						</div>
						<div v-else-if="item.isp != null && item.isp.length > 0 && item.isp != '内网IP'">
							<span class="grey small">{{ item.isp }}</span></div>

						<div v-if="item.createdTime != null">
							<span class="small grey">添加于 {{ item.createdTime }}
								<span v-if="item.list != null && item.list.id > 0">
									@

									<a :href="'/waf/iplists/list?listId=' + item.list.id" v-if="item.policy.id == 0"><span>[<span v-if="item.list.type == 'black'">黑</span><span v-if="item.list.type == 'white'">白</span><span v-if="item.list.type == 'grey'">灰</span>名单：{{ item.list.name }}]</span></a>
									<span v-else>[<span v-if="item.list.type == 'black'">黑</span><span v-if="item.list.type == 'white'">白</span><span v-if="item.list.type == 'grey'">灰</span>名单：{{ item.list.name }}]</span>

									<span class="ml-1" v-if="item.policy.id > 0">
										<span v-if="item.policy.server != null">
											<a :href="'/servers/server/settings/waf/ipadmin/allowList?serverId=' + item.policy.server.id + '&firewallPolicyId=' + item.policy.id" v-if="item.list.type == 'white'">[网站：{{ item.policy.server.name }}]</a>
											<a :href="'/servers/server/settings/waf/ipadmin/denyList?serverId=' + item.policy.server.id + '&firewallPolicyId=' + item.policy.id" v-if="item.list.type == 'black'">[网站：{{ item.policy.server.name }}]</a>
											<a :href="'/servers/server/settings/waf/ipadmin/greyList?serverId=' + item.policy.server.id + '&firewallPolicyId=' + item.policy.id" v-if="item.list.type == 'grey'">[网站：{{ item.policy.server.name }}]</a>
										</span>
									</span>
								</span>
							</span>
						</div>
					</template>
				</Column>
				<Column header="类型" class="normal-value-column">
					<template #body="{data:item}">
						<span v-if="item.type.length == 0">IPv4</span>
						<span v-else-if="item.type == 'ipv4'">IPv4</span>
						<span v-else-if="item.type == 'ipv6'">IPv6</span>
						<span v-else-if="item.type == 'all'"><strong>所有IP</strong></span>
					</template>
				</Column>
				<Column header="级别" class="normal-value-column">
					<template #body="{data:item}">
						<span v-if="item.eventLevelName != null && item.eventLevelName.length > 0">{{ item.eventLevelName }}</span>
						<span v-else class="disabled">-</span>
					</template>
				</Column>
				<Column header="过期时间" class="datetime-column">
					<template #body="{data:item}">
						<div v-if="item.expiredTime.length > 0">
							{{ item.expiredTime }}
							<div v-if="item.isExpired && item.lifeSeconds == null" class="mt-1">
								<span class="small red">已过期</span>
							</div>
							<div v-if="item.lifeSeconds != null" class="mt-1">
								<span class="small grey" v-if="item.lifeSeconds > 0">{{ formatSeconds(item.lifeSeconds) }}</span>
								<span class="small red" v-if="item.lifeSeconds < 0">已过期</span>
							</div>
						</div>
						<span v-else class="disabled">不过期</span>
					</template>
				</Column>
				<Column header="备注" class="title-column">
					<template #body="{data:item}">
						<span v-if="item.reason.length > 0">{{ item.reason }}</span>
						<span v-else class="disabled">-</span>

						<div class="mt-1" v-if="item.sourceServer != null && item.sourceServer.id > 0">
							<a :href="'/servers/server?serverId=' + item.sourceServer.id"><span class="small flex items-center gap-2"><i class="icon clone"></i><span>{{ item.sourceServer.name }}</span></span></a>
						</div>
						<div class="mt-1" v-if="item.sourcePolicy != null && item.sourcePolicy.id > 0">
							<a :href="'/servers/server/settings/waf/group?serverId=' + item.sourcePolicy.serverId + '&firewallPolicyId=' + item.sourcePolicy.id + '&type=inbound&groupId=' + item.sourceGroup.id + '#set' + item.sourceSet.id" v-if="item.sourcePolicy.serverId > 0"><span class="small flex items-center gap-2"><i class="icon shield"></i><span>{{ item.sourcePolicy.name }} &raquo; {{ item.sourceGroup.name }} &raquo; {{ item.sourceSet.name }}</span></span></a>
						</div>
						<div class="mt-1" v-if="item.sourceURL != null && item.sourceURL.length > 0">
							<span class="small flex items-center gap-1"><i class="pi pi-link small"></i> {{ item.sourceURL }} <CopyToClipboard :text="item.sourceURL" tooltip="复制URL" class="flex"></CopyToClipboard> </span>
						</div>
						<div v-if="item.sourceUserAgent != null && item.sourceUserAgent.length > 0" class="mt-1">
							<span class="small flex items-center gap-1"><i class="pi pi-desktop small"></i> {{ item.sourceUserAgent }} <CopyToClipboard :text="item.sourceUserAgent" tooltip="复制UserAgent" class="flex"></CopyToClipboard> </span>
						</div>
					</template>
				</Column>
				<Column header="操作" class="two op" frozen align-frozen="right">
					<template #body="{data:item}">
						<!--<a href="" @click.prevent="viewLogs(item.id)">日志</a> &nbsp;-->
						<a href="" @click.prevent="updateItem(item.id)" v-show="vCanUpdate">修改</a> &nbsp;
						<a href="" @click.prevent="deleteItem(item.id)">删除</a>
					</template>
				</Column>
			</ListTable>
		</div>
	</div>
</template>

<style scoped>
</style>
