<!--各方案治理后的数据回显-->
<template>
    <el-row>
        <!--最佳治理方案以及各方案的雷达图对比-->
        <el-col :span='24' style='padding: 0 15px 5px 15px'>
            <span style='color: #4CA4F9;font-size: 20px;font-family: AlimamaDongFangDaKai'>最优治理方案：{{ schemeName
                }}</span>
        </el-col>
        <el-col :span='12'>
            <el-row>
                <el-col :span='12' style='height: 140px;padding: 0 10px'>
                    <div class='fourDiv'>
                        <div class='divHeader'>
                            <el-icon class='headerIcon'>
                                <TrophyBase />
                            </el-icon>
                            <span class='headerTxt'>风险评估等级</span>
                        </div>
                        <div class='divContent' style='height: 105px'>
                            <el-row style='height: 100%'>
                                <el-col :span='8' class='subDivOne'>
                                    <div>
                                        治理前
                                    </div>
                                    <div class='valueDiv'>
                                        {{ bestData.riskLevelBefore }}
                                    </div>
                                </el-col>
                                <el-col :span='8' class='subDivTwo'>
                                    <div class='nablaFont yellowFont'>
                                        VS
                                    </div>
                                </el-col>
                                <el-col :span='8' class='subDivThree'>
                                    <div>
                                        治理后
                                    </div>
                                    <div class='valueDiv'>
                                        {{ bestData.riskLevelAfter }}
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
                <el-col :span='12' style='height: 140px;padding: 0 10px'>
                    <div class='fourDiv'>
                        <div class='divHeader'>
                            <el-icon class='headerIcon'>
                                <Coin />
                            </el-icon>
                            <span class='headerTxt'>成本值</span>
                        </div>
                        <div class='divContent' style='height: 105px'>
                            <el-row style='height: 100%'>
                                <el-col :span='8' class='subDivTwo'>
                                    <div>
                                        五年
                                    </div>
                                    <div class='valueDiv'>
                                        {{ bestData.costArray[0] }}万元
                                    </div>
                                </el-col>
                                <el-col :span='8' class='subDivTwo'>
                                    <div>
                                        十年
                                    </div>
                                    <div class='valueDiv'>
                                        {{ bestData.costArray[1] }}万元
                                    </div>
                                </el-col>
                                <el-col :span='8' class='subDivTwo'>
                                    <div>
                                        十五年
                                    </div>
                                    <div class='valueDiv'>
                                        {{ bestData.costArray[2] }}万元
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
                <el-col :span='12' style='height: 140px;padding: 0 10px;margin-top: 5px'>
                    <div class='fourDiv'>
                        <div class='divHeader'>
                            <el-icon class='headerIcon'>
                                <PieChart />
                            </el-icon>
                            <span class='headerTxt'>投资收益率</span>
                        </div>
                        <div class='divContent' style='height: 105px'>
                            <el-row style='height: 100%'>
                                <el-col :span='8' class='subDivTwo'>
                                    <div>
                                        五年
                                    </div>
                                    <div class='valueDiv'>
                                        {{ bestData.investYieldArray[0] }}%
                                    </div>
                                </el-col>
                                <el-col :span='8' class='subDivTwo'>
                                    <div>
                                        十年
                                    </div>
                                    <div class='valueDiv'>
                                        {{ bestData.investYieldArray[1] }}%
                                    </div>
                                </el-col>
                                <el-col :span='8' class='subDivTwo'>
                                    <div>
                                        十五年
                                    </div>
                                    <div class='valueDiv'>
                                        {{ bestData.investYieldArray[2] }}%
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
                <el-col :span='12' style='height: 140px;padding: 0 10px;margin-top: 5px'>
                    <div class='fourDiv'>
                        <div class='divHeader'>
                            <el-icon class='headerIcon'>
                                <TrendCharts />
                            </el-icon>
                            <span class='headerTxt'>投资回收期</span>
                        </div>
                        <div class='divContent' style='height: 105px'>
                            <el-row style='height: 100%'>
                                <el-col :span='8' class='subDivOne'>

                                </el-col>
                                <el-col :span='8' class='subDivTwo'>
                                    <div class='valueDiv' style='font-size: 30px !important;'>
                                        {{ bestData.actualPayBack }}年
                                    </div>
                                </el-col>
                                <el-col :span='8' class='subDivThree'>

                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span='12'>
            <el-tooltip
                class='box-item'
                effect='light'
                placement='bottom-start'
            >
                <template #content>
                    治理效果：方案可减少电压暂降经济损失的能力；<br />
                    去风险能力：方案可减少用户承受的电压暂降风险的能力；<br />
                    投资意愿：方案成本回收速度；<br />
                    暂降免疫能力：方案可减少暂降事件影响的能力。
                </template>
                <span
                    style='color: rgb(76, 164, 249); font-size: 20px; font-family: AlimamaDongFangDaKai;position:absolute;top: 0'>治理效果对比<el-icon><InfoFilled /></el-icon></span>
            </el-tooltip>
            <radar :options='options' v-if='options' />
        </el-col>
        <!--每个方案的详细信息，包括起始参数、实际结果、一段语言描述、三条经济曲线-->
        <el-col :span='24' style='margin-top: 10px;padding: 5px 15px'>
            <el-collapse accordion v-model='activeName'>
                <el-collapse-item name='1'>
                    <template #title>
                        <el-icon v-if='bestId == data.upsData.id' class='header-icon'>
                            <GoldMedal />
                        </el-icon>
                        UPS治理方案
                    </template>
                    <el-descriptions
                        class='margin-top'
                        :column='3'
                        title='用户信息'
                        border
                    >
                        <el-descriptions-item :width='300'>
                            <template #label>
                                用户
                            </template>
                            <el-col :span='23'>
                                {{ data.userName }}
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                生产线
                            </template>
                            <el-col :span='23'>
                                {{ data.productLineName }}
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                进线
                            </template>
                            <el-col :span='23'>
                                {{ data.inComingLineName }}
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                期望回收期
                            </template>
                            <el-col :span='23'>
                                {{ data.payBackPeriod }} 年
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                数据参考范围
                            </template>
                            <el-col :span='23'>
                                {{ data.timeScope }}
                            </el-col>
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions
                        class='margin-top'
                        :column='3'
                        title='UPS治理参数'
                        border
                    >
                        <el-descriptions-item :width='300'>
                            <template #label>
                                购置价格
                            </template>
                            <el-col :span='23'>
                                {{ data.ups.price }} 万元/kVA
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                补偿能力
                            </template>
                            <el-col :span='23'>
                                {{ data.ups.compensation }} p.u.
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                年维护费
                            </template>
                            <el-col :span='23'>
                                {{ data.ups.maintainFee }} 万元/kVA
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                响应时间
                            </template>
                            <el-col :span='23'>
                                {{ data.ups.responseTime }} ms
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                后备时间
                            </template>
                            <el-col :span='23'>
                                {{ data.ups.backupTime }} s
                            </el-col>
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions
                        class='margin-top'
                        :column='3'
                        title='治理信息'
                        border
                    >
                        <el-descriptions-item :width='300'>
                            <template #label>
                                治理容量
                            </template>
                            <el-col :span='23'>
                                {{ data.upsData.power }} kW
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                机柜尺寸
                            </template>
                            <el-col :span='23'>
                                {{ data.upsData.size }}*{{ data.upsData.count }} 台
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                初期投资
                            </template>
                            <el-col :span='23'>
                                {{ data.upsData.investYearArray[0] }} 万元
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                实际回收期
                            </template>
                            <el-col :span='23'>
                                {{ data.upsData.actualPayBack }} 年
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                治理效果
                            </template>
                            <el-col :span='23'>
                                {{ data.upsData.governEffectArray[0] }} 万元/年
                            </el-col>
                        </el-descriptions-item>

                    </el-descriptions>
                    <!--治理信息描述，左边文字描述，右边经济曲线图-->
                    <el-row style='width: 100%;margin-top: 10px'>
                        <el-col :span='9' style='height: 285px;' class='intro'>
                            <div class='item '>
                                <h3>
                                    方案治理描述
                                </h3>
                                <div class='con' v-html='upsResult'></div>
                            </div>
                        </el-col>
                        <el-col :span='15' style='height: 285px'>
                            <my-echart :options='optionsUps' v-if='optionsUps' />
                        </el-col>
                    </el-row>

                </el-collapse-item>

                <el-collapse-item name='2'>
                    <template #title>
                        <el-icon class='header-icon' v-if='bestId == data.avcData.id'>
                            <GoldMedal />
                        </el-icon>
                        AVC治理方案
                    </template>
                    <el-descriptions
                        class='margin-top'
                        :column='3'
                        title='用户信息'
                        border
                    >
                        <el-descriptions-item :width='300'>
                            <template #label>
                                用户
                            </template>
                            <el-col :span='23'>
                                {{ data.userName }}
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                生产线
                            </template>
                            <el-col :span='23'>
                                {{ data.productLineName }}
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                进线
                            </template>
                            <el-col :span='23'>
                                {{ data.inComingLineName }}
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                期望回收期
                            </template>
                            <el-col :span='23'>
                                {{ data.payBackPeriod }} 年
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                数据参考范围
                            </template>
                            <el-col :span='23'>
                                {{ data.timeScope }}
                            </el-col>
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions
                        class='margin-top'
                        :column='3'
                        title='AVC治理参数'
                        border
                    >
                        <el-descriptions-item :width='300'>
                            <template #label>
                                购置价格
                            </template>
                            <el-col :span='23'>
                                {{ data.avc.price }} 万元/kVA
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                补偿能力
                            </template>
                            <el-col :span='23'>
                                {{ data.avc.compensation }} p.u.
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                年维护费
                            </template>
                            <el-col :span='23'>
                                {{ data.avc.maintainFee }} 万元
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                响应时间
                            </template>
                            <el-col :span='23'>
                                {{ data.avc.responseTime }} ms
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                后备时间
                            </template>
                            <el-col :span='23'>
                                {{ data.avc.backupTime }} s
                            </el-col>
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions
                        class='margin-top'
                        :column='3'
                        title='治理信息'
                        border
                    >
                        <el-descriptions-item :width='300'>
                            <template #label>
                                治理容量
                            </template>
                            <el-col :span='23'>
                                {{ data.avcData.power }} kW
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                机柜尺寸
                            </template>
                            <el-col :span='23'>
                                {{ data.avcData.size }}*{{ data.upsData.count }} 台
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                初期投资
                            </template>
                            <el-col :span='23'>
                                {{ data.avcData.investYearArray[0] }} 万元
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                实际回收期
                            </template>
                            <el-col :span='23'>
                                {{ data.avcData.actualPayBack }} 年
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                治理效果
                            </template>
                            <el-col :span='23'>
                                {{ data.avcData.governEffectArray[0] }} 万元/年
                            </el-col>
                        </el-descriptions-item>

                    </el-descriptions>
                    <!--治理信息描述，左边文字描述，右边经济曲线图-->
                    <el-row style='width: 100%;margin-top: 10px'>
                        <el-col :span='9' style='height: 285px;' class='intro'>
                            <div class='item '>
                                <h3>
                                    方案治理描述
                                </h3>
                                <div class='con' v-html='avcResult'></div>
                            </div>
                        </el-col>
                        <el-col :span='15' style='height: 285px'>
                            <my-echart :options='optionsAvc' v-if='optionsAvc' />
                        </el-col>
                    </el-row>

                </el-collapse-item>

                <el-collapse-item name='3'>

                    <template #title>
                        <el-icon class='header-icon' v-if='bestId == data.quickData.id'>
                            <GoldMedal />
                        </el-icon>
                        快切开关治理方案
                    </template>
                    <el-descriptions
                        class='margin-top'
                        :column='3'
                        title='用户信息'
                        border
                    >
                        <el-descriptions-item :width='300'>
                            <template #label>
                                用户
                            </template>
                            <el-col :span='23'>
                                {{ data.userName }}
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                生产线
                            </template>
                            <el-col :span='23'>
                                {{ data.productLineName }}
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                进线
                            </template>
                            <el-col :span='23'>
                                {{ data.inComingLineName }}
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                期望回收期
                            </template>
                            <el-col :span='23'>
                                {{ data.payBackPeriod }} 年
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                数据参考范围
                            </template>
                            <el-col :span='23'>
                                {{ data.timeScope }}
                            </el-col>
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions
                        class='margin-top'
                        :column='3'
                        title='快切治理参数'
                        border
                    >
                        <el-descriptions-item :width='300'>
                            <template #label>
                                备用进线
                            </template>
                            <el-col :span='23'>
                                {{ data.quick.incomingLineId }}
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                终端容量
                            </template>
                            <el-col :span='23'>
                                {{ data.quick.governMachinePower }} kVA
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                配置价格
                            </template>
                            <el-col :span='23'>
                                {{ data.quick.price }} 万元
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                建设成本
                            </template>
                            <el-col :span='23'>
                                {{ data.quick.buildFee }} 万元
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                年维护费用
                            </template>
                            <el-col :span='23'>
                                {{ data.quick.quickMaintainFee }} 万元
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                动作时间
                            </template>
                            <el-col :span='23'>
                                {{ data.quick.actionTime }} ms
                            </el-col>
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions
                        class='margin-top'
                        :column='3'
                        title='治理信息'
                        border
                    >
                        <el-descriptions-item :width='300'>
                            <template #label>
                                初期投资
                            </template>
                            <el-col :span='23'>
                                {{ data.quickData.investYearArray[0] }} 万元
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                投资回收期
                            </template>
                            <el-col :span='23'>
                                {{ data.quickData.actualPayBack }}
                            </el-col>
                        </el-descriptions-item>
                        <el-descriptions-item :width='300'>
                            <template #label>
                                治理效果
                            </template>
                            <el-col :span='23'>
                                {{ data.quickData.governEffectArray[0] }} 万元/年
                            </el-col>
                        </el-descriptions-item>

                    </el-descriptions>
                    <!--治理信息描述，左边文字描述，右边经济曲线图-->
                    <el-row style='width: 100%;margin-top: 10px'>
                        <el-col :span='9' style='height: 285px;' class='intro'>
                            <div class='item '>
                                <h3>
                                    方案治理描述
                                </h3>
                                <div class='con' v-html='quickResult'></div>
                            </div>
                        </el-col>
                        <el-col :span='15' style='height: 285px'>
                            <my-echart :options='optionsQuick' v-if='optionsQuick' />
                        </el-col>
                    </el-row>

                </el-collapse-item>
            </el-collapse>
        </el-col>


    </el-row>
