<script setup>
import Level1Area from "./Level1Area.vue";
import { CONST_MAX_AREA_LINE } from "./constants.js"

const props = defineProps({
  newNameSpace: String, // 新的命名空间
  startLine: Number,  // 其实行号
  style: {
    type: Object,
    default() {
      return { top: 0 };
    },
  }
});

// 构建子 BaseBlock 的设置信息
const level1List = [];
for (let i = 0 ; i < CONST_MAX_AREA_LINE; i++) {
    level1List.push({
        line: i,
        defineLine: props.startLine + i,
        nameSpace: "L" + i, // 不同的nameSpace下, 新命名的nameSpace可以重名
    });
}
</script>

<template>
  <!--jsv-focus-block是不可描画节点，所以如果想接收style等属性，不要放在顶级-->
  <div class="mainArea0" :style="{
        top: props.style.top,
    }">
    <div class="title">{{ `NameSpace: ${props.newNameSpace}` }}</div>
    <!-- 这里的jsv-focus-block 创建一个新的namesapce -->
    <jsv-focus-block :namespace="props.newNameSpace">
        <level-1-area v-for="item in level1List" :key="item.line" 
            :newNameSpace="item.nameSpace"
            :style="{ top: 24 + (100 + 3) * item.line}" 
            :defineLine="item.defineLine"
            />
    </jsv-focus-block>
  </div>
</template>

<style scoped lang="scss">
.mainArea0 {
    width: 750;
    height: 120 * 2;
    background-color: #00F0F0;
}

.title {
  text-align: left;
  font-size: 20;
  line-height: 24;
  color: #000000;
  left: 5;
  height: 24;
}

</style>