<template>
	<!-- 转换为真实图 -->
	<div class="to-real-style">
		<p class="label">{{ t('FlowCanvas.prompt') }}</p>
		<my-textarea v-model="data.prompt" :placeholder="$t('FlowCanvas.toRealVariantsPlaceholder')" />
		<div class="shortcut-list">
			<div
				class="item"
				v-for="v in shortcutList"
				:key="v.value"
				@click="data.prompt = v.value"
			>
				{{ v.label }}
			</div>
		</div>
		<!-- <p class="label">{{ t('FlowCanvas.mode') }}</p>
		<my-select v-model="data.mode" :list="modeList" /> -->
		<p class="label">{{ t('FlowCanvas.size') }}</p>
		<pixel-ratio-selection v-model="data.pixelRatio" />
	</div>
</template>

<script setup lang="ts">
	import { inject, ref, reactive, useAttrs } from 'vue'
	import myTextarea from '../../tools/my-textarea.vue'
	import mySelect from '../../tools/my-select.vue'
	import pixelRatioSelection from '../../tools/pixel-ratio-selection.vue'
	import { useI18n } from 'vue-i18n'
	const { t } = useI18n()
	const shortcutList = ref([
		{
			label: t('FlowCanvas.toRealVariantsShortcut1Label'),
			value: t('FlowCanvas.toRealVariantsShortcut1Value')
		},
		{
			label: t('FlowCanvas.toRealVariantsShortcut2Label'),
			value: t('FlowCanvas.toRealVariantsShortcut2Value')
		},
		{
			label: t('FlowCanvas.toRealVariantsShortcut3Label'),
			value: t('FlowCanvas.toRealVariantsShortcut3Value')
		},
		{
			label: t('FlowCanvas.toRealVariantsShortcut4Label'),
			value: t('FlowCanvas.toRealVariantsShortcut4Value')
		},
		{
			label: t('FlowCanvas.toRealVariantsShortcut5Label'),
			value: t('FlowCanvas.toRealVariantsShortcut5Value')
		}
	])
	const stateManager = inject('stateManager') as any
	const attrs = useAttrs()
	const modeList = ref([
		{ value: 'Advanced', label: 'Advanced' },
		{ value: 'Normal', label: 'Normal' }
	])
	const data = reactive({
		prompt: '',
		pixelRatio: '1:1',
		mode: 'Advanced',
	})

	const getApiData = ()=>{
		let superior = stateManager.getNodeById(attrs.node?.data?.superiorID)
		// let {superiorGenerateImg} = attrs
		return {
			mode: data.mode,
			size: data.pixelRatio,
			userPrompt: data.prompt,
			original3dUrl: superior?.data?.superiorGenerateImg,
		}
	}

	defineExpose({ data, getApiData })
</script>

<style lang="less" scoped>
	.to-real-style {
		> .shortcut-list {
			display: flex;
			flex-wrap: wrap;
			gap: 10px 2px;
			user-select: none;
			> .item {
				display: flex;
				align-items: center;
				padding: 5px 3px;
				font-family: Medium;
				border-radius: 3px;
				font-size: 10px;
				border: 1px solid #e4e4e7;
				background: #f0f0f0;
				cursor: pointer;
			}
		}
	}
</style>
