<script setup>

import {ref} from "vue"
import TOption from "@/components/ui/TOption.vue";
import TInputText from "@/components/ui/TInputText.vue";
import CodeLabel from "@/components/common/CodeLabel.vue";
import TSelect from "@/components/ui/TSelect.vue";

const props = defineProps(["v-oss-config", "v-params", "name"])

const {params, ossConfig} = (function () {
	let params = props.vParams
	if (params == null) {
		params = []
	}

	let ossConfig = props.vOssConfig
	if (ossConfig == null) {
		ossConfig = {
			bucketParam: "input",
			bucketName: "",
			bucketArgName: ""
		}
	} else {
		// 兼容以往
		if (ossConfig.bucketParam != null && ossConfig.bucketParam.length == 0) {
			ossConfig.bucketParam = "input"
		}
		if (ossConfig.options != null && ossConfig.options.bucketName != null && ossConfig.options.bucketName.length > 0) {
			ossConfig.bucketName = ossConfig.options.bucketName
		}
	}

	return {
		params: ref(params),
		ossConfig: ref(ossConfig)
	}
})()


</script>

<template>
	<tbody>
	<tr>
		<td>{{ name }}名称获取方式 *</td>
		<td>
			<TSelect name="bucketParam" v-model="ossConfig.bucketParam">
				<template v-for="param in params">
					<TOption :value="param.code" v-if="param.example.length == 0">{{ param.name.replace("\${optionName}", name) }}</TOption>
				</template>
				<template v-for="param in params">
					<TOption :value="param.code" v-if="param.example.length > 0">{{ param.name }} - {{ param.example }}</TOption>
				</template>
			</TSelect>
			<template v-for="param in params">
				<p class="comment" v-if="param.code == ossConfig.bucketParam">{{ param.description.replace("\${optionName}", name) }}</p>
			</template>
		</td>
	</tr>
	<tr v-if="ossConfig.bucketParam == 'input'">
		<td>{{ name }}名称 *</td>
		<td>
			<TInputText type="text" name="bucketName" maxlength="100" v-model="ossConfig.bucketName" class="w-full"/>
			<p class="comment">{{ name }}名称，类似于
				<CodeLabel>bucket-12345678</CodeLabel>
				。
			</p>
		</td>
	</tr>
	<tr v-if="ossConfig.bucketParam == 'arg'">
		<td>{{ name }}参数名称 *</td>
		<td>
			<TInputText type="text" name="bucketArgName" maxlength="100" v-model="ossConfig.bucketArgName" class="w-full"/>
			<p class="comment">{{ name }}参数名称，比如
				<CodeLabel>?myBucketName=BUCKET-NAME</CodeLabel>
				中的
				<CodeLabel>myBucketName</CodeLabel>
				。
			</p>
		</td>
	</tr>
	</tbody>
</template>

<style scoped>
</style>
