<template>
    <div>
        <div class="bigBox">
            <div class="headBox">
                <div class="title">风险统计信息</div>
            </div>
            <div class="top-box">
                <div class="box">
                    <span class="top-font  gre">{{ listQuery.allCount }}</span>
                    <span class="bot-lab">风险总数</span>
                </div>
                <div class="box">
                    <span class="top-font red">{{ listQuery.R }}</span>
                    <span class="bot-lab">重大风险</span>
                </div>
                <div class="box">
                    <span class="top-font org">{{ listQuery.O }}</span>
                    <span class="bot-lab">较大风险</span>
                </div>
                <div class="box">
                    <span class="top-font yel">{{ listQuery.Y }}</span>
                    <span class="bot-lab">一般风险</span>
                </div>
                <div class="box">
                    <span class="top-font blu">{{ listQuery.B }}</span>
                    <span class="bot-lab">低风险</span>
                </div>
            </div>
            <div class="blo-ear">
                <Barlins :loadingshow="barsShow" ids="fxtjxq" :title='"风险统计信息"' :xData="xData" :yData="yData"
                    @clickOrgId="clickOrgId" />
            </div>
        </div>
        <!-- 风险详情 -->
        <div v-if="fxxqshow" class="dialogs">
            <fxxqpag :listQuery="obj" @close="fxxqshow = false" />
        </div>
    </div>
</template>
<script setup>
// 引入
import { reactive, onMounted, ref, watch } from "vue";
import { filterYear } from "@/utils/auth.js";
import { getApi, deleteApi, postApi } from "@/api/tobAcco_api.js";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import * as MOSTY from "@/components/MyComponents/index";
import Barlins from "./barlins.vue";
import fxxqpag from "./fxxqpag.vue";
const store = useStore();
const route = useRoute()
const router = useRouter();
const barsShow = ref(false)
const fxxqshow = ref(false)
const obj = ref({})
const xData = ref([])
const yData = ref(
    [
        {
            name: '重大风险',
            type: 'bar',
            data: [0],
            color: "#f54336"
        },
        {
            name: '较大风险',
            type: 'bar',
            data: [0],
            color: "#fb8734"
        },
        {
            name: '一般风险',
            type: 'bar',
            data: [0],
            color: "#fbcc02"
        },
        {
            name: '低风险',
            type: 'bar',
            data: [0],
            color: "#4994f1"
        }
    ]
)
// 分页
const listQuery = ref({
    allCount: 0,
    R: 0,
    O: 0,
    Y: 0,
    B: 0,
});

onMounted(() => {
    obj.value.planid = route.query.planid;
    let data = {
        entityCode: route.query.entityCode,
        planid: route.query.planid
    }
    getxqtatl(data)

});
//
function getxqtatl(data) {
    getApi(data, '/mosty-jcgl/fxtj/getTjInfo').then(res => {
        listQuery.value = res
        xData.value = res.list.map(item => {
            return item.orgname
        })
        yData.value[0].data = res.list.map(item => {
            return { value: item.R, risklevel: '4', orgid: item.orgid }
        })
        yData.value[1].data = res.list.map(item => {
            return { value: item.O, risklevel: '3', orgid: item.orgid }
        })
        yData.value[2].data = res.list.map(item => {
            return { value: item.Y, risklevel: '2', orgid: item.orgid }
        })
        yData.value[3].data = res.list.map(item => {
            return { value: item.B, risklevel: '1', orgid: item.orgid }
        })
        barsShow.value = true

    })
}
//柱状图点击事件
function clickOrgId(val) {
    obj.value.risklevel = val.data.risklevel;
    obj.value.depcode = val.data.orgid;
    fxxqshow.value = true

}

</script>
<style lang="scss" scoped>
.bigBox {

    .headBox {
        margin-top: 10px;
        background-color: #fff;
        height: 60px;
        display: flex;
        justify-content: space-between;
        position: relative;
        z-index: 2;
        width: 100%;

        .title {
            height: 60px;
            line-height: 60px;
            font-size: 18px;
            color: #0f3916;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-left: 10px;

            .el-icon {
                cursor: pointer;
            }
        }
    }

}

.top-box {
    display: flex;
    justify-content: center;
    margin: 10px auto;

    .box {
        width: 175px;
        height: 80px;
        text-align: center;
        margin: 0 20px;

        >span {
            display: block;
        }

        .top-font {
            font-size: 32px;
            color: #fff !important;
            height: 52px;
            line-height: 52px;

        }

        .bot-lab {
            font-size: 15px;
            color: #000 !important;
            height: 30px;
            line-height: 30px;
            background-color: #eeeeee;
        }


    }
}

.gre {
    background-color: #33495F;
}

.red {
    background-color: #f54336;
}

.org {
    background-color: #fb8734;
}

.yel {
    background-color: #fbcc02;
}

.blu {
    background-color: #4994f1;
}

.blo-ear {
    width: 100%;
    height: calc(100vh - 41vh);
    margin: 20px;
}

.dialogs {
    position: absolute;
    top: 10%;
    left: 20%;
    z-index: 3;
    width: 64%;
    padding: 0 10px;
    box-sizing: border-box;
    height: 40vh;
    background-color: #fff;
}
</style>