<!--最佳治理方案计算页面-->
<template>
    <div ref='governTotalContent' class='governTotalContentDiv'>
        <!--返回按钮-->
        <back-component :custom='true'/>
        <!--切换radio的导航-->
        <div class='schemeNav'>
            <el-radio-group v-model='radio' >
                <el-radio-button label='治理评估准备'  />
                <el-radio-button label='评估计算结果' :disabled='calcResult' />
            </el-radio-group>
        </div>
        <div class='schemeContent' ref='schemeContent'>
            <calc-param v-show='radio=="治理评估准备"' :user-id='query.userId' />
            <scheme-result v-show='radio=="评估计算结果"' />
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import emitter from '@/utils/emitter'
import { mainHeight } from '@/utils/layout'
import { useRoute } from 'vue-router'
import BackComponent from '@/components/icon/back/index.vue'
import CalcParam from '@/views/pqs/voltageSags/sagGovern/scheme/schemeCalc/calcParam.vue'
import SchemeResult from '@/views/pqs/voltageSags/sagGovern/scheme/schemeCalc/schemeResult.vue'

const { query } = useRoute()
const governTotalContent = ref()
const schemeContent = ref()
const radio = ref('治理评估准备')
const calcResult = ref(true)

emitter.on('schemeRadio', (value: string) => {
    radio.value = value
})

emitter.on('calcResult', (value: boolean) => {
    calcResult.value = value
})

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

//解绑数据监听
onUnmounted(() => {
    // 解绑事件
    emitter.off('schemeRadio')
    emitter.off('calcResult')
})

</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>