<template>
	<!-- 场景构图 -->
	<div class="scene-composition">
		<p class="label">{{ $t('FlowCanvas.prompt') }}</p>
		<my-textarea v-model="data.prompt" />
		<p class="label">{{ $t('FlowCanvas.mode') }}</p>
		<my-select v-model="data.mode" :list="modeList" />
		<p class="label">{{ $t('FlowCanvas.chooseStyle') }}</p>
		<div class="style-list">
			<div
				class="item"
				v-for="v in styleList"
				:key="v.value"
				:class="{ active: data.styles.includes(v.value) }"
				@click="onClickStyle(v.value)"
			>
				<span class="icon">
					<svg-icon name="add" color="#0D0D0D" size="8" size-unit="px" />
				</span>
				<span class="label">{{ v.label }}</span>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, ref, reactive, onMounted } from 'vue'
	import myTextarea from '../../tools/my-textarea.vue'
	import { useI18n } from 'vue-i18n'
	const { t } = useI18n()
	const styleList = ref([
		{ label: t('FlowCanvas.colorful'), value: 'Colorful' },
		{ label: t('FlowCanvas.minimalist'), value: 'Minimalist' },
		{ label: t('FlowCanvas.modernist'), value: 'Modernist' },
		{ label: t('FlowCanvas.bauhaus'), value: 'Bauhaus' },
		{ label: t('FlowCanvas.mintage'), value: 'Mintage' },
		{ label: t('FlowCanvas.industrial'), value: 'Industrial' },
		{ label: t('FlowCanvas.futuristic'), value: 'Futuristic' },
		{ label: t('FlowCanvas.elegant'), value: 'Elegant' },
		{ label: t('FlowCanvas.organic'), value: 'Organic' },
		{ label: t('FlowCanvas.calm'), value: 'Calm' },
		{ label: t('FlowCanvas.abstract'), value: 'Abstract' },
		{ label: t('FlowCanvas.kitschCore'), value: 'Kitsch-core' },
		{ label: t('FlowCanvas.sophisticated'), value: 'Sophisticated' },
		{ label: t('FlowCanvas.maximalism'), value: 'Maximalism' },
		{ label: t('FlowCanvas.clean'), value: 'Clean' },
		{ label: t('FlowCanvas.brightColors'), value: 'Bright Colors' },
		{ label: t('FlowCanvas.luxurious'), value: 'Luxurious' },
		{ label: t('FlowCanvas.boldColors'), value: 'Bold Colors' },
		{ label: t('FlowCanvas.brutalism'), value: 'Brutalism' }
	])
	const data = reactive({
		prompt: '',
		styles: ['Colorful', 'Modernist'],
		mode: 'Advanced',
	})
	const modeList = ref([
		{ value: 'Advanced', label: t('FlowCanvas.advancedMode') },
		{ value: 'Normal', label: t('FlowCanvas.normalMode') },
	])
	const onClickStyle = (value: string) => {
		if (data.styles.includes(value)) {
			data.styles = data.styles.filter((v) => v !== value)
		} else if(data.styles.length < 5){
			data.styles.push(value)
		}
	}
	const getApiData = ()=>{
		return {
			styles: data.styles,
			userPrompt: data.prompt,
			mode: data.mode,
		}
	}
	defineExpose({ data, getApiData })
</script>

<style lang="less" scoped>
	.scene-composition {
		> .style-list {
			display: flex;
			flex-wrap: wrap;
			gap: 8.29px 5.5px;
			user-select: none;
			> .item {
				cursor: pointer;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 5px 7px;
				font-family: Medium;
				border-radius: 20px;
				font-size: 8.29px;
				border: 1px solid #e4e4e7;
				color: #000;
				> .icon {
					margin-right: 4px;
				}
				&.active {
					border-color: #0095ff;
					background-color: rgba(0, 149, 255, 0.05);
				}
			}
		}
	}
</style>