</template>
<script setup lang='ts'>
import emitter from '@/utils/emitter'
import { TrophyBase, TrendCharts, Coin, PieChart, GoldMedal, InfoFilled } from '@element-plus/icons-vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import radar from '@/components/echarts/radar.vue'
import { ref, reactive, onMounted, onUnmounted, onBeforeUnmount } from 'vue'

const bestId = ref()
const data = ref({
    'id': null,
    'userName': '',
    'productLineId': '',
    'productLineName': '',
    'inComingLineName': '',
    'evaluationBatch': '',
    'bestSchemeId': '',
    'payBackPeriod': 0,
    'timeScope': '',
    'governPower': 0,
    'eventCount': 0,
    'breakCount': 0,
    'loss': 0,
    'yearLoss': 0,
    'ups': {
        'price': 0,
        'compensation': 0,
        'maintainFee': 0,
        'responseTime': 0,
        'backupTime': 0
    },
    'avc': {
        'price': 0,
        'compensation': 0,
        'maintainFee': 0,
        'responseTime': 0,
        'backupTime': 0
    },
    'quick': {
        'incomingLineId': '',
        'governMachinePower': 0,
        'price': 0,
        'buildFee': 0,
        'quickMaintainFee': 0,
        'actionTime': 0
    },
    'upsData': {
        'id': '',
        'evaluationBatch': '',
        'schemeParamId': '',
        'type': 0,
        'eventCount': 0,
        'breakCount': 0,
        'loss': 0.0,
        'yearLoss': 0.0,
        'size': '',
        'count': 0,
        'power': 0,
        'equipment': 0,
        'maintain': 4,
        'yearsArray': [],
        'investYearArray': [],
        'governEffectArray': [],
        'payBackArray': [],
        'costArray': [],
        'investYieldArray': [],
        'actualPayBack': 0,
        'riskLevelBefore': '',
        'riskLevelAfter': '',
        'radarResult': 0,
        'radarRisk': 0,
        'radarWish': 0,
        'sagImmunity': 0,
        'investmentResult': 0
    },
    'avcData': {
        'id': '',
        'evaluationBatch': '',
        'schemeParamId': '',
        'type': 0,
        'eventCount': 0,
        'breakCount': 0,
        'loss': 0,
        'yearLoss': 0,
        'size': '',
        'count': 0,
        'power': 0,
        'equipment': 0,
        'maintain': 0,
        'yearsArray': [],
        'investYearArray': [],
        'governEffectArray': [],
        'payBackArray': [],
        'costArray': [],
        'investYieldArray': [],
        'actualPayBack': 0,
        'riskLevelBefore': '',
        'riskLevelAfter': '',
        'radarResult': 0,
        'radarRisk': 0,
        'radarWish': 0,
        'sagImmunity': 0,
        'investmentResult': 0
    },
    'upsRtsData': null,
    'quickData': {
        'id': '',
        'evaluationBatch': '',
        'schemeParamId': '',
        'type': 0,
        'eventCount': 0,
        'breakCount': 0,
        'loss': 0,
        'yearLoss': 0,
        'size': '',
        'count': 0,
        'power': 0,
        'equipment': 0,
        'maintain': 0,
        'yearsArray': [],
        'investYearArray': [],
        'governEffectArray': [],
        'payBackArray': [],
        'costArray': [],
        'investYieldArray': [],
        'actualPayBack': 0,
        'riskLevelBefore': '',
        'riskLevelAfter': '',
        'radarResult': 0,
        'radarRisk': 0,
        'radarWish': 0,
        'sagImmunity': 0,
        'investmentResult': 0
    }
})
const activeName = ref()
const upsResult = ref('')
const avcResult = ref('')
const quickResult = ref('')
const schemeName = ref('安装UPS治理终端')
const bestData = ref({
    'type': 0,
    'eventCount': 0,
    'breakCount': 0,
    'loss': 0.0,
    'yearLoss': 0.0,
    'size': '[2200*1100*2000]',
    'count': 0,
    'power': 0,
    'equipment': 0,
    'maintain': 0,
    'yearsArray': [],
    'investYearArray': [],
    'payBackArray': [],
    'costArray': [],
    'investYieldArray': [],
    'actualPayBack': 0,
    'riskLevelBefore': '',
    'riskLevelAfter': '',
    'radarResult': 0,
    'radarRisk': 0,
    'radarWish': 0,
    'sagImmunity': 0,
    'investmentResult': 0
})
// 雷达图option
const options = ref()
//ups的option
const optionsUps = ref()
//avc的option
const optionsAvc = ref()
//quick的option
const optionsQuick = ref()

