<script setup lang="ts">
import { ref } from "vue";
import YlNginxLog from "@/pages/sys-log/yl-nginx-log.vue";
import YlDockerLog from "@/pages/sys-log/yl-docker-log.vue";

const logType = ref("docker");

const options = [
  {
    label: "docker",
    value: "docker",
    icon: "/docker_icon.svg",
  },
  {
    label: "nginx",
    value: "nginx",
    icon: "/nginx_icon.svg",
  },
];
</script>

<template>
  <div class="flex between btn-action-div">
    <h3>系统运行日志</h3>
    <el-segmented v-model="logType" :options="options">
      <template #default="scope">
        <div class="segmented">
          <el-icon size="20">
            <el-image :src="scope.item.icon" />
          </el-icon>
          <div>{{ scope.item.label }}</div>
        </div>
      </template>
    </el-segmented>
  </div>
  <div class="con">
    <div
      :class="{
        animate__animated: true,
        animate__fadeInLeft: logType === 'docker',
        animate__fadeOutLeft: logType !== 'docker',
      }"
      class="docker"
    >
      <yl-docker-log />
    </div>
    <div
      :class="{
        animate__animated: true,
        animate__fadeInRight: logType !== 'docker',
        animate__fadeOutRight: logType === 'docker',
      }"
      class="nginx"
    >
      <yl-nginx-log />
    </div>
  </div>
</template>

<style scoped>
h3 {
  color: #415aff;
}
.segmented {
  padding: 0.5rem;
  width: 5rem;
}
.con {
  width: 100%;
  height: calc(100% - 100px);
  background-color: #ffffff19;
  border-radius: 0;
  top: 100px;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  overflow: hidden;
  box-sizing: border-box;
}
.docker {
  height: 100%;
  width: 100%;
  position: absolute;
}
.nginx {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>
