<template>
  <Dialog v-model="visible" :diaTitle="$t('数据谱系.数据谱系')" width="90%" height="90%">
    <div class="pedigree-dialog-content">
      <div class="flow-section">
        <div class="section-title">
          <span class="title-icon"></span>
          <span class="title-text">{{ $t('数据谱系.谱系图') }}</span>
        </div>
        <div class="flow-wrapper">
          <PedigreeFlow ref="flowRef" :currentNodeId="currentNodeId" @nodeClick="nodeClickFun" />
        </div>
      </div>

      <div class="detail-section">
        <div class="section-title">
          <span class="title-icon"></span>
          <span class="title-text">{{ currentNodeLabel }}</span>
        </div>
        <div class="detail-wrapper">
          <PedigreeDetail
            :currentNode="currentNodeId"
            :runId="runId"
            :rowData="rowData"
            :defaultKeyResultType="defaultKeyResultType"
          />
        </div>
      </div>
    </div>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch, nextTick } from 'vue';
import { useI18n } from 'vue-i18n';
import Dialog from '@/components/common/dialog/index.vue';
import PedigreeFlow from './pedigreeFlow.vue';
import PedigreeDetail from './pedigreeDetail.vue';

const { t } = useI18n();

interface Props {
  modelValue?: boolean;
  rowData?: Record<string, any>;
  dataType?: '模型文件' | '仿真报告' | '计算文件' | '结果曲线' | '结果云图' | string;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  rowData: () => ({}),
  dataType: '',
});

const emits = defineEmits(['update:modelValue', 'close']);

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emits('update:modelValue', val),
});

const flowRef = ref();

const currentNodeId = ref('inputModel');

const nodeLabelsKey: Record<string, string> = {
  inputModel: '数据谱系.输入模型',
  simParams: '数据谱系.仿真参数',
  calcModel: '数据谱系.计算模型',
  calcResult: '数据谱系.计算结果',
  keyResult: '数据谱系.关键结果',
  simReport: '数据谱系.仿真报告',
};

const currentNodeLabel = computed(() => t(nodeLabelsKey[currentNodeId.value]) || '');

const dataTypeToNodeIdMap: Record<string, string> = {
  数据指标: 'keyResult',
  模型文件: 'inputModel',
  仿真报告: 'simReport',
  计算文件: 'calcModel',
  结果曲线: 'keyResult',
  结果云图: 'keyResult',
};

const dataTypeToKeyResultTypeMap: Record<string, string> = {
  结果云图: '1',
  结果曲线: '2',
  数据指标: '3',
};

const getDefaultNodeIdFun = () => {
  return dataTypeToNodeIdMap[props.dataType] || 'inputModel';
};

const defaultKeyResultType = computed(() => {
  return dataTypeToKeyResultTypeMap[props.dataType] || '1';
});

const runId = computed(() => {
  return props.rowData?.ownRunId || props.rowData?.runId || '';
});

const nodeClickFun = (nodeId: string) => {
  currentNodeId.value = nodeId;
};

watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal) {
      const defaultNodeId = getDefaultNodeIdFun();
      currentNodeId.value = defaultNodeId;
      nextTick(() => {
        flowRef.value?.setSelectedNodeFun(defaultNodeId);
      });
    }
  }
);
</script>

<style lang="scss" scoped>
.pedigree-dialog-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;

  .section-title {
    display: flex;
    align-items: center;
    height: 32px;
    margin-bottom: 8px;

    .title-icon {
      width: 3px;
      height: 16px;
      background-color: var(--el-color-primary);
      margin-right: 8px;
      border-radius: 2px;
    }

    .title-text {
      font-size: 14px;
      font-weight: 600;
      color: #303133;
    }
  }

  .flow-section {
    width: 100%;

    .flow-wrapper {
      width: 100%;
      border: 1px solid #ebeef5;
      border-radius: 4px;
      overflow: hidden;
    }
  }

  .detail-section {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .detail-wrapper {
      flex: 1;
      border-radius: 4px;
      overflow: hidden;
    }
  }
}
</style>
