<template>
  <div class="subapplication">
    <h-collapse v-model:activeKey="activeKey">
      <h-collapse-panel key="1" header="子应用容器" @change="changePane">
        <ul class="applications-container">
          <li v-for="i in 6" :key="i" class="application-item">
            <applicationUnit></applicationUnit>
          </li>
        </ul>
      </h-collapse-panel>
    </h-collapse>
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref, watch } from 'vue';
import bus from '@/utils/bus';
import applicationUnit from './applicationUnit.vue';

export default defineComponent ({
  name: 'subApplication',
  components: {
    applicationUnit,
  },

  setup() {
    const activeKey = ref(['1']);

    const changePane = (key) => {
      console.log(key)
    }

    watch(activeKey, (val) => {
      setTimeout(() => {
        // gridstack初始化外部支持可拖拽的节点到内部时是查找当前页面已有的dom是否存在特定的class
        bus.emit('homePanel:initGsDragInOption');
      })
    }, {
      immediate: true
    })

    return {
      activeKey,
      changePane,
    }
  },
})
</script>

<style scoped lang='less'>
  .subapplication {
    .applications-container {
      list-style: none;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;

      .application-item {
        width: 72px;
      }
    }
  }
</style>