<template>
  <div class="comp-content">
    <Dialog
      v-model="dialogVisible"
      diaTitle="算例详情"
      :width="'70%'"
      :height="700"
      @close="closeFun"
      show-footer
      :zIndex="100"
    >
      <el-tabs v-model="activeTab">
        <el-tab-pane label="作业列表" name="job-list">
          <div class="task-tab-content">
            <jobList v-if="activeTab === 'job-list'" :current-run-info="runInfo"></jobList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="日志输出" name="job-log">
          <div class="task-tab-content">
            <runLogs v-if="activeTab === 'job-log'"></runLogs>
          </div>
        </el-tab-pane>
        <el-tab-pane label="关联任务" name="associated-run">
          <div class="task-tab-content">
            <runVersionTree
              v-if="activeTab === 'associated-run'"
              :current-task-info="runInfo"
            ></runVersionTree>
          </div>
        </el-tab-pane>
        <el-tab-pane label="关键结果" name="result">
          <div class="task-tab-content">
            <resultData v-if="activeTab === 'result'" :current-run-ifno="runInfo"></resultData>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="性能指标" name="performance">
          <div class="task-tab-content">
            <taskPerformance
              ref="taskPerformanceRef"
              v-if="activeTab === 'performance'"
              :param-type="'run'"
              :run-info="runInfo"
              :task-info="runInfo"
              :show-save-button="true"
            >
            </taskPerformance>
          </div>
        </el-tab-pane> -->
      </el-tabs>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Dialog from '@/components/common/dialog/index.vue';
import jobList from '@/views/task/execution/components/runDetailPage/runPagecomponent/jobList.vue';
import runLogs from '@/views/task/execution/components/runDetailPage/runPagecomponent/runLogs.vue';
import resultData from '@/views/task/execution/components/runDetailPage/runPagecomponent/resultData.vue';
import runVersionTree from '@/views/task/execution/components/runDetailPage/runPagecomponent/runVersionTree.vue';

const emits = defineEmits(['close', 'update']);
defineProps({
  runInfo: {
    type: Object,
    default: () => {},
  },
});

const dialogVisible = ref(true);
const activeTab = ref('job-list');
const closeFun = () => {
  emits('close');
};
</script>

<style lang="scss" scoped>
.el-tabs {
  width: 100%;
  height: 100%;
}

:deep(.el-tabs__content) {
  width: 100%;
  height: calc(100% - 60px);

  .el-tab-pane {
    width: 100%;
    height: 100%;
  }

  .task-tab-content {
    width: 100%;
    height: 700px;
    min-height: 500px;
  }
}
</style>
