<script setup>
import TInputText from "@/components/ui/TInputText.vue";
import CodeLabel from "@/components/common/CodeLabel.vue";
import TOption from "@/components/ui/TOption.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TInputGroupAddon from "@/components/ui/TInputGroupAddon.vue";
import TInputGroup from "@/components/ui/TInputGroup.vue";
import HTTPOSSBucketParams from "@/components/server/HTTPOSSBucketParams.vue"

const props = defineProps(["ctx"])
</script>

<template>
	<!-- 腾讯云COS -->
	<tbody v-if="ctx.protocol == 'oss:tencentCOS'">
	<tr>
		<td>密钥ID *<br/><em>(Secret Id)</em></td>
		<td>
			<TInputText type="text" name="tencentCOSSecretId" maxlength="100" class="w-full"/>
			<p class="comment">访问存储桶需要的密钥ID。</p>
		</td>
	</tr>
	<tr>
		<td>密钥Key *<br/><em>(Secret Key)</em></td>
		<td>
			<TInputText type="text" name="tencentCOSSecretKey" maxlength="100" class="w-full"/>
			<p class="comment">访问存储桶需要的密钥Key。</p>
		</td>
	</tr>
	<tr>
		<td>所属区域代号 *</td>
		<td>
			<TInputText type="text" name="tencentCOSRegion" maxlength="100" class="w-full"/>
			<p class="comment">COS服务所属区域代号，类似于
				<CodeLabel>ap-beijing</CodeLabel>
				。
			</p>
		</td>
	</tr>
	</tbody>

	<!-- 阿里云OSS -->
	<tbody v-if="ctx.protocol == 'oss:aliyunOSS'">
	<tr>
		<td>密钥ID *<br/><em>(AccessKey Id)</em></td>
		<td>
			<TInputText type="text" name="aliyunOSSAccessKeyId" maxlength="100" class="w-full"/>
			<p class="comment">访问存储空间需要的密钥ID。</p>
		</td>
	</tr>
	<tr>
		<td>密钥Key *<br/><em>(AccessKey Secret)</em></td>
		<td>
			<TInputText type="text" name="aliyunOSSAccessKeySecret" maxlength="100" class="w-full"/>
			<p class="comment">访问存储空间需要的密钥Key。</p>
		</td>
	</tr>
	<tr>
		<td>地域节点 *</td>
		<td>
			<TInputText type="text" name="aliyunOSSEndpoint" maxlength="100" class="w-full"/>
			<p class="comment">地域节点域名（Endpoint），类似于
				<CodeLabel>oss-cn-shanghai.aliyuncs.com</CodeLabel>
				。
			</p>
		</td>
	</tr>
	</tbody>

	<!-- 华为云 -->
	<tbody v-if="ctx.protocol == 'oss:huaweiOBS'">
	<tr>
		<td>密钥ID *<br/><em>(AccessKey Id)</em></td>
		<td>
			<TInputText type="text" name="huaweiOBSAccessKeyId" maxlength="100" class="w-full"/>
			<p class="comment">访问存储桶需要的密钥ID。</p>
		</td>
	</tr>
	<tr>
		<td>密钥Key *<br/><em>(AccessKey Secret)</em></td>
		<td>
			<TInputText type="text" name="huaweiOBSAccessKeySecret" maxlength="100" class="w-full"/>
			<p class="comment">访问存储桶需要的密钥Key。</p>
		</td>
	</tr>
	<tr>
		<td>区域Endpoint *</td>
		<td>
			<TInputGroup>
				<TInputGroupAddon>
					<span>https://</span>
				</TInputGroupAddon>
				<TInputText type="text" name="huaweiOBSEndpoint" maxlength="100" class="w-full"/>
			</TInputGroup>
			<p class="comment">区域Endpoint域名，类似于
				<CodeLabel>obs.cn-north-4.myhuaweicloud.com</CodeLabel>
				。
			</p>
		</td>
	</tr>
	</tbody>

	<!-- 百度云 -->
	<tbody v-if="ctx.protocol == 'oss:baiduBOS'">
	<tr>
		<td>Access Key *</td>
		<td>
			<TInputText type="text" name="baiduBOSAccessKey" maxlength="100" class="w-full"/>
			<p class="comment">访问Bucket需要的Access Key。</p>
		</td>
	</tr>
	<tr>
		<td>Secret Key *</td>
		<td>
			<TInputText type="text" name="baiduBOSSecretKey" maxlength="100" class="w-full"/>
			<p class="comment">访问存储桶需要的Secret Key。</p>
		</td>
	</tr>
	<tr>
		<td>区域Endpoint *</td>
		<td>
			<TInputGroup>
				<TInputGroupAddon>
					<span>https://</span>
				</TInputGroupAddon>
				<TInputText type="text" name="baiduBOSEndpoint" maxlength="100" class="w-full"/>
			</TInputGroup>
			<p class="comment">区域Endpoint域名，类似于
				<CodeLabel>bj.bcebos.com</CodeLabel>
				。
			</p>
		</td>
	</tr>
	</tbody>

	<!-- 七牛云 -->
	<tbody v-if="ctx.protocol == 'oss:qiniuKodo'">
	<tr>
		<td>AccessKey *<br/><em>(AK)</em></td>
		<td>
			<TInputText type="text" name="qiniuKodoAccessKey" maxlength="100" class="w-full"/>
			<p class="comment">访问存储空间需要的AccessKey。</p>
		</td>
	</tr>
	<tr>
		<td>SecretKey *<br/><em>(SK)</em></td>
		<td>
			<TInputText type="text" name="qiniuKodoSecretKey" maxlength="100" class="w-full"/>
			<p class="comment">访问存储空间需要的SecretKey。</p>
		</td>
	</tr>
	<tr>
		<td>访问域名 *</td>
		<td>
			<div class="ui fields inline">
				<div class="ui field">
					<TSelect name="qiniuKodoProtocol">
						<TOption value="http">http://</TOption>
						<TOption value="https">https://</TOption>
					</TSelect>
				</div>
				<div class="ui field">
					<TInputText type="text" name="qiniuKodoDomain" placeholder="比如 example.com" style="width: 20em"/>
				</div>
			</div>
		</td>
	</tr>
	<tr>
		<td>访问控制</td>
		<td>
			<TSelect name="qiniuKodoIsPublic">
				<TOption value="0">私有</TOption>
				<TOption value="1">公开</TOption>
			</TSelect>
		</td>
	</tr>
	</tbody>

	<!-- Amazon S3 -->
	<tbody v-if="ctx.protocol == 'oss:amazonS3' || ctx.protocol == 'oss:b2'">
	<tr>
		<td>密钥ID *<br/><em>(AK)</em></td>
		<td>
			<TInputText type="text" name="amazonS3AccessKeyId" maxlength="100" class="w-full"/>
			<p class="comment">访问存储桶需要的密钥ID。</p>
		</td>
	</tr>
	<tr>
		<td>密钥Key *<br/><em>(SK)</em></td>
		<td>
			<TInputText type="text" name="amazonS3AccessKeySecret" maxlength="100" class="w-full"/>
			<p class="comment">访问存储桶需要的密钥Key。</p>
		</td>
	</tr>
	<tr>
		<td>区域代号 *<br/><em>(Region)</em></td>
		<td>
			<TInputText type="text" name="amazonS3Region" maxlength="100" class="w-full"/>
			<p class="comment">所属区域代号，类似于
				<CodeLabel>us-east-2</CodeLabel>
				。
			</p>
		</td>
	</tr>
	<tr>
		<td>Endpoint <span v-if="ctx.protocol != 'oss:amazonS3'">*</span></td>
		<td>
			<TInputText type="text" name="amazonS3Endpoint" maxlength="100" class="w-full"/>
			<p class="comment">Endpoint域名或URL，只有非AWS应用时才需要填写。</p>
		</td>
	</tr>
	<tr>
		<td>Endpoint中存储桶访问样式</td>
		<td>
			<TSelect name="bucketAddressStyle">
				<TOption value="path">路径</TOption>
				<TOption value="domain">子域名</TOption>
			</TSelect>
		</td>
	</tr>
	</tbody>

	<!-- 存储桶名称 -->
	<template v-for="ossType in ctx.ossTypes">
		<HTTPOSSBucketParams v-if="ctx.protocol == ossType.code" :v-params="ctx.ossBucketParams" :name="ossType.bucketOptionName"></HTTPOSSBucketParams>
	</template>

</template>
