<template>
  <div class="task-info-page">
    <div class="tabs-box">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClickFun">
        <el-tab-pane label="性能指标" name="performance"></el-tab-pane>
        <el-tab-pane label="结果图片" name="picture"></el-tab-pane>
        <el-tab-pane label="曲线查看" name="canvas"></el-tab-pane>
        <el-tab-pane label="交付物" name="deliverable"></el-tab-pane>
        <el-tab-pane label="计算模型" name="model"></el-tab-pane>
        <el-tab-pane label="仿真报告" name="report"></el-tab-pane>
      </el-tabs>
    </div>

    <div class="task-content">

      <div class="tabs-component" v-if="activeName === 'performance'">
        <taskPerformance :task-id="currentTaskInfo?.id" :show-save-button="true" :task-info="currentTaskInfo" ></taskPerformance>
      </div>
      <div class="tabs-component" v-if="activeName === 'picture'">
        <resultImage :task-id="currentTaskInfo?.id"></resultImage>

      </div>
      <div class="tabs-component" v-if="activeName === 'canvas'">
        <taskCurve :task-id="currentTaskInfo?.id"></taskCurve>

      </div>
      <div class="tabs-component" v-if="activeName === 'deliverable'">
        <taskDeliverable :task-info="currentTaskInfo" :task-id="currentTaskInfo?.id"></taskDeliverable>

      </div>
      <div class="tabs-component" v-if="activeName === 'model'">
        <taskModel :task-id="currentTaskInfo?.id"></taskModel>

      </div>
      <div class="tabs-component" v-if="activeName === 'report'">
        <taskReport :task-id="currentTaskInfo?.id"></taskReport>

      </div>

    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, watch } from 'vue';
import taskPerformance from '@/components/taskDetail/taskPerformance.vue';
import resultImage from '@/components/taskDetail/resultImage.vue';
import taskReport from '@/components/taskDetail/taskReport.vue';
import taskDeliverable from '@/components/taskDetail/taskDeliverable.vue';
import taskModel from '@/components/taskDetail/taskModel.vue';
import taskCurve from '@/components/taskDetail/taskCurve.vue';

const props = defineProps({
  taskInfo: {
    type: Object,
    default: () => {},
  },
});

const activeName = ref('performance');

const handleClickFun = () => {

};

const currentTaskInfo = ref<any>(null);
// 监控传入的任务信息
watch(() => props.taskInfo, (newVal) => {

  if (newVal) {
    currentTaskInfo.value = newVal;
  }

}, {
  immediate: true,
  deep: true,
});

</script>

<style lang="scss" scoped>

.task-info-page{
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 0 10px;

    .tabs-box{
        width: 100%;
        height: 50px;
    }

    .task-content{
        width: 100%;
        height: calc(100% - 50px);

        .tabs-component{
            width: 100%;
            height: 100%;
        }
    }
}
</style>
