<template>
  <div class="task-execution-page">
    <div class="content">
      <div class="left-content" :class="{ hide: !isToggleShow }">
        <div class="filter-tree-content">
          <leftTaskTree ref="leftTreeRef" @node-click-fn="getTreeCurrentNodeFun"></leftTaskTree>
        </div>
      </div>
      <div class="toggle-btn" :class="{ hide: !isToggleShow }" @click="toggleFun">
        <el-icon :size="12">
          <DArrowLeft />
        </el-icon>
      </div>
      <div class="right-content">
        <taskDetailPage
          v-if="treeCurrentNodeInfo?.nodeType === NODE_TYPE.TASK"
          :task-info="treeCurrentNodeInfo"
          :show-task-info="false"
        ></taskDetailPage>
        <runDetailPage
          v-else-if="treeCurrentNodeInfo?.nodeType === NODE_TYPE.RUN"
          :run-info="treeCurrentNodeInfo"
          @update="updateLeftTreeNodeInfoFun"
        ></runDetailPage>
        <el-empty v-else class="empty-style" description="" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { NODE_TYPE } from '@/utils/enum/node';
import leftTaskTree from './components/leftTaskTree/index.vue';
import taskDetailPage from './components/taskDetailPage/index.vue';
import runDetailPage from './components/runDetailPage/index.vue';

const isToggleShow = ref(true);
const toggleFun = () => {
  isToggleShow.value = !isToggleShow.value;
};
const leftTreeRef = ref();

const treeCurrentNodeInfo = ref<any>(null);
const getTreeCurrentNodeFun = (data: any) => {
  treeCurrentNodeInfo.value = {};

  setTimeout(() => {
    const { node }: any = data;
    treeCurrentNodeInfo.value = node;
  }, 1000);
};

// 作业启动更新左侧树的算例的状态
const updateLeftTreeNodeInfoFun = (data: any) => {
  const { status }: any = data;

  if (status) {
    leftTreeRef.value.setCurrentNodeStatusFun(status);
  }
};
</script>

<style lang="scss" scoped>
.task-execution-page {
  width: 100%;
  height: 100%;

  .content {
    position: relative;
    height: 100%;
    display: flex;

    .toggle-btn {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      top: 50%;
      left: 400px;
      margin-top: -20px;
      background-color: var(--el-bg-color);
      border-radius: 0 4px 4px 0;
      width: 14px;
      height: 40px;
      border: solid 1px var(--el-border-color-darker);
      border-left: 0;
      color: var(--el-text-color-regular);
      cursor: pointer;
      transition: all 0.3s;

      &.hide {
        left: -14px;
        transform: rotateZ(180deg);
      }
    }

    .left-content {
      width: 400px;
      height: 100%;
      overflow: auto;
      margin-right: var(--margin-normal);
      background-color: var(--el-bg-color);
      border-radius: var(--border-radius-normal);
      padding: var(--padding-normal);
      border-right: solid 1px var(--el-border-color-darker);
      transition: all 0.3s;

      &.hide {
        width: 0;
        padding: 0;
        margin: 0;
      }

      .filter-tree-content {
        width: 100%;
        height: 100%;
      }
    }

    .right-content {
      height: 100%;
      flex: 1;
      overflow: auto;
      background-color: var(--el-bg-color);
      border-radius: var(--border-radius-normal);
      background-color: #f2f3f5;

      .empty-style {
        width: 100%;
        height: 100%;
        background-color: var(--el-bg-color);
      }
    }
  }
}
</style>
