<template>
  <div v-if="rating.systemParameter.reportShowScoreDtl.value" class="h-full">
    <w-splitter :size="25" :separator-color="rating.separatorColor">
      <template #before>
        <QuanAnalysis></QuanAnalysis>
      </template>

      <template #after>
        <w-splitter v-if="splitComputed" :size="65" class="h-full" :separator-color="rating.separatorColor">
          <template #before>
            <QualAnalysis :qual-qa-mode="false" :read-only="true"></QualAnalysis>
          </template>
          <template #after>
            <AdjustItemIndex></AdjustItemIndex>
          </template>
        </w-splitter>
        <QualAnalysis v-else :qual-qa-mode="false" :read-only="true"></QualAnalysis>
      </template>
    </w-splitter>
  </div>
</template>
<script setup lang="ts">
import { inject, computed } from 'vue';
import { Rating } from '../ts/Rating';
import QuanAnalysis from './QuanAnalysis.vue';
import QualAnalysis from './QualAnalysis.vue';
import AdjustItemIndex from './AdjustItemIndex.vue';

const rating = <Rating>inject('rating');
const splitComputed = computed(() => {
  if (rating.adjustItemScoreDtlData.value && Object.keys(rating.adjustItemScoreDtlData.value).length > 0) {
    return true;
  }
  return false;
});
</script>