defineOptions({
    name: 'schemeResult'
})


//监听治理后返回的数据
// 绑定事件
emitter.on('send-scheme-result', (resultData: any) => {
    data.value = resultData
    //找到最佳治理方案
    bestId.value = data.value.bestSchemeId
    const upsData = data.value.upsData
    const avcData = data.value.avcData
    const quickData = data.value.quickData
    if (bestId.value == upsData.id) {
        schemeName.value = '安装UPS治理终端'
        bestData.value = upsData
        activeName.value = '1'
    } else if (bestId.value == avcData.id) {
        schemeName.value = '安装AVC治理终端'
        bestData.value = avcData
        activeName.value = '2'
    } else if (bestId.value == quickData.id) {
        schemeName.value = '安装快切开关终端'
        bestData.value = quickData
        activeName.value = '3'
    }
    upsResult.value = '在' + resultData.timeScope + '期间，贵公司共经历了' + resultData.eventCount + '次电压暂降，其中导致生产线中断的有' + resultData.breakCount + '次。本电压暂降治理方案为UPS补偿进行治理，该方案初期投资为' + resultData.upsData.investYearArray[0] + '万元；年维护费用为' + resultData.upsData.maintain + '万元；应用本方案后，预计每年减少经济损失' + resultData.upsData.governEffectArray[0] + '万元，投资回收期为' + resultData.upsData.actualPayBack + '年。'
    avcResult.value = '在' + resultData.timeScope + '期间，贵公司共经历了' + resultData.eventCount + '次电压暂降，其中导致生产线中断的有' + resultData.breakCount + '次。本电压暂降治理方案为AVC补偿进行治理，该方案初期投资为' + resultData.avcData.investYearArray[0] + '万元；年维护费用为' + resultData.avcData.maintain + '万元；应用本方案后，预计每年减少经济损失' + resultData.avcData.governEffectArray[0] + '万元，投资回收期为' + resultData.avcData.actualPayBack + '年。'
    quickResult.value = '在' + resultData.timeScope + '期间，贵公司共经历了' + resultData.eventCount + '次电压暂降，其中导致生产线中断的有' + resultData.breakCount + '次。本电压暂降治理方案为开关快切进行治理，备用电源为<span class=\'underline\' style=\'padding-bottom: 0px;border-bottom: 1px solid #fff;\'>' + resultData.quick.incomingLineId + '</span>。该方案初期投资为' + resultData.quickData.investYearArray[0] + '万元；年维护费用为' + resultData.quickData.maintain + '万元；应用本方案后，预计每年减少经济损失' + resultData.quickData.governEffectArray[0] + '万元，投资回收期为' + resultData.quickData.actualPayBack + '年。'

    const upsRada = [upsData.radarResult, upsData.radarRisk, upsData.radarWish, upsData.sagImmunity]
    const avcRada = [avcData.radarResult, avcData.radarRisk, avcData.radarWish, avcData.sagImmunity]
    const quickRada = [quickData.radarResult, quickData.radarRisk, quickData.radarWish, quickData.sagImmunity]
    setEChart(upsRada, avcRada, quickRada)
    setInvestEChart(upsData.yearsArray, upsData.investYearArray, upsData.payBackArray, upsData.governEffectArray, 0)
    setInvestEChart(avcData.yearsArray, avcData.investYearArray, avcData.payBackArray, avcData.governEffectArray, 1)
    setInvestEChart(quickData.yearsArray, quickData.investYearArray, quickData.payBackArray, quickData.governEffectArray, 3)
})

