<template>
	<!-- 编辑素材 -->
	<div class="surface-edit">
		<p class="label">{{ $t('FlowCanvas.image') }}</p>
		<upload-file v-model="data.file" />
		<p class="label">{{ $t('FlowCanvas.mode') }}</p>
		<my-select v-model="data.mode" :list="modeList" />
		<p class="label">{{ $t('FlowCanvas.prompt') }}</p>
		<my-textarea v-model="data.prompt" />
	</div>
</template>

<script setup lang="ts">
	import { reactive, ref, onMounted } from 'vue'
	import myTextarea from '../../tools/my-textarea.vue'
	import uploadFile from '../../tools/upload-file.vue'
	import mySelect from '../../tools/my-select.vue'
	import { useI18n } from 'vue-i18n'
	const { t } = useI18n()
	const data = reactive({
		prompt: '',
		file: null,
		mode: 'Advanced',
	})
	const modeList = ref([
		{ value: 'Advanced', label: t('FlowCanvas.advancedMode') },
		{ value: 'Normal', label: t('FlowCanvas.normalMode') }
	])
	const getApiData = ()=>{
		return {
			mode: data.mode,
			surFaceUrl: data.file,
			userPrompt: data.prompt,
		}
	}
	defineExpose({ data,getApiData })
</script>

<style lang="less" scoped>
	.surface-edit {
	}
</style>
