<template>
  <div class="p-4">
    <div class="interface">
      <div class="datacenter-left">
        <div class="page-name">
          <p>通用接口</p>
        </div>
        <div class="ztree-container">
          <p v-for="(i, k) in menu" :key="k" @click="scrollToSection(k, i)" :class="[`${action == k ? 'action' : ''}`]">{{
            i.groupName }}({{ i.num }})</p>
        </div>
      </div>
      <div class="datacenter-right">
        <AssemblyData :groupId="interfaceGroupId"></AssemblyData>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, watch } from 'vue';
import AssemblyData from './item/AssemblyData.vue';
import { onMounted } from 'vue';
import { getGroup } from '/@/api/interface/interface.ts';

export default defineComponent({
  components: {
    AssemblyData,
  },
  setup() {
    const action = ref(0)
    const interfaceGroupId = ref('')
    function scrollToSection(index, i) {
      action.value = index;
      interfaceGroupId.value = i.groupId
    }
    onMounted(() => getGroupList())
    eventBus.on('interfaceCenter', () => getGroupList());
    var menu = ref([]);
    function getGroupList() {
      getGroup().then((res) => {
        if (res.length) {
          interfaceGroupId.value = res[0].groupId
          menu.value = res;
        }
      })
    }


    return {
      interfaceGroupId,
      scrollToSection,
      action,
      menu,
    };
  },
});
</script>
<style lang="less" scoped>
.p-4 {
  height: 100%;
  width: 100%;

  .interface {
    padding: 20px;
    height: 100%;
    background-color: #fff;
    display: flex;
    border-radius: 6px;

    .datacenter-left {
      width: 241px;
      flex-shrink: 0;
      height: 100%;
      margin-right: 20px;
      background: #F8F8F8;

      .page-name {
        height: 40px;
        border-bottom: solid 1px #DEDEDE;
        box-sizing: border-box;

        p {
          height: 40px;
          line-height: 40px;
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
          text-align: center;
          margin-bottom: 0px;
        }
      }

      .ztree-container {
        padding: 0 4px;
        width: 100%;

        p {
          margin-top: 10px;
          margin-bottom: 0;
          line-height: 40px;
          width: 100%;
          height: 40px;
          text-align: center;
          background: #FFFFFF;
          cursor: pointer;

          &:hover {
            background: #0671DD;
            color: #fff;
          }
        }

        .action {
          background: #0671DD;
          color: #fff;
        }
      }
    }

    .datacenter-right {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