/**
 * 将数据动态放入雷达图
 */
const setEChart = (upsRada, avcRada, quickRada) => {
    const optionsTemp = {
        legend: {
            align: 'left',
            data: ['UPS', 'AVC', '开关快切']
        },
        tooltip: {
            trigger: 'item'
        },

        radar: {
            shape: 'circle',
            indicator: [
                { name: '治理效果', max: 1 },
                { name: '去风险能力', max: 1 },
                { name: '投资意愿', max: 1 },
                { name: '暂降免疫能力', max: 1 }
            ],
            splitArea: {
                areaStyle: {
                    color: ['#A52A2A', '#C06825', '#DAA520', '#84983C', '#2E8B57'],
                    shadowColor: 'rgba(0, 0, 0, 0.2)',
                    shadowBlur: 10
                }
            }
        },
        series: [
            {
                name: 'Budget vs spending',
                type: 'radar',
                data: [
                    {
                        value: upsRada,
                        name: 'UPS'
                    },
                    {
                        value: avcRada,
                        name: 'AVC'
                    },
                    {
                        value: quickRada,
                        name: '开关快切'
                    }
                ]
            }
        ]
    }
    options.value = optionsTemp
}

/**
 * 将数据放入ups曲线
 */
const setInvestEChart = (yearsArray, investYearArray, payBackArray, governEffectArray, type) => {
    const optionsTemp = {
        xAxis: {
            type: 'category',
            name: '年份',
            data: yearsArray,
            boundaryGap: false
        },
        yAxis: {
            type: 'value',
            name: '万元'
        },
        series: [
            {
                data: investYearArray,
                type: 'line',
                name: '用户投资'
            },
            {
                data: governEffectArray,
                type: 'line',
                name: '治理效果'
            },
            {
                data: payBackArray,
                type: 'line',
                name: '用户收益'
            }
        ],
        options: {
            dataZoom: null
        }
    }
    type == 0 ? optionsUps.value = optionsTemp
        : type == 1 ? optionsAvc.value = optionsTemp
            : type == 3 ? optionsQuick.value = optionsTemp : ''

}

