<script setup>

import {ref} from "vue"
import TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";
import MoreOptionsTbody from "@/components/common/MoreOptionsTbody.vue";
import PriorCheckbox from "@/components/common/PriorCheckbox.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import CodeLabel from "@/components/common/CodeLabel.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const props = defineProps(["v-usual-charsets", "v-all-charsets", "v-charset-config", "v-is-location", "v-is-group"])

const {charsetConfig, advancedVisible} = (function () {
	let charsetConfig = props.vCharsetConfig
	if (charsetConfig == null) {
		charsetConfig = {
			isPrior: false,
			isOn: false,
			charset: "",
			isUpper: false,
			force: false
		}
	}
	return {
		charsetConfig: ref(charsetConfig),
		advancedVisible: ref(false)
	}
})()

const changeAdvancedVisible = function (v) {
	advancedVisible.value = v
}


</script>

<template>
	<div>
		<input type="hidden" name="charsetJSON" :value="JSON.stringify(charsetConfig)"/>
		<DefinitionTable>
			<PriorCheckbox :v-config="charsetConfig" v-if="vIsLocation || vIsGroup"></PriorCheckbox>
			<tbody v-show="(!vIsLocation && !vIsGroup) || charsetConfig.isPrior">
			<tr>
				<td class="title">启用字符编码</td>
				<td>
					<TCheckboxBinary v-model="charsetConfig.isOn"/>
				</td>
			</tr>
			</tbody>
			<tbody v-show="((!vIsLocation && !vIsGroup) || charsetConfig.isPrior) && charsetConfig.isOn">
			<tr>
				<td class="title">选择字符编码</td>
				<td>
					<TSelect name="charset" v-model="charsetConfig.charset" filter>
						<TOption value="">[未选择]</TOption>
						<!-- TODO 实现optgroup -->
						<optgroup label="常用字符编码"></optgroup>
						<TOption v-for="charset in vUsualCharsets" :value="charset.charset">{{ charset.charset }}（{{ charset.name }}）</TOption>
						<optgroup label="全部字符编码"></optgroup>
						<TOption v-for="charset in vAllCharsets" :value="charset.charset">{{ charset.charset }}（{{ charset.name }}）</TOption>
					</TSelect>
				</td>
			</tr>
			</tbody>
			<MoreOptionsTbody @change="changeAdvancedVisible" v-if="((!vIsLocation && !vIsGroup) || charsetConfig.isPrior) && charsetConfig.isOn"></MoreOptionsTbody>
			<tbody v-show="((!vIsLocation && !vIsGroup) || charsetConfig.isPrior) && charsetConfig.isOn && advancedVisible">
			<tr>
				<td>强制替换</td>
				<td>
					<TCheckboxBinary v-model="charsetConfig.force"></TCheckboxBinary>
					<p class="comment">选中后，表示强制覆盖已经设置的字符集；不选中，表示如果源站已经设置了字符集，则保留不修改。</p>
				</td>
			</tr>
			<tr>
				<td>字符编码大写</td>
				<td>
					<TCheckboxBinary v-model="charsetConfig.isUpper"/>
					<p class="comment">选中后将指定的字符编码转换为大写，比如默认为
						<CodeLabel>utf-8</CodeLabel>
						，选中后将改为
						<CodeLabel>UTF-8</CodeLabel>
						。
					</p>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>
	</div>
</template>

<style scoped>
</style>
