<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...'
		},
		{
			label: 'Bright Colors...',
			value: 'Bright Colors...'
		},
		{
			label: 'Make the...',
			value: 'Make the...'
		},
		{
			label: 'Imagine...',
			value: 'Imagine...'
		},
		{
			label: 'Wood Materials with...',
			value: 'Wood Materials with...'
		}
	])
	const modeList = ref([
		{ value: 'Fast', label: 'Fast' },
		{ value: 'Normal', label: 'Normal' }
	])
	const data = reactive({
		prompt: '',
		pixelRatio: '1:1',
		mode: 'Normal'
	})

	defineExpose({ data })
</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>
