<template>
    <div class="wrapper">
        <LHeader :text="text"></LHeader>
        <div class="section">
            <p>该次测评风险值为：</p>
            <div class="resultScore" :style="{ background: backgroundColor}" >
                <p style="font-weight: bold;font-size: 20px;color: white;">{{ score }}</p>
            </div>
            <p>本次评估结果评定为：{{ level }}</p>
            <van-divider></van-divider>
            <van-field readonly label="所属模型：" placeholder="ls风险矩阵评估模型" />
            <van-field readonly label="风险发生可能性:" placeholder="一般情况不会发生" :value="possibleValue"/>
            <van-field readonly label="后果严重程度" placeholder="轻微影响" :value="severityValue"/>
            <van-field readonly label="判定标准：" placeholder="见下图" />
            <van-image width="90vw" height="auto" :src="require('@/assets/workbench/sst.jpg')" />
        </div>
        <div style="display: flex;margin: 10px 16px 0px; padding-bottom: 16px">
            <van-button block type="info" @click="sureClose" style="margin-right: 4px;">确认本次测评结果</van-button>
            <van-button block plain type="info" @click="resetClose" style="margin-left: 4px;">取消</van-button>
        </div>

    </div>
</template>

<script>
import { getFun, postFun } from "@/service/table.js";
import LHeader from "@/components/header.vue";
    export default {
        name:'resultPage',
        components:{
            LHeader
        },
        data(){
            return{
                text:'测评结果',
                score:0,
                result:null,
                backgroundColor:'',
                possibleValue:'',
                severityValue:'',
                level:''
            }
        },
        created(){
            // this.score = this.$route.query.score-'';
            const route = this.$route.params;
            this.possibleValue = route.possibleValue;
            this.severityValue = route.severityValue;
            this.score = route.score;
            this.getResult()
        },
        methods:{
            getResult(){
               const bgColor = (()=> {
                    // 低风险：1-2，一般风险：2-3 较大风险：3-4 重大风险：>4
                    switch(this.score){
                        case '一般风险':
                            return '#FFFF00';
                        case "低风险":
                            return "#0091EA";
                        case "较大风险":
                            return "FF9800";
                        case "重大风险":
                            return "FF4433";
                        default:
                        return "orange"
                    }
                     
                })()
                getFun(`/risk/plan/matrix/score/${this.$route.params.score}`).then(res=>{
                    this.result = {
                        color:bgColor,
                        level: res.data.level
                    }
                })
            },
            resetClose(){
                sessionStorage.setItem('level','')
                history.go(-1)
            },
            sureClose(){
                sessionStorage.setItem('level',this.result.level)
                history.go(-1)
            }
        }
    }
</script>

<style lang="less" scoped>
.wrapper {
    width: 100%;
    height: 100%;

    .section {
        width: 100%;
        height: 100%;
        padding: 10px;
        box-sizing: border-box;
        background: #fff;
        font-size: 14px;
    }
    .resultScore{
        width: 48px;
        height: 48px;
        background: #ffc600;
        text-align: center;
        line-height: 48px;
        border-radius: 50%;
        margin: 0 auto;
    }

}
</style>
