<template>
    <div class="wrapper">
        <LHeader :text="text"></LHeader>
        <div class="section">
            <p>该次测评风险值为：</p>
            <div class="resultScore" :style="{ background: result.color}" >
                <p style="font-weight: bold;font-size: 20px;color: white;">{{ this.score }}</p>
            </div>
            <div>本次评估结果评定为：<h4 style="display: inline-block;">{{ result.level }}</h4></div>
            <ul class="level-group">
                <div>测评风险参考值:</div>
                <li>0%-5% 重大风险</li>
                <li>5%-20% 较大风险</li>
                <li>20%-50% 一般风险</li>
                <li>50%-100% 低风险</li>
            </ul>
            <!-- <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:'modelResult',
        components:{
            LHeader
        },
        data(){
            return{
                text:'测评结果',
                score:0,
                result:null
            }
        },
        created(){
            this.score = this.$route.query.score-'';
            this.getResult()
        },
        methods:{
            getResult(){
                this.result = (()=>{
                    if(this.score<=2){
                        return {level:'低风险',color:"#0091EA"}
                    }else if(this.score>2&&this.score<=3){
                         return {level:'一般风险',color:"#FFFF00"}
                    }else if(this.score>3&&this.score<=4){
                         return {level:'较大风险',color:"#FF9800"}
                    }else if(this.score>4){
                         return {level:'重大风险',color:"#FF4433"}
                    }else{
                         return {level:'',color:"orange"}
                    }
                })()
                
                getFun(`/risk/plan/existing/matrix/score/${this.score}`).then(res=>{
                    if(res.data.score){
                        this.score = res.data.score;
                    }
                    if(res.data.level){
                        this.result.level =  res.data.level;
                    }
                })
            },
            resetClose(){
                history.go(-1)
            },
            sureClose(){
               this.$store.commit('SET_ASSESS_RESULT',{...this.result,score:this.score}) 
               history.go(-3)
            }
        }
    }
</script>

<style lang="less" scoped>
.wrapper {
    width: 100%;
    height: 100%;
    .section {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        background: #fff;
        font-size: 14px;
        padding-bottom: 50px;
    }
    .resultScore{
        width: 48px;
        height: 48px;
        background: #ffc600;
        text-align: center;
        line-height: 48px;
        border-radius: 50%;
        margin: 0 auto;
    }
    .level-group{
        >li{
            padding:0 20px;
            margin-top: 20px;
        }
    }
}
</style>
