<template>
    <div>
        <div v-for="(item, index) in colList" :key="index" class="EColEditor-item">
            <Number
                v-model:value="item.componentProps.span"
                v-model="item.componentProps.span"
                style="width: 100%"
                :min="1"
                :max="24"
            />
            <div v-if="colList.length > 1" class="epic-del-btn">
                <span @click="handleDelete(index)">
                    <EIcon name="icon-shanchu1" />
                </span>
            </div>
        </div>
        <div class="add-btn" @click="handleAdd">添加</div>
    </div>
</template>
<script lang="ts" setup>
import { pluginManager, getUUID } from "@/components/EpicDesigner/utils";
import { ComponentSchema } from "../../types/epic-designer";
import { computed, PropType } from "vue";
import EIcon from "../../components/icon";

const Number = pluginManager.getComponent("number");
const props = defineProps({
    modelValue: {
        type: Array as PropType<ComponentSchema[]>,
        default: () => []
    }
});

const emit = defineEmits(["update:modelValue"]);
const colList = computed({
    get() {
        return props.modelValue;
    },
    set(e) {
        emit("update:modelValue", e);
    }
});

/**
 * 新增栅格Col
 */
function handleAdd() {
    const colItem = {
        type: "col",
        children: [],
        componentProps: {
            span: 12
        },
        id: getUUID()
    };
    colList.value.push(colItem);
}

/**
 * 删除栅格Col
 * @param index
 */
function handleDelete(index: number) {
    colList.value = colList.value.filter((item, i) => index !== i);
}
</script>
