<template>
  <div class="comp-content">
    <Dialog
      v-model="dialogVisible"
      diaTitle="任务详情"
      :width="'70%'"
      :height="700"
      @close="closeFun"
      show-footer
    >
      <div class="page-inner">
        <el-tabs v-model="activeTab" class="tabs-demo">
          <el-tab-pane label="任务详情" name="info" v-if="showTaskInfo">
            <div class="task-tab-content">
              <taskInfo
                ref="taskInfoRef"
                v-if="activeTab === 'info'"
                :table-name="tableName"
                :task-id="currentTaskInfo?.uuid"
                :task-info="currentTaskInfo"
                :formAttrs="formAttrs"
              >
              </taskInfo>
            </div>
          </el-tab-pane>

          <el-tab-pane label="3D模型" name="model-3d">
            <div class="task-tab-content">
              <task3DModel
                v-if="activeTab === 'model-3d'"
                :task-id="currentTaskInfo?.uuid"
                :show-left-options="showLeftOptions"
              ></task3DModel>
            </div>
          </el-tab-pane>
          <el-tab-pane label="计算模型" name="model">
            <div class="task-tab-content">
              <taskModel
                v-if="activeTab === 'model'"
                :task-id="currentTaskInfo?.uuid"
                :show-left-options="showLeftOptions"
              ></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"
                :full-height="true"
                :show-left-options="showLeftOptions"
              >
              </taskPerformance>
            </div>
          </el-tab-pane>
          <el-tab-pane label="图片文件" name="resultImage">
            <div class="task-tab-content">
              <resultImage
                v-if="activeTab === 'resultImage'"
                :task-id="currentTaskInfo?.uuid"
                :show-left-options="showLeftOptions"
              ></resultImage>
            </div>
          </el-tab-pane>
          <el-tab-pane label="曲线文件" name="curveView">
            <div class="task-tab-content">
              <taskCurve
                v-if="activeTab === 'curveView'"
                :task-id="currentTaskInfo?.uuid"
                :show-left-options="showLeftOptions"
              ></taskCurve>
            </div>
          </el-tab-pane>
          <el-tab-pane label="仿真报告" name="report">
            <div class="task-tab-content">
              <taskReport
                v-if="activeTab === 'report'"
                :task-id="currentTaskInfo?.uuid"
                :show-left-options="showLeftOptions"
              ></taskReport>
            </div>
          </el-tab-pane>
          <el-tab-pane label="试验结果" name="experiment">
            <experimentResult
              v-if="activeTab === 'experiment'"
              :task-info="currentTaskInfo"
              :show-left-options="showLeftOptions"
            ></experimentResult>
          </el-tab-pane>
          <el-tab-pane label="算例版本" name="version">
            <runVersionTree
              v-if="activeTab === 'version'"
              :current-task-info="currentTaskInfo"
            ></runVersionTree>
          </el-tab-pane>
          <!-- <el-tab-pane label="交付物" name="deliverables">
            <div class="task-tab-content">
              <taskDeliverable
                v-if="activeTab === 'deliverables'"
                :task-id="currentTaskInfo?.uuid"
                :task-info="currentTaskInfo"
              ></taskDeliverable>
            </div>
          </el-tab-pane> -->
        </el-tabs>
        <div class="approval-button" v-if="taskInfo.status != 3 && showApproval">
          <el-button type="primary" @click="addApproveFun">发起评审</el-button>
        </div>
      </div>

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

    <Dialog
      v-model="approvaVisable"
      diaTitle="发起评审"
      :width="'400px'"
      :height="'30%'"
      @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>
      <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 } 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 taskModel from '@/components/taskDetail/taskModel.vue';
import taskCurve from '@/components/taskDetail/taskCurve.vue';
import task3DModel from '@/components/taskDetail/task3DModel.vue';
import { ElMessage } from 'element-plus';
import { deliverableApproveApi } from '@/api/project/run';
import { systemApproveQueryApproveFlowTempalteApi } from '@/api/system/systemApprove';
import experimentResult from '@/views/task/execution/components/taskDetailPage/components/experimentResult.vue';
import runVersionTree from '@/views/task/execution/components/runDetailPage/runPagecomponent/runVersionTree.vue';
import { getSimulationTaskFilesApi } from '@/api/data/dataAnalysis';

const emits = defineEmits(['closeFn', 'updateFn']);
const props = defineProps({
  taskId: {
    type: String,
    default: '',
  },
  currentTaskInfo: {
    type: Object,
    default: () => {},
  },
  tableName: {
    type: String,
    default: 'SIMULATION_TASK_SEND_LIST',
  },
  showTaskInfo: {
    type: Boolean,
    default: true,
  },
  showFooter: {
    type: Boolean,
    default: true,
  },
  showApproval: {
    type: Boolean,
    default: true,
  },
  showLeftOptions: {
    type: Boolean,
    default: true,
  },
});

const dialogVisible = ref(true);
const activeTab = ref(props.showTaskInfo ? 'info' : 'model-3d');
const taskPerformanceRef = ref();
const taskInfoRef = ref();
const approvaVisable = ref(false);
const templateList = ref<any>([]);

const approvalFormData = reactive<any>({
  difficult: '1',
  templateId: '',
});
const formAttrs = ref({
  progress: {
    min: 0,
    max: 100,
  },
});

const closeFun = () => {
  emits('closeFn');
};

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 getSimulationTaskFilesFun = async (fileBizType: any) => {
  const param = {
    uuid: props.currentTaskInfo.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;
  }
};

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.currentTaskInfo.uuid,
    difficult: approvalFormData.difficult,
    templateId: approvalFormData.templateId,
    templateName,
  });

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

  approvaVisable.value = false;
};

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,
  });
};

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

  if (res && res.code === 200) {
    templateList.value = res.data.filter((item: any) => {
      return item.templateName.includes('交付物');
    });
  } else {
    templateList.value = [];
  }
};
onMounted(async () => {
  await systemApproveQueryApproveFlowTempalteFun();
});
</script>

<style lang="scss" scoped>
.page-inner {
  width: 100%;
  height: 100%;
  position: relative;

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

  :deep(.el-tabs__header) {
    width: calc(100% - 130px);
  }
}
.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>
