<template>
    <div class="wrapper">
        <LHeader :text="text"></LHeader>
        <div class="section">
            <p>该次测评风险值为：</p>
            <div class="resultScore" :style="{ background: result.riskColor }">
                <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`, {
                score: this.score,
                buildingId: sessionStorage.getItem('buildingId')
            }).then(res => {
                if (res.data.levelScore) {
                    this.score = res.data.levelScore;
                }
                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>
