<template>
  <el-tabs v-model="appStore.compositeTabAcitve" class="w-full h-full relative">
    <el-tab-pane label="日志" name="log">
      <Log />
    </el-tab-pane>
    <el-tab-pane label="事件" name="event">
      <EventEdit />
    </el-tab-pane>
  </el-tabs>
  <div class="absolute h-32px top-0 right-0 flex items-center px-1">
    <el-tooltip content="隐藏面板" placement="top">
      <IconButton @click="appStore.showComposite = !appStore.showComposite">
        <LuX size="12px" />
      </IconButton>
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
import Log from './Log.vue'
import EventEdit from './eventEdit/index.vue'
import { IconButton } from '@/components'
import { LuX } from 'vue-icons-plus/lu'
import { useAppStore } from '@/store/modules/app'

const appStore = useAppStore()
</script>

<style scoped>
::v-deep(.el-tabs__nav-scroll) {
  padding-left: 12px;
}
::v-deep(.el-tab-pane) {
  height: 100%;
  width: 100%;
}
::v-deep(.el-tabs__content) {
  padding: 0;
}
::v-deep(.el-tabs__header) {
  margin-bottom: 0;
}
</style>
