// 页面动态加密配置
Vue.component("http-encryption-config-box", {
	props: ["v-encryption-config", "v-is-location", "v-is-group"],
	data: function () {
		let config = this.vEncryptionConfig

		return {
			config: config,
			htmlMoreOptions: false,
			javascriptMoreOptions: false,
			keyPolicyMoreOptions: false,
			cacheMoreOptions: false,
			encryptionMoreOptions: false
		}
	},
	methods: {
		isOn: function () {
			return ((!this.vIsLocation && !this.vIsGroup) || this.config.isPrior) && this.config.isOn
		}
	},
	template: `<div>
	<input type="hidden" name="encryptionJSON" :value="JSON.stringify(config)"/>
	<table class="ui table definition selectable" v-if="vIsLocation || vIsGroup">
		<prior-checkbox :v-config="config"></prior-checkbox>
	</table>
	
	<div v-show="(!vIsLocation && !vIsGroup) || config.isPrior">
		<div class="margin"></div>
		<table class="ui table definition selectable">
			<tbody>
				<tr>
					<td class="title">启用页面动态加密</td>
					<td>
						<div class="ui checkbox">
							<input type="checkbox" value="1" v-model="config.isOn"/>
							<label></label>
						</div>
						<p class="comment">启用后，将对 HTML 页面中的 JavaScript 进行动态加密，有效抵御批量爬虫和脚本工具。</p>
					</td>
				</tr>
				<tr v-show="config.isOn">
					<td colspan="2"><more-options-indicator v-model="encryptionMoreOptions" label="更多选项"></more-options-indicator></td>
				</tr>
			</tbody>
			<tbody v-show="encryptionMoreOptions">
				<tr>
					<td class="title">排除 URL</td>
					<td>
						<url-patterns-box v-model="config.excludeURLs"></url-patterns-box>
						<p class="comment">这些 URL 将跳过加密处理，支持正则表达式。</p>
					</td>
				</tr>
			</tbody>
		</table>

		<div v-show="config.isOn">
			<div class="margin"></div>
			<table class="ui table definition selectable">
				<tbody>
					<tr>
						<td class="title">HTML 加密</td>
						<td>
							<div class="ui checkbox">
								<input type="checkbox" value="1" v-model="config.html.isOn"/>
								<label></label>
							</div>
							<p class="comment">加密 HTML 页面中的 JavaScript 脚本。</p>
						</td>
					</tr>
					<tr v-show="config.html.isOn">
						<td colspan="2"><more-options-indicator v-model="htmlMoreOptions"></more-options-indicator></td>
					</tr>
				</tbody>
				<tbody v-show="htmlMoreOptions">
					<tr>
						<td class="title">加密内联脚本</td>
						<td>
							<div class="ui checkbox">
								<input type="checkbox" value="1" v-model="config.html.encryptInlineScripts"/>
								<label></label>
							</div>
							<p class="comment">加密 HTML 中的内联 &lt;script&gt; 标签内容。</p>
						</td>
					</tr>
					<tr>
						<td class="title">加密外部脚本</td>
						<td>
							<div class="ui checkbox">
								<input type="checkbox" value="1" v-model="config.html.encryptExternalScripts"/>
								<label></label>
							</div>
							<p class="comment">加密通过 src 属性引入的外部 JavaScript 文件。</p>
						</td>
					</tr>
					<tr>
						<td class="title">URL 匹配规则</td>
						<td>
							<url-patterns-box v-model="config.html.urlPatterns"></url-patterns-box>
							<p class="comment">如果填写了匹配规则，表示只对这些 URL 进行加密处理；如果不填则表示支持所有的 URL。</p>
						</td>
					</tr>
				</tbody>
			</table>

			<div class="margin"></div>
			<table class="ui table definition selectable">
				<tbody>
					<tr>
						<td class="title">JavaScript 文件加密</td>
						<td>
							<div class="ui checkbox">
								<input type="checkbox" value="1" v-model="config.javascript.isOn"/>
								<label></label>
							</div>
							<p class="comment">加密独立的 JavaScript 文件（.js 文件）。</p>
						</td>
					</tr>
					<tr v-show="config.javascript.isOn">
						<td colspan="2"><more-options-indicator v-model="javascriptMoreOptions"></more-options-indicator></td>
					</tr>
				</tbody>
				<tbody v-show="javascriptMoreOptions">
					<tr>
						<td class="title">URL 匹配规则</td>
						<td>
							<url-patterns-box v-model="config.javascript.urlPatterns"></url-patterns-box>
							<p class="comment">如果填写了匹配规则，表示只对这些 URL 进行加密处理；如果不填则表示支持所有的 URL。</p>
						</td>
					</tr>
				</tbody>
			</table>

			<div class="margin"></div>
			<table class="ui table definition selectable">
				<tbody>
					<tr>
						<td class="title">服务器端密钥</td>
						<td>
							<input type="text" v-model="config.keyPolicy.serverSecret" maxlength="128"/>
							<p class="comment">用于生成加密密钥的密码，建议使用复杂的随机字符串。默认密钥仅用于测试，生产环境请务必修改！</p>
						</td>
					</tr>
					<tr>
						<td colspan="2"><more-options-indicator v-model="keyPolicyMoreOptions" label="更多选项"></more-options-indicator></td>
					</tr>
				</tbody>
				<tbody v-show="keyPolicyMoreOptions">
					<tr>
						<td class="title">时间分片（秒）</td>
						<td>
							<input type="number" v-model.number="config.keyPolicy.timeBucket" min="30" max="300" step="10"/>
							<p class="comment">加密密钥每隔多少秒更换一次。时间越短越安全，但可能影响性能。建议 60-120 秒，默认 60 秒。</p>
						</td>
					</tr>
					<tr>
						<td class="title">IP CIDR 前缀长度</td>
						<td>
							<input type="number" v-model.number="config.keyPolicy.ipCIDR" min="16" max="32" step="1"/>
							<p class="comment">将用户 IP 地址的前多少位作为识别依据。例如设置为 24 时，192.168.1.1 和 192.168.1.2 会被视为同一用户。默认 24。</p>
						</td>
					</tr>
					<tr>
						<td class="title">简化 User-Agent</td>
						<td>
							<div class="ui checkbox">
								<input type="checkbox" value="1" v-model="config.keyPolicy.uaSimplify"/>
								<label></label>
							</div>
							<p class="comment">开启后，只识别浏览器类型（如 Chrome、Firefox），忽略版本号等细节，避免因浏览器自动更新导致解密失败。</p>
						</td>
					</tr>
				</tbody>
			</table>

			<div class="margin"></div>
			<table class="ui table definition selectable">
				<tbody>
					<tr>
						<td class="title">启用缓存</td>
						<td>
							<div class="ui checkbox">
								<input type="checkbox" value="1" v-model="config.cache.isOn"/>
								<label></label>
							</div>
							<p class="comment">开启后，相同内容的加密结果会被缓存，减少重复计算，提升响应速度。</p>
						</td>
					</tr>
					<tr v-show="config.cache.isOn">
						<td colspan="2"><more-options-indicator v-model="cacheMoreOptions" label="更多选项"></more-options-indicator></td>
					</tr>
				</tbody>
				<tbody v-show="cacheMoreOptions">
					<tr>
						<td class="title">缓存 TTL（秒）</td>
						<td>
							<input type="number" v-model.number="config.cache.ttl" min="30" max="300" step="10"/>
							<p class="comment">缓存的有效期，超过这个时间后缓存会自动失效。建议与上面的"时间分片"保持一致。默认 60 秒。</p>
						</td>
					</tr>
					<tr>
						<td class="title">最大缓存条目数</td>
						<td>
							<input type="number" v-model.number="config.cache.maxSize" min="100" max="10000" step="100"/>
							<p class="comment">最多缓存多少个加密结果。数量越大占用内存越多，建议根据服务器内存情况调整。默认 1000。</p>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	
	<div class="margin"></div>
</div>`
})