<template>
    <Input class="epic-input-size" v-model="size" v-model:value="size" type="number" min="0" placeholder="请输入">
        <template #suffix>
            <Select v-model:value="unit" v-model="unit" style="width: 68px" :options="unitArray" />
        </template>
    </Input>
</template>
<script lang="ts" setup>
import { pluginManager } from "@/components/EpicDesigner/utils";
import { ref, watch, nextTick } from "vue";
const Input = pluginManager.getComponent("input");
const Select = pluginManager.getComponent("select");
const props = defineProps({
    modelValue: {
        type: String,
        default: null
    }
});
const emit = defineEmits(["update:modelValue"]);
const size = ref<string | null>(null);
const unit = ref("px");
const unitArray = [
    { label: "px", value: "px" },
    { label: "%", value: "%" },
    { label: "vw", value: "vw" },
    { label: "vh", value: "vh" },
    { label: "rem", value: "rem" },
    { label: "em", value: "em" },
    { label: "pt", value: "pt" }
];
watch(
    () => props.modelValue,
    e => {
        const num = parseFloat(e);
        // 传入值为空或不正常时
        if (isNaN(num)) {
            size.value = null;
            return false;
        }
        const regex = /^(\d+(\.\d+)?)(px|%|vw|vh|rem|em|pt){1}$/;
        const match = e.trim().match(regex);
        size.value = match?.[1] ?? null;
        unit.value = match?.[3] ?? "";
    },
    {
        immediate: true
    }
);

watch(
    () => unit.value + size.value,
    () => {
        handleUpdate();
    }
);

function handleUpdate() {
    nextTick(() => emit("update:modelValue", size.value ? size.value + unit.value : undefined));
}
</script>
