<template>
  <div class="run-detail-page">
    <div class="run-title-box">
      <div class="task-info">
        <div class="task-name">{{ currentRunNodeInfo?.runName }}</div>
        <!-- <div class="task-executor">
          执行人：
          <el-icon class="blue">
            <UserFilled />
          </el-icon>
          <span class="name">
            {{ '执行人' }}</span>
        </div> -->
        <div class="task-status">
          任务状态：

          <div class="status">

            <el-icon class="info" title="未开始" v-if="currentRunNodeInfo?.status === 0">
              <InfoFilled />
            </el-icon>
            <el-icon class="upload" title="进行中" v-else-if="currentRunNodeInfo?.status === 1">
              <HelpFilled />
            </el-icon>
            <el-icon class="success" title="已完成" v-else-if="currentRunNodeInfo?.status === 2">
              <SuccessFilled />
            </el-icon>
            <el-icon class="upload" title="回传中" v-else-if="currentRunNodeInfo?.status === 3">
              <UploadFilled />
            </el-icon>
            <el-icon class="warn" title="异常" v-else-if="currentRunNodeInfo?.status === 4">
              <WarningFilled />
            </el-icon>
            <el-icon class="info" title="未开始" v-else>
              <InfoFilled />
            </el-icon>

            <span class="status-title">{{ currentRunNodeInfo?.status? statusList[currentRunNodeInfo?.status]:'未开始' }}</span>
          </div>

        </div>
        <div class="task-time">
          创建时间：
          <el-icon class="blue">
            <Odometer />
          </el-icon>
          <span class="name">
            {{ currentRunNodeInfo?.createTime }}</span>
        </div>

      </div>
      <div class="task-operate">
        <el-button size="small" type="primary">一键执行</el-button>
        <el-button size="small" type="danger">停止</el-button>
        <el-button size="small">刷新</el-button>
        <el-button size="small">查看所有计算</el-button>

      </div>
    </div>

    <div class="run-flow-box">
      <FlowView v-if="runInfo.flowTemplate" :show-config-page="false" :flow-uuid="runInfo.flowTemplate" @detail="getNodeTailFun"></FlowView>
    </div>

    <div class="run-info-box">

      <div class="info-box-left">

        <div class="bottom-title">
          <div class="title-name">节点详情</div>
          <div class="title-operate"></div>
        </div>

        <div class="bottom-info-content">
          <div class="tabs-box">
            <el-tabs v-model="nodeActiveName" class="demo-tabs" @tab-change="handleLeftClickFun">
              <el-tab-pane label="参数设置" name="param"></el-tab-pane>
              <el-tab-pane label="数据输入" name="input"></el-tab-pane>
              <el-tab-pane label="数据输出" name="output"></el-tab-pane>
            </el-tabs>
          </div>
          <div class="tabs-info-content">
            <paramSetting v-if="nodeActiveName === 'param'"></paramSetting>
            <runDataPage v-else></runDataPage>

          </div>
        </div>

      </div>
      <div class="info-box-right">
        <div class="bottom-title">
          <div class="title-name">作业相关</div>
          <div class="title-operate"></div>
        </div>
        <div class="bottom-info-content">
          <div class="tabs-box">
            <el-tabs v-model="taskActiveName" class="demo-tabs" @tab-click="handleRightClickFun">
              <el-tab-pane label="作业列表" name="job-list"></el-tab-pane>
              <el-tab-pane label="日志输出" name="job-log"></el-tab-pane>
              <el-tab-pane label="关联任务" name="associated-run"></el-tab-pane>
              <el-tab-pane label="关键结果" name="result"></el-tab-pane>
              <el-tab-pane label="性能指标" name="performance"></el-tab-pane>
              <el-tab-pane label="3D模型预览" name="3D-model"></el-tab-pane>
            </el-tabs>
          </div>
          <div class="tabs-info-content">
            <resultData v-if="taskActiveName === 'result'" :current-run-ifno="runInfo"></resultData>
            <jobList v-if="taskActiveName === 'job-list'"></jobList>
            <taskPerformance v-if="taskActiveName === 'performance'" :param-type="'run'" :run-info="runInfo" :show-save-button="true"></taskPerformance>
            <runLogs v-if="taskActiveName === 'job-log'"></runLogs>
            <ModelReview v-if="taskActiveName === '3D-model'"></ModelReview>
            <runVersionTree v-if="taskActiveName === 'associated-run'" :current-task-info="runInfo"></runVersionTree>
          </div>

        </div>

      </div>

    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, watch } from 'vue';
