<template>
	<!-- 转换为真实图 -->
	<div class="to-real-style">
		<p class="label">Prompt</p>
		<my-textarea v-model="data.prompt" />
		<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">Mode</p>
		<my-select v-model="data.mode" :list="modeList" />
		<p class="label">Size</p>
		<pixel-ratio-selection v-model="data.pixelRatio" />
	</div>
</template>

<script setup lang="ts">
	import { computed, ref, reactive, onMounted } from 'vue'
	import myTextarea from '../../tools/my-textarea.vue'
	import mySelect from '../../tools/my-select.vue'
	import pixelRatioSelection from '../../tools/pixel-ratio-selection.vue'
	const shortcutList = ref([
		{
			label: 'Change the...',
			value: 'Change the style to a realistic design. '
		},
		{
			label: 'Bright Colors...',
			value: 'Bright colors with modern patterns, change the style to a realistic furniture design. '
		},
		{
			label: 'Make the...',
			value: 'Make the structure more refined and balanced, change the style to a realistic furniture style. '
		},
		{
			label: 'Imagine...',
			value: 'Imagine this furniture with detailed fabric textures, change the style to a realistic design. '
		},
		{
			label: 'Wood Materials with...',
			value: 'Wood materials with natural oak texture and soft fabric, change the style to a realistic furniture design.'
		}
	])
	const modeList = ref([
		{ value: 'Advanced', label: 'Advanced' },
		{ value: 'Normal', label: 'Normal' }
	])
	const data = reactive({
		prompt: '',
		pixelRatio: '1:1',
		mode: 'Advanced',
	})

	const getApiData = ()=>{
		return {
			mode: data.mode,
			size: data.pixelRatio,
			userPrompt: data.prompt,
		}
	}

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

<style lang="less" scoped>
	.to-real-style {
		> .shortcut-list {
			display: flex;
			flex-wrap: wrap;
			gap: 10px 4px;
			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>