//解绑数据监听
onUnmounted(() => {
    // 解绑事件
    emitter.off('send-scheme-result')
})
</script>
<style scoped>

.fourDiv {
    background-image: linear-gradient(to top, #31BAFB 0%, #205DE9 99%, #205DE9 100%);
    color: #fff;
    border-radius: 8px;
    height: 100%
}

.divHeader {
    display: flex;
    padding: 5px 8px;
    font-size: 18px;
}

.headerIcon {
    margin-left: 5px;
    font-size: 25px;
}

.headerTxt {
    margin-left: 10px;
}

.nablaFont {
    font-family: nablaRegular;
}

.yellowFont {
    color: #DAA520;
    font-size: 30px;
}

.subDivOne {
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: space-evenly;
    align-items: flex-end;
}

.subDivTwo {
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: space-evenly;
    align-items: center;
}

.subDivThree {
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: space-evenly;
    align-items: flex-start;
}

.valueDiv {
    font-family: AlimamaDongFangDaKai;
    font-size: 18px;
}

.header-icon {
    margin-right: 10px;
    font-size: 25px;
    color: #19a15f;
}

::v-deep .el-collapse-item__header {
    font-family: AlimamaDongFangDaKai;
    font-size: 20px;
}

::v-deep .el-descriptions__header {
    margin-bottom: 0 !important;
    font-family: AlimamaDongFangDaKai;
}

.el-collapse-item__content {
    margin-bottom: 5px !important;
}

.intro {
    color: #fff;
    border-radius: 10px;
    padding: 20px;
    background: -webkit-gradient(linear, left top, left bottom, from(#2057e8), to(#31befb));
    background: -webkit-linear-gradient(top, #2057e8 0%, #31befb 100%);
    background: -o-linear-gradient(top, #2057e8 0%, #31befb 100%);
    background: linear-gradient(to bottom, #2057e8 0%, #31befb 100%);
}

.intro h3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 20px;
    font-size: 16px;
}

.intro .con {
    font-size: 15px;
    line-height: 30px;
    color: #fff;
    text-indent: 2.5em;
    text-align: justify;
}

.intro .underline {
    padding-bottom: 10px;
    border-bottom: 1px solid #fff;
}


</style>