<template>
	<div class="pixel-ratio-selection">
		<div
			v-for="v in list"
			:key="v"
			:class="{ active: v === modelValue }"
			@click="onChange(v)"
			:style="{ '--w': v.split(':')[0], '--h': v.split(':')[1] }"
		>
			{{ v }}
		</div>
	</div>
</template>

<script setup lang="ts">
	import { reactive, defineExpose } from 'vue'
	const emit = defineEmits(['update:modelValue', 'change'])
	const props = defineProps({
		modelValue: { type: String },
		list: {
			type: Array,
			default: () => ['1:1', '4:3']
			// default: () => ['1:1', '4:3', '3:4', '16:9']
		}
	})
	const data = reactive({})
	const onChange = (v) => {
		emit('update:modelValue', v)
		emit('change', v)
	}
	defineExpose({ data })
</script>

<style lang="less" scoped>
	.pixel-ratio-selection {
		width: 100%;
		height: 34px;
		border-radius: 6px;
		background-color: #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 17px;
		user-select: none;
		> div {
			text-align: center;
			cursor: pointer;
			font-size: 12px;
			color: #7c7c7c;
			height: 21px;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 8px;
			&.active {
				border-radius: 4px;
				background-color: #fff;
			}
			&::before {
				content: '';
				border-radius: 1px;
				border: 1.2px solid #7c7c7c;
				width: calc(var(--w) / max(var(--w), var(--h)) * 10px);
				height: calc(var(--h) / max(var(--w), var(--h)) * 10px);
				margin-right: 4px;
				box-sizing: border-box;
			}
		}
	}
</style>
