<template>
	<div class="repeat-setting">
		<div class="repeat-setting-item">
			<span class="label">{{ t("Canvas.angle") }}</span>
			<angle-tool
				:angle="angle"
				@input="(e) => emit('inputFillAngle', e)"
			/>
		</div>
		<p></p>
		<div class="repeat-setting-item">
			<span class="label">{{ t("Canvas.scale") }}</span>
			<slider
				:min="1"
				:max="1000"
				:step="1"
				is-input
				:tipFormatter="(v) => `${scale}%`"
				:value="scale"
				@input="inputFillScale"
			/>
		</div>
		<p></p>
		<div class="repeat-setting-item">
			<span class="label">Gap X</span>
			<slider
				:min="0"
				:max="1000"
				:step="1"
				is-input
				:tipFormatter="(v) => `${v}px`"
				:value="gapX"
				@input="(e) => emit('inputFill_Gap', e, gapY)"
				@change="(e) => emit('changeFill_Gap', e, gapY)"
			/>
		</div>
		<p></p>
		<div class="repeat-setting-item">
			<span class="label">Gap Y</span>
			<slider
				:min="0"
				:max="1000"
				:step="1"
				is-input
				:tipFormatter="(v) => `${v}px`"
				:value="gapY"
				@input="(e) => emit('inputFill_Gap', gapX, e)"
				@change="(e) => emit('changeFill_Gap', gapX, e)"
			/>
		</div>
		<p></p>
		<div class="repeat-setting-item">
			<span class="label">{{ t("Canvas.offset") }}</span>
			<offset-tool
				:top="(props.object.fill?.offsetY / props.object.height) * 100"
				:left="(props.object.fill?.offsetX / props.object.width) * 100"
				@input="(e) => emit('inputFillOffset', e)"
				@change="(e) => emit('changeFillOffset', e)"
			/>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, defineProps, defineEmits, computed } from "vue";
	import AngleTool from "./tools/AngleTool.vue";
	import OffsetTool from "./tools/OffsetTool.vue";
	import Slider from "./tools/Slider.vue";
	import { useI18n } from "vue-i18n";
	const { t } = useI18n();

	const props = defineProps({
		object: {
			required: true,
			type: Object,
		},
	});
	const angle = computed(() => props.object?.angle || 0);
	const scale = computed(() => {
		// let scaleValue = props.object?.scale/10;
		// return props.object?.scale/10;
		return props.object?.scale
	});
	const gapX = computed(() => props.object?.gapX || 0);
	const gapY = computed(() => props.object?.gapY || 0);
	const emit = defineEmits([
		"inputFillAngle",
		"changeFillAngle",
		"inputFillOffset",
		"changeFillOffset",
		"inputFillScale",
		"changeFillScale",
		"inputFill_Gap",
		"changeFill_Gap",
	]);
	const inputFillScale = (e) => {
		// const scale = e * 10;
		emit("inputFillScale", e);
	};
</script>

<style scoped lang="less">
	.repeat-setting {
		user-select: none;
		width: 228px;
		> .title {
			line-height: 35px;
			font-size: 14px;
			text-align: center;
			margin-top: -12px;
			margin-bottom: 3px;
		}
		> .repeat-setting-item {
			display: flex;
			align-items: center;
			margin-bottom: 10px;
			&:last-child {
				margin-bottom: 0;
			}
			&.offset {
				justify-content: center;
			}
			> .label {
				min-width: 68px;
				font-size: 12px;
			}
			&:not(.offset) > div {
				width: 120px;
				flex: 1;
			}
			> .slider {
				--slider-thumb-color1: #000;
				--slider-thumb-color2: #eee;
			}
		}
	}
</style>
