<!--治理方案计算结果详情页展示-->
<template>
    <div ref='governTotalContent' class='governTotalContentDiv'>
        <!--返回按钮-->
        <back-component :custom='true'/>
        <div class='schemeNav'>
            <el-radio-group v-model='radio' >
                <el-radio-button label='评估计算结果'  />
            </el-radio-group>
        </div>
        <div class='schemeContent' ref='schemeContent'>
            <scheme-result v-show='radio=="评估计算结果"'  />
        </div>
    </div>
</template>
<script setup lang='ts'>
import SchemeResult from '@/views/pqs/voltageSags/sagGovern/scheme/schemeCalc/schemeResult.vue'
import BackComponent from '@/components/icon/back/index.vue'
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { mainHeight } from '@/utils/layout'
import { useRoute } from 'vue-router'
import { schemeDetail } from '@/api/advance-boot/sgGroven/sgScheme'
import emitter from '@/utils/emitter'

const governTotalContent = ref()
const schemeContent = ref()
const radio = ref('待计算结果')

const { query } = useRoute()

onMounted(() => {
    governTotalContent.value.style.height = mainHeight().height
    schemeContent.value.style.height = mainHeight(65).height
    schemeContent.value.style.maxheight = mainHeight(65).height
    schemeContent.value.style.overflowY = 'scroll'
    schemeContent.value.style.overflowX = 'hidden'
})

//根据治理历史的id查询出此次方案的参数、结果便于数据回显
const getHistoryData = async () => {
    await schemeDetail(query.id).then(res => {
        //先通知父组件打开历史页面
        radio.value = '评估计算结果'
        //再将历史数据传递到历史页面
        emitter.emit('send-scheme-result', res.data)
    })
}

getHistoryData()

</script>
<style scoped>

.governTotalContentDiv {
    background-clip: content-box;
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-wrap: wrap;
    background-color: #FFFFFF;
    padding: 10px;
    position: relative;


}


.schemeNav {
    height: 55px;
    background: #FFFFFF;
    width: 100%;
    display: flex;
    justify-content: center;
}

.schemeContent {
    width: 100%;
}

</style>