<script setup>

import "@/lib/array.js"
import {ref} from "vue"
import PriorCheckbox from "@/components/common/PriorCheckbox.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import MoreOptionsIndicator from "@/components/common/MoreOptionsIndicator.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const props = defineProps(["v-access-log-config", "v-fields", "v-default-field-codes", "v-access-log-policies", "v-is-location", "v-is-group"])

const {accessLog, showAdvancedOptions} = (function () {
	// 初始化
	setTimeout(function () {
		changeFields()
		changePolicy()
	}, 100)

	let accessLog = {
		isPrior: false,
		isOn: false,
		fields: [],
		status1: true,
		status2: true,
		status3: true,
		status4: true,
		status5: true,

		storageOnly: false,
		storagePolicies: [],

		firewallOnly: false
	}
	if (props.vAccessLogConfig != null) {
		accessLog = props.vAccessLogConfig
	}

	props.vFields.forEach(function (v) {
		if (props.vAccessLogConfig == null) { // 初始化默认值
			v.isChecked = props.vDefaultFieldCodes.$contains(v.code)
		} else {
			v.isChecked = accessLog.fields.$contains(v.code)
		}
	})
	props.vAccessLogPolicies.forEach(function (v) {
		v.isChecked = accessLog.storagePolicies.$contains(v.id)
	})

	return {
		accessLog: ref(accessLog),
		showAdvancedOptions: ref(false)
	}
})()

const changeFields = function () {
	accessLog.value.fields = props.vFields.filter(function (v) {
		return v.isChecked
	}).map(function (v) {
		return v.code
	})
}

const changePolicy = function () {
	accessLog.value.storagePolicies = props.vAccessLogPolicies.filter(function (v) {
		return v.isChecked
	}).map(function (v) {
		return v.id
	})
}

const changeAdvanced = function (v) {
	showAdvancedOptions.value = v
}

</script>

<template>
	<div>
		<input type="hidden" name="accessLogJSON" :value="JSON.stringify(accessLog)"/>
		<DefinitionTable>
			<PriorCheckbox :v-config="accessLog" v-if="vIsLocation"></PriorCheckbox>
			<tbody v-show="!vIsLocation || accessLog.isPrior">
			<tr>
				<td class="title">启用访问日志</td>
				<td>
					<TCheckboxBinary v-model="accessLog.isOn"/>
				</td>
			</tr>
			</tbody>
			<tbody v-show="((!vIsLocation && !vIsGroup) || accessLog.isPrior) && accessLog.isOn">
			<tr>
				<td colspan="2">
					<MoreOptionsIndicator @change="changeAdvanced"></MoreOptionsIndicator>
				</td>
			</tr>
			</tbody>
			<tbody v-show="(!vIsLocation || accessLog.isPrior) && accessLog.isOn && showAdvancedOptions">
			<tr>
				<td>要存储的访问日志字段</td>
				<td>
					<div class="grid grid-cols-2 lg:grid-cols-3 gap-2">
						<div v-for="field in vFields">
							<TCheckboxBinary v-model="field.isChecked" @change="changeFields">{{ field.name }}</TCheckboxBinary>
						</div>
					</div>
				</td>
			</tr>
			<tr>
				<td>要存储的访问日志状态码</td>
				<td>
					<div class="label-group !gap-4">
						<TCheckboxBinary v-model="accessLog.status1">1xx</TCheckboxBinary>
						<TCheckboxBinary v-model="accessLog.status2">2xx</TCheckboxBinary>
						<TCheckboxBinary v-model="accessLog.status3">3xx</TCheckboxBinary>
						<TCheckboxBinary v-model="accessLog.status4">4xx</TCheckboxBinary>
						<TCheckboxBinary v-model="accessLog.status5">5xx</TCheckboxBinary>
					</div>
				</td>
			</tr>
			<tr>
				<td>只记录WAF相关日志</td>
				<td>
					<TCheckboxBinary v-model="accessLog.firewallOnly"></TCheckboxBinary>
					<p class="comment">选中后只记录WAF相关的日志。</p>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>
	</div>
</template>

<style scoped>
</style>
