<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="3D模型" name="3d-model"></el-tab-pane>
        <el-tab-pane label="计算模型" name="model"></el-tab-pane>
        <el-tab-pane label="性能指标" name="performance" v-if="showPerformance"></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="report"></el-tab-pane>
        <el-tab-pane label="试验结果" name="experiment"></el-tab-pane>
        <el-tab-pane label="任务信息" name="taskInfo" v-if="showTaskInfo"></el-tab-pane>

        <!-- <el-tab-pane label="交付物" name="deliverable"></el-tab-pane> -->
      </el-tabs>

      <div class="approval-button" v-if="taskInfo.status != 3">
        <el-button type="primary" @click="addApproveFun">发起评审</el-button>
      </div>
    </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"
          :full-height="true"
          :show-left-options="showLeftOptions"
        ></taskPerformance>
      </div>
      <div class="tabs-component" v-if="activeName === 'picture'">
        <resultImage
          :task-id="currentTaskInfo?.uuid"
          :show-left-options="showLeftOptions"
        ></resultImage>
      </div>
      <div class="tabs-component" v-if="activeName === 'canvas'">
        <taskCurve
          :task-id="currentTaskInfo?.uuid"
          :show-left-options="showLeftOptions"
        ></taskCurve>
      </div>
      <div class="tabs-component" v-if="activeName === 'deliverable'">
        <taskDeliverable
          :task-info="currentTaskInfo"
          :task-id="currentTaskInfo?.uuid"
        ></taskDeliverable>
      </div>
      <div class="tabs-component" v-if="activeName === 'model'">
        <taskModel
          :task-id="currentTaskInfo?.uuid"
          :show-left-options="showLeftOptions"
        ></taskModel>
      </div>
      <div class="tabs-component" v-if="activeName === '3d-model'">
        <task3DModel
          :task-id="currentTaskInfo?.uuid"
          :show-left-options="showLeftOptions"
        ></task3DModel>
      </div>
      <div class="tabs-component" v-if="activeName === 'report'">
        <taskReport
          :task-id="currentTaskInfo?.uuid"
          :show-left-options="showLeftOptions"
        ></taskReport>
      </div>
      <div class="tabs-component" v-if="activeName === 'experiment'">
        <experimentResult
          :task-info="currentTaskInfo"
          :show-left-options="showLeftOptions"
        ></experimentResult>
      </div>
      <div class="tabs-component" v-if="activeName === 'taskInfo'">
        <taskInfoPage
          :table-name="'SIMULATION_TASK_SEND_LIST'"
          :task-info="currentTaskInfo"
          :task-id="currentTaskInfo?.uuid"
          :formAttrs="formAttrs"
          :disabled="!showLeftOptions"
        ></taskInfoPage>
      </div>
    </div>

    <Dialog
      v-model="approvaVisable"
      diaTitle="发起评审"
      :width="'400px'"
      :height="'30%'"
      :zIndex="101"
      @close="closApprovalFun"
      show-footer
    >
      <el-form :model="approvalFormData">
        <el-form-item label="评审模板：">
          <el-select v-model="approvalFormData.templateId" class="mw200">
            <el-option
              v-for="item in templateList"
              :key="item.id"
              :label="item.templateName"
              :value="item.templateId"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="难度系数：">
          <el-select v-model="approvalFormData.difficult">
            <el-option
              v-for="item in difficultyTypeList"
              :key="item.dictName"
              :label="item.dictName"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
      <template #footer>
        <div>
          <el-button @click="closApprovalFun">关闭</el-button>
          <el-button type="primary" @click="submitApprovalFun">确定</el-button>
        </div>
      </template>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, 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';
