<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "ModelReasoning",
});
</script>

<script setup lang="ts">
import Reasoning from "@/views/modelReasoning/index/components/Module/Reasoning.vue";
import Result from "@/views/modelReasoning/index/components/Module/Result.vue";
import Compare from "@/views/modelReasoning/index/components/Module/Compare.vue";
import { onMounted, onUnmounted } from "vue";
import { useMain } from "@/views/modelReasoning/index/services/index.ts";

const { modelReasoningServices } = useMain();

const init = () => {
  modelReasoningServices.reasoning.api.getSystemInfo();
  modelReasoningServices.reasoning.api.getModelList();
  modelReasoningServices.reasoning.api.getTestDataset();
  modelReasoningServices.reasoning.api.getDataset();
  modelReasoningServices.reasoning.api.getTaskList();
  modelReasoningServices.reasoning.api.getReasoningOptions();
  setSystemTimeout();
};

let systemTimeout: undefined | NodeJS.Timeout = undefined;

const cleanSystemTimeout = () => {
  if (systemTimeout) {
    clearTimeout(systemTimeout);
    systemTimeout = undefined;
  }
};

const setSystemTimeout = () => {
  cleanSystemTimeout();
  systemTimeout = setTimeout(() => {
    modelReasoningServices.reasoning.api.getSystemInfo();
  }, 1000 * 20);
};

onMounted(() => {
  init();
});

onUnmounted(() => {
  cleanSystemTimeout();
});

const prefix = "model-reasoning-page";
</script>

<template>
  <div :class="prefix">
    <div :class="`${prefix}-wrapper`">
      <div :class="`${prefix}-grid`">
        <Reasoning v-bind="modelReasoningServices.reasoning" />
      </div>
    </div>
    <div :class="`${prefix}-wrapper auto-size`">
      <div :class="`${prefix}-grid`">
        <Result v-bind="modelReasoningServices.reasoning" />
      </div>
      <div :class="`${prefix}-grid ${prefix}-grid--compare`">
        <Compare
          v-bind="{
            reasoning: modelReasoningServices.reasoning,
            performance: modelReasoningServices.performance,
          }"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$prefix: "model-reasoning-page";

.#{$prefix} {
  display: flex;
  align-items: start;
  justify-content: start;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
  gap: 20px;
  &-wrapper {
    width: 100%;
    display: flex;
    gap: 17px;
    &:nth-child(1) {
      height: 380px;
    }
    &:nth-child(2) {
      min-height: 500px;
    }
  }
  &-grid {
    flex: 1;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(231, 239, 251, 0.5);
    border-radius: 10px;
    &--compare {
      height: 500px;
    }
  }
  // .auto-size {
  //   height: 500px;
  //   align-self: stretch;
  // }
}
</style>
