<template>
	<!-- 添加印花 -->
	<div class="add-print">
		<p class="label">{{ $t('FlowCanvas.print') }}</p>
		<upload-file v-model="data.file" />
		<p class="label">{{ $t('FlowCanvas.settings') }}</p>
		<div class="settings">
			<div>
				<p class="label">{{ $t('FlowCanvas.angle') }}</p>
				<my-input
					v-model="data.setting.angle"
					type="number"
					after="°"
					:min="-180"
					:max="180"
					icon="angle"
					icon-size="8"
				/>
			</div>
			<div>
				<span class="label">{{ $t('FlowCanvas.scale') }}</span>
				<slider
					:min="1"
					:max="1000"
					:tipFormatter="(v) => `${v}%`"
					v-model="data.setting.scale"
				/>
			</div>
			<div>
				<span class="label">{{ $t('FlowCanvas.gapX') }}</span>
				<slider
					:min="0"
					:max="1000"
					:tipFormatter="(v) => `${v}px`"
					v-model="data.setting.gap.x"
				/>
			</div>
			<div>
				<span class="label">{{ $t('FlowCanvas.gapY') }}</span>
				<slider
					:min="0"
					:max="1000"
					:tipFormatter="(v) => `${v}px`"
					v-model="data.setting.gap.y"
				/>
			</div>
			<div>
				<span class="label">{{ $t('FlowCanvas.offset') }}</span>
				<offset-tool v-model="data.setting.offset" :show-dish="false" />
			</div>
			<div class="offset">
				<offset-tool v-model="data.setting.offset" :show-input="false" />
			</div>
		</div>
		<p class="label">{{ $t('FlowCanvas.prompt') }}</p>
		<my-textarea v-model="data.prompt" />
	</div>
</template>

<script setup lang="ts">
	import { reactive, onMounted } from 'vue'
	import myTextarea from '../../tools/my-textarea.vue'
	import uploadFile from '../../tools/upload-file.vue'
	import myInput from '../../tools/my-input.vue'
	import offsetTool from '../../tools/offset-tool.vue'
	import slider from '../../tools/slider.vue'

	const data = reactive({
		prompt: '',
		setting: {
			angle: 0,
			scale: 100,
			gap: {
				x: 0,
				y: 0
			},
			offset: {
				x: 50,
				y: 50
			}
		},
		file: null
	})

	defineExpose({ data })
</script>

<style lang="less" scoped>
	.add-print {
		> .settings {
			margin: 0 11px;
			> div {
				display: flex;
				align-items: center;
				margin-bottom: 10px;
				&:last-child {
					margin-bottom: 0;
				}
				&.offset {
					justify-content: center;
				}
				> .label {
					width: 55px;
					font-size: 10px;
				}
				&:not(.offset) > div {
					flex: 1;
				}
				> .slider {
					--slider-thumb-color1: #000;
					--slider-thumb-color2: #eee;
				}
			}
		}
	}
</style>
