<script setup>
import { computed, defineProps, ref } from 'vue'


import Overview from './section/Overview.vue'
import ProjectNameAndDecisionCriteria from './section/ProjectNameAndDecisionCriteria.vue'
import TestingConcept from './section/TestingConcept.vue'
import CoreConclusion from './section/CoreConclusion.vue'
import DecisionIndicators from './section/DecisionIndicators.vue'
import OtherKeyIndicators from './section/OtherKeyIndicators.vue'
import ConceptDiagnosis from './section/conceptDiagnosis/ConceptDiagnosis.vue'


const props = defineProps({
  report: { type: Object, default: () => Object.assign({}) },
  readonly: { type: Boolean, default: false }
})

const report = computed(() => props.report || {})
const readonly = computed(() => props.readonly || false)

</script>

<template>
  <div class="insight-report">
    <Overview :report="report" :readonly="readonly" />
    <ProjectNameAndDecisionCriteria :report="report" :readonly="readonly" />
    <TestingConcept :report="report" :readonly="readonly" />
    <CoreConclusion :report="report" :readonly="readonly" />
    <DecisionIndicators :report="report" :readonly="readonly" />
    <OtherKeyIndicators :report="report" :readonly="readonly" />
    <ConceptDiagnosis :report="report" :readonly="readonly" />
  </div>
</template>

<style scoped lang="scss">
.insight-report {
  width: 100%;
  padding-bottom: 28px;

  font-family: "Alibaba PuHuiTi 3.0", sans-serif;
}
</style>