import experimentResult from './components/experimentResult.vue';
import { ElMessage } from 'element-plus';
import { deliverableApproveApi } from '@/api/project/run';
import { systemApproveQueryApproveFlowTempalteApi } from '@/api/system/systemApprove';
import Dialog from '@/components/common/dialog/index.vue';
import task3DModel from '@/components/taskDetail/task3DModel.vue';
import taskInfoPage from '@/components/taskDetail/taskInfo.vue';
import { getSimulationTaskFilesApi } from '@/api/data/dataAnalysis';

const props = defineProps({
  taskInfo: {
    type: Object,
    default: () => {},
  },
  showLeftOptions: {
    type: Boolean,
    default: true,
  },
  showPerformance: {
    type: Boolean,
    default: true,
  },
  showTaskInfo: {
    type: Boolean,
    default: true,
  },
});
const formAttrs = ref({
  progress: {
    min: 0,
    max: 100,
  },
});
const activeName = ref('3d-model');
const approvaVisable = ref(false);

const handleClickFun = () => {};

const currentTaskInfo = ref<any>(null);
const approvalFormData = reactive<any>({
  difficult: '1',
  templateId: '',
});
const templateList = ref<any>([]);

const addApproveFun = async () => {
  // 判断是否存在3D文件，计算模型，仿真报告
  const files_3d: any = (await getSimulationTaskFilesFun(13)) || 0;
  const files_model: any = (await getSimulationTaskFilesFun(3)) || 0;
  const files_report: any = (await getSimulationTaskFilesFun(2)) || 0;

  if (files_3d && files_model && files_report) {
    approvaVisable.value = true;
  } else {
    ElMessage.warning('请确认计算模型文件，3d模型文件，仿真报告文件同时存在后发起审批');
  }
};

const closApprovalFun = () => {
  approvaVisable.value = false;
};

const submitApprovalFun = async () => {
  if (!approvalFormData.templateId) {
    ElMessage.warning('未选择流程模板，无法发起流程！');
    return;
  }

  if (!approvalFormData.difficult) {
    ElMessage.warning('未选择难度系数，无法发起流程！');
    return;
  }

  const templateName = templateList.value.find((item: any) => {
    return item.templateId === approvalFormData.templateId;
  })?.templateName;

  const res: any = await deliverableApproveApi({
    taskId: props.taskInfo.uuid,
    difficult: approvalFormData.difficult,
    templateId: approvalFormData.templateId,
    templateName,
  });

  if (res && res.code === 200) {
    ElMessage.success('已发起评审！');
  }

  approvaVisable.value = false;
};

const systemApproveQueryApproveFlowTempalteFun = async () => {
  const res: any = await systemApproveQueryApproveFlowTempalteApi({});

  if (res && res.code === 200) {
    templateList.value = res.data;
  } else {
    templateList.value = [];
  }
};

// 获取文件
const getSimulationTaskFilesFun = async (fileBizType: any) => {
  const param = {
    uuid: props.taskInfo.uuid,
    fileBizType: fileBizType,
    fileName: '',
    startTime: '',
    endTime: '',
    current: 1,
    size: 9999,
  };

  try {
    const res: any = await getSimulationTaskFilesApi(param);
    if (res && res.code === 200) {
      return res.data.total;
    } else {
      return 0;
    }
  } catch {
    return 0;
  }
};

// 监控传入的任务信息
watch(
  () => props.taskInfo,
  (newVal) => {
    if (newVal) {
      currentTaskInfo.value = newVal;

      currentTaskInfo.value.achieveStatus = currentTaskInfo.value.achieveStatus.toString();
      currentTaskInfo.value.expStatus = currentTaskInfo.value.expStatus ? '1' : '0';
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

onMounted(async () => {
  await systemApproveQueryApproveFlowTempalteFun();
});
</script>

<style lang="scss" scoped>
.task-info-page {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 0 10px;

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

    .approval-button {
      position: absolute;
      right: 10px;
      top: 3px;
    }

    // .demo-tabs {
    //   width: calc(100% - 130px);
    // }

    :deep(.el-tabs__header) {
      width: calc(100% - 130px);
    }
  }

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

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