<template>
  <div class="group__container">
    <NodeTitle :icon="group" :nodeId="props.model.id" :nodeProperties="props.properties" :nodeName="props.properties?.name || '分组'" nodeType="selectArea" nodeDesc="将一些组件进行分组" />
   
    <div class="child__container">
        <slot></slot>
    </div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue';
import NodeTitle from '../../components/NodeTitle.vue'
import group from '../../icon/group.svg'

const props = defineProps({
  model: Object,
  graphModel: Object,
  properties: Object,
  nowTime: Number,
});

onMounted(() => {
  lf.setProperties(props.model.id, {
    ...props.properties,
    action: "NONE"
  });
})

</script>
<style lang="scss" scoped>
.group__container {
    width: 100%;
    height: 100%;
    background: #fff;
    padding: 12px;
    cursor: default;
    border-radius: 12px;
    border: 2px solid white;
    box-shadow: 0 5px 15px 0#00000008;
    display: flex;
    flex-direction: column;
    position: relative;

    .title {
        height: 40px;
    }

    .child__container {
        min-height: 80px;
        flex: 1;
        background-color: #f6f8fa;
        border-radius: 8px;
    }

    .el-row {
        align-items: end;
      }
}
</style>