<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="info">
          <div class="task-tab-content">
            <taskInfo ref="taskInfoRef" v-if="activeTab === 'info'" :task-id="taskId" :task-info="currentTaskInfo">
            </taskInfo>
          </div>
        </el-tab-pane>
        <el-tab-pane label="计算模型" name="model">
          <div class="task-tab-content">
            <taskModel v-if="activeTab === 'model'" :task-id="taskId"></taskModel>
          </div>
        </el-tab-pane>
        <el-tab-pane label="性能指标" name="performance">
          <div class="task-tab-content">
            <taskPerformance ref="taskPerformanceRef" v-if="activeTab === 'performance'" :task-id="taskId" :param-type="'task'" :run-info="currentTaskInfo" :task-info="currentTaskInfo" :show-save-button="true">
            </taskPerformance>
          </div>
        </el-tab-pane>
        <el-tab-pane label="结果图片" name="resultImage">
          <div class="task-tab-content">
            <resultImage v-if="activeTab === 'resultImage'" :task-id="taskId"></resultImage>
          </div>
        </el-tab-pane>
        <el-tab-pane label="曲线查看" name="curveView">
          <div class="task-tab-content">
            <taskCurve v-if="activeTab === 'curveView'" :task-id="taskId"></taskCurve>
          </div>
        </el-tab-pane>
        <el-tab-pane label="仿真报告" name="report">
          <div class="task-tab-content">
            <taskReport v-if="activeTab === 'report'" :task-id="taskId"></taskReport>
          </div>
        </el-tab-pane>
        <el-tab-pane label="交付物" name="deliverables">
          <div class="task-tab-content">
            <taskDeliverable v-if="activeTab === 'deliverables'" :task-id="currentTaskInfo?.id" :task-info="currentTaskInfo"></taskDeliverable>
          </div>
        </el-tab-pane>

      </el-tabs>
      <template #footer>
        <div>
          <el-button @click="closeFun">关闭</el-button>
          <el-button type="primary" @click="updateFun">确定</el-button>
        </div>
      </template>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Dialog from '@/components/common/dialog/index.vue';
import taskInfo from '@/components/taskDetail/taskInfo.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 emits = defineEmits(['closeFn', 'updateFn']);
defineProps({
  taskId: {
    type: String,
    default: '',
  },
  currentTaskInfo: {
    type: Object,
    default: () => { },
  },
});

const dialogVisible = ref(true);
const activeTab = ref('info');
const taskPerformanceRef = ref();
const taskInfoRef = ref();
const closeFun = () => {
  emits('closeFn');
};

const updateFun = async () => {

  let data: any;
  if (activeTab.value === 'performance') {
    await taskPerformanceRef.value.saveFun();
  }

  if (activeTab.value === 'info') {
    data = await taskInfoRef.value.getFormData();
  }

  emits('updateFn', {
    flag: activeTab.value,
    data,
  });

};
</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: 100%;
    min-height: 500px;
  }
}
</style>