import resultData from './runPagecomponent/resultData.vue';
import paramSetting from './runPagecomponent/paramSetting.vue';
import runDataPage from './runPagecomponent/runDataPage.vue';
import jobList from './runPagecomponent/jobList.vue';
import taskPerformance from '@/components/taskDetail/taskPerformance.vue';
import runLogs from './runPagecomponent/runLogs.vue';
import ModelReview from './runPagecomponent/3DModelReview.vue';
import runVersionTree from './runPagecomponent/runVersionTree.vue';
import FlowView from '@/components/common/flow/flowView.vue';

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

const statusList = ref([
  '未开始', '进行中', '已完成', '回传中', '异常',
]);

const nodeActiveName = ref('param');
const taskActiveName = ref('job-list');

const handleLeftClickFun = () => {

};

const handleRightClickFun = () => {

};

const getNodeTailFun = (node:any) => {
  console.log(node, 'node');

};

const currentRunNodeInfo = ref<any>({});

watch(() => props.runInfo, (newVal) => {

  if (newVal) {
    currentRunNodeInfo.value = newVal;

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

</script>

<style lang="scss" scoped>
.run-detail-page {
  width: 100%;
  height: 100%;

  .run-title-box {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding-right: 10px;
    padding-left: 10px;
    margin-bottom: 10px;
    border-radius: 2px;

    .task-info {
      height: 100%;
      display: flex;
      align-items: center;

      .task-name {
        padding-left: 10px;
        border-left: 3px solid var(--el-color-primary);
        font-size: 16px;
        font-weight: 600;
        margin-right: 20px;
      }

      .task-executor {
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 14px;
        margin-right: 20px;
      }

      .task-status {
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 14px;
        margin-right: 20px;

        .status {
          height: 100%;
          display: flex;
          align-items: center;
        }

      }

      .task-time {
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 14px;
        margin-right: 20px;

      }

      .name {
        font-weight: 600;
      }
    }

  }

  .run-flow-box {
    width: 100%;
    height: 300px;
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 2px;
    overflow: hidden;

  }

  .run-info-box {
    width: 100%;
    height: calc(100% - 370px);
    display: flex;
    align-items: center;
    justify-content: space-between;

    .info-box-left,.info-box-right {
      width: calc(50% - 5px);
      height: 100%;
      background-color: #fff;
      border-radius: 2px;
      overflow: hidden;

      .bottom-title{
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 10px;

        .title-name{
          padding-left: 10px;
          border-left: 3px solid  var(--el-color-primary);
          font-size: 14px;
          font-weight: 600;

        }

         .title-operate{
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-end;

         }
      }

      .bottom-info-content{
        width: 100%;
        height: calc(100% - 40px);
        padding: 0 10px;

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

        .tabs-info-content{
          width: 100%;
          height: calc(100% - 40px);
          padding: 10px;
          overflow: auto;
        }
      }

    }

  }

  .blue {
    color: var(--el-color-primary);
    margin-right: 5px;
  }
}

.point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-title{
  padding-left: 8px;
}

.success {
  background-color: #67C23A;
}

.error {
  background-color: #F56C6C;
}

.mr5 {
  margin-right: 5px;
}

.info {
  color: grey;
}

.success {
  color: #67c23a;
}

.warn {
  color: #f56c6c;
}

.upload {
  color: #409eff;
}
</style>
