<template>
	<div class="zoom">
		<span class="icon" @click="onHome" v-if="isHome"><svg-icon name="home" size="14" /></span>
		<span class="icon" @click="zoomIn"><svg-icon name="add" size="14" /></span>
		<span class="value">{{ Math.round(zoom * 100) }}%</span>
		<span class="icon" @click="zoomOut"><svg-icon name="sub" size="14" /></span>
	</div>
</template>

<script setup lang="ts">
	import { ref, watch } from 'vue'
	const props = defineProps({
		zoom: { default: 1, type: Number },
		step: { default: 0.1, type: Number },
		isHome: { default: false, type: Boolean }
	})
	const emit = defineEmits(['home', 'add', 'sub'])
	const onHome = () => {
		emit('home')
	}
	const zoomIn = () => {
		emit('add', Number(props.zoom) + props.step)
	}
	const zoomOut = () => {
		emit('sub', Number(props.zoom) - props.step)
	}
</script>

<style lang="less" scoped>
	.zoom {
		position: absolute;
		bottom: 4rem;
		right: 3rem;
		padding: 0.7rem 1rem;
		height: 4.2rem;
		border-radius: 0.8rem;
		border: 0.1rem solid #ffcf90;
		background: #ffffff;
		box-shadow: 0 1.5rem 2.1rem 0 rgba(0, 0, 0, 0.05);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #000;
		user-select: none;
		> .icon {
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 2.8rem;
			height: 2.8rem;
			--svg-icon-color: #0d0d0d;
		}
		> .value {
			min-width: 5rem;
			text-align: center;
			font-family: Medium;
			font-size: 1.6rem;
		}
	}
</style>
