<script setup lang="ts">
const lamelles_count = useState('lamelles_count', () => 8)
const fence_section = useState<number>('fence_section', () => 2000 * 0.001)
const parametric = {
    length: {
        min: 100,
        max: 2400,
        step: 10,
    },
    height: {
        min: 220,
        max: 2400,
        step: 115,
    }
}
const form_state = reactive({
    length: fence_section.value * 1000,
    height: lamelles_count.value * parametric.height.step
})
const changeParametres = () => {
    const lamelles = Math.floor(form_state.height / parametric.height.step)
    lamelles_count.value = lamelles
    fence_section.value = form_state.length * 0.001
}
watch(form_state, changeParametres, { deep: true })
</script>
<template>
    <div class="container">
        <form class="form">
            <div class="form-item">
                <label for="length">Длина секции, мм</label>
                <input id="length" type="number" v-bind="parametric.length" v-model="form_state.length" />
            </div>
            <div class="form-item">
                <label for="height">Высота забора, мм</label>
                <input id="height" type="number" v-bind="parametric.height" v-model="form_state.height" />
            </div>
        </form>
    </div>
</template>