<template>
  <div class="preview-board-container">
    <h-tabs class="workplace-previewPanel-tabs" v-model:activeKey="activeTabKey" type="editable-card" @edit="changeTab">
      <h-tab-pane v-for="tab in tabList" :key="tab.key" :tab="tab.title" :closable="tab.closable">
        <workplaceUnit
          :workplaceConfig="tab"
        ></workplaceUnit>
      </h-tab-pane>
    </h-tabs>
    <!-- <workplaceUnit></workplaceUnit> -->
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref } from 'vue';
import workplaceUnit from './workplaceUnit.vue';

export default defineComponent ({
  name: 'previewBoard',
  components: {
    workplaceUnit
  },

  setup() {
    const activeTabKey = ref();
    const tabList = ref([
      { key: '1', title: '工作区1', closable: true},
      { key: '2', title: '工作区2', closable: true},
      { key: '3', title: '工作区3', closable: true},
    ]);

    const changeTab = (key: Event | string, action: 'add' | 'remove') => {
      if (action === 'remove') {
        tabList.value = tabList.value.filter(tab => tab.key !== key);
      }
    }

    return {
      activeTabKey,
      tabList,
      changeTab,
    }
  },
})
</script>

<style scoped lang='less'>
.preview-board-container {
  width: 100%;
  height: 100%;
}

.workplace-previewPanel-tabs {
  height: 100%;
  :deep(.ant-tabs-content) {
    // height: 100%;
    min-height: 100%;
    background: #e7eaef;
  }
}
</style>