<script setup>

import {ref} from "vue"
import PriorCheckbox from "@/components/common/PriorCheckbox.vue";
import CodeLabel from "@/components/common/CodeLabel.vue";
import MoreOptionsIndicator from "@/components/common/MoreOptionsIndicator.vue";
import URLPatternsBox from "@/components/common/URLPatternsBox.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const props = defineProps(["modelValue", "v-is-location", "v-is-group"])

const {config, encryptingConfig, encryptingMoreOptionsVisible} = (function () {
	let config = props.modelValue
	if (config == null) {
		config = {
			isPrior: false
		}
	}

	let encryptingConfig = config.encrypting
	if (encryptingConfig == null) {
		encryptingConfig = {
			isOn: false,
			onlyURLPatterns: [],
			exceptURLPatterns: []
		}
		config.encrypting = encryptingConfig
	}

	return {
		config: ref(config),

		encryptingConfig: ref(encryptingConfig),
		encryptingMoreOptionsVisible: ref(false)
	}
})()

const isOn = function () {
	return ((!props.vIsLocation && !props.vIsGroup) || config.value.isPrior)
}

const showEncryptingMoreOptions = function () {
	encryptingMoreOptionsVisible.value = !encryptingMoreOptionsVisible.value
}


</script>

<template>
	<div>
		<input type="hidden" name="hlsJSON" :value="JSON.stringify(config)"/>
		<DefinitionTable v-show="vIsLocation || vIsGroup">
			<PriorCheckbox :v-config="config" v-if="vIsLocation || vIsGroup"></PriorCheckbox>
		</DefinitionTable>

		<DefinitionTable v-show="isOn()">
			<tbody>
			<tr>
				<td class="title">启用HLS加密</td>
				<td>
					<TCheckboxBinary v-model="encryptingConfig.isOn"></TCheckboxBinary>
					<p class="comment">启用后，系统会自动在
						<CodeLabel>.m3u8</CodeLabel>
						文件中加入
						<CodeLabel>#EXT-X-KEY:METHOD=AES-128...</CodeLabel>
						，并将其中的
						<CodeLabel>.ts</CodeLabel>
						文件内容进行加密。
					</p>
				</td>
			</tr>
			</tbody>
			<tbody v-show="encryptingConfig.isOn">
			<tr>
				<td colspan="2">
					<MoreOptionsIndicator @change="showEncryptingMoreOptions"></MoreOptionsIndicator>
				</td>
			</tr>
			</tbody>
			<tbody v-show="encryptingConfig.isOn && encryptingMoreOptionsVisible">
			<tr>
				<td>例外URL</td>
				<td>
					<URLPatternsBox v-model="encryptingConfig.exceptURLPatterns"></URLPatternsBox>
					<p class="comment">如果填写了例外URL，表示这些URL跳过不做处理。</p>
				</td>
			</tr>
			<tr>
				<td>限制URL</td>
				<td>
					<URLPatternsBox v-model="encryptingConfig.onlyURLPatterns"></URLPatternsBox>
					<p class="comment">如果填写了限制URL，表示只对这些URL进行加密处理；如果不填则表示支持所有的URL。</p>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>
	</div>
</template>

<style scoped>
</style>
