<template>
  <div class="subapplication">
    <h-spin :spinning="spinning">
      <h-collapse v-model:activeKey="activeKey">
        <h-collapse-panel v-for="item in moduleList" :key="item.key" :header="item.name" @change="changePane">
          <div class="applications-container">
            <div v-for="application in item.applicationList" :key="application.id" class="application-item">
              <applicationUnit :config="application"></applicationUnit>
            </div>
          </div>
        </h-collapse-panel>
      </h-collapse>
    </h-spin>
  </div>
</template>

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

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

  setup() {
    const moduleList = ref([]);
    const activeKey = ref([]);
    const getModuleList = () => {
      moduleList.value = [
        { 
          name: '3D应用', 
          key: '1',
          applicationList: [],
        },
        { 
          name: '平台应用', 
          key: '2',
          applicationList: [],
        },
        { 
          name: '外部应用', 
          key: '3',
          applicationList: [],
        },
        { 
          name: '其他应用', 
          key: '4',
          applicationList: [],
        },
      ];
      moduleList.value[0].applicationList = [
        { name: 'crownCAD', id: 'crownCad', url: 'http://localhost:4002/#/crownCAD'}
      ];
      moduleList.value[1].applicationList = [
        { name: '消息模板', id: 'messageTemplate', url: 'http://localhost:3113/#/MessageTemplate'},
        { name: '消息分组', id: 'messageGroup', url: 'http://localhost:3113/#/MessageGroup'},
        { name: '消息类型', id: 'messageType', url: 'http://localhost:3113/#/MessageType'},
        { name: '组织页面', id: 'OrganizationPage', url: 'http://localhost:3112/#/OrganizationPage'},
        { name: '异常日志', id: 'ExLogSearch', url: 'http://localhost:3114/#/ExLogSearch'},
        { name: '日志服务', id: 'logServiceManagement', url: 'http://localhost:3114/#/logServiceManagement'},
        { name: '菜单日志', id: 'MenuLog', url: 'http://localhost:3114/#/MenuLog'},
        { name: '生命周期', id: 'lifeCycle', url: 'http://localhost:3119/#/lifeCycleManage'},
        { name: '消息监控', id: 'messageMonitor', url: 'http://localhost:3113/#/messageMonitor'},
      ];
      moduleList.value[2].applicationList = [
        { name: '无极页面', id: 'wujiPage', url: 'https://wujicode.cn/xy/app/prod/official/index'},
        { name: 'antd', id: 'antd', url: 'https://www.antdv.com/components/overview-cn/'},
      ];
      activeKey.value = moduleList.value.map(item => item.key);
    }

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

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

    const spinning = ref(false);
    const currentCategory = ref();
    const refreshApplications = (id) => {
      if (currentCategory.value === id) {
        return;
      }
      currentCategory.value = id;
      spinning.value = true;
      moduleList.value = [];
      activeKey.value = [];
      bus.emit('homePanel:resetApplicationPanel', '1');
      setTimeout(() => {
        getModuleList();
        spinning.value = false;
      }, 300)
    }

    const getCurrentAppConfig = (params) => {
      for (let i = 0; i < moduleList.value.length; i++) {
        for (let j = 0; j < moduleList.value[i].applicationList.length; j++) {
          const config = moduleList.value[i].applicationList[j];
          if (config.id === params.appId) {
            params.cb(config);
            break;
          }
        }
      }
    }

    bus.on('homePanel:refreshApplications', refreshApplications);
    bus.on('homePanel:getCurrentAppConfig', getCurrentAppConfig);
    
    onBeforeUnmount(() => {
      bus.off('homePanel:refreshApplications', refreshApplications);
      bus.off('homePanel:getCurrentAppConfig', getCurrentAppConfig);
    })

    refreshApplications(1);

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

<style scoped lang='less'>
  .subapplication {
    .applications-container {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin-bottom: 0;
      padding-left: 0;

      .application-item {
        width: 25%;
      }
    }
  }
</style>