<template>
    <section class='bottom-modules modules'>
        <section class="header">
            <article class="posi">
                <MOSTY.Assort title="" />
            </article>
            <section class="tabs">
                <article v-for="(item, index) in listData" :key="index" :class="{ 'active': actives == item.id }"
                    @click="handleTabs(item.id)">{{ item.title }}</article>
            </section>
        </section>
        <el-divider style="margin: 0 !important;border-color: #EFEFEF;border-width: 3px;" />
        <div v-if="actives == 1">
            <section class="charts">
                <article class="cha">
                    <h3>隐患整改完成率</h3>
                    <span class="percent">{{ obj.yhRate }}<span style="font-size: 12px;">%</span></span>
                    <span class="text">今日数据</span>
                    <div id="waveChart" class="liquidfill"></div>
                </article>
                <article class="cha">
                    <h3>红橙占比</h3>
                    <span class="percent">{{ obj.bmbsRate }}<span style="font-size: 12px;">%</span></span>
                    <div id="dashboard" class="liquidfill fxkz" style="width: 100px;height: 100px;"></div>
                </article>
                <article class="grow">
                    <div class="grow-l">
                        <h3>应急演练</h3>
                        <div class="grow-flex">
                            <img :src="getImgUrl('gzt/icon_11.png')">
                            <span>{{ obj.ylCount }}次</span>
                        </div>
                    </div>
                    <el-divider style="margin: 0 !important;height: 33px;" direction="vertical" />
                    <div class="grow-l">
                        <h3>培训学习</h3>
                        <div class="grow-flex">
                            <img :src="getImgUrl('gzt/icon_12.png')">
                            <span>{{ obj.pxCount }}次</span>
                        </div>
                    </div>
                </article>
            </section>
            <el-divider style="margin: 0 !important;border-color: #EFEFEF;border-width: 3px;" />
            <section class="chart-line">
                <div id="chartContainer" style="width: 100%; height: 300px;" :key="keys"></div>
            </section>
        </div>
        <div v-else>
            <section style="height: 36vh;">
                <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :tableloading="tableloading"
                    :isSelect="false" :isSort="false" :tableHeight="'100%'" @SortChange="SortChange">
                    <template #type="{ row }">
                        <dict-tag :options="D_BZ_FXLX" :value="row.type" :tag="false" />
                    </template>
                    <template #jcpl="{ row }">
                        <dict-tag v-if='row.jcpl' :options="D_BZ_JCBZPL" :value="row.jcpl" :tag="false" />
                        <span v-else>--</span>
                    </template>
                    <template #risklevel="{ row }">
                        <span v-if="row.risklevel == '4'" class="fxdjspan reds">重大风险</span>
                        <span v-else-if="row.risklevel == '3'" class="fxdjspan orgs">较大风险</span>
                        <span v-else-if="row.risklevel == '2'" class="fxdjspan blus">一般风险</span>
                        <span v-else-if="row.risklevel == '1'" class="fxdjspan gres">低风险</span>
                        <span v-else>待定</span>
                    </template>
                    <template #actions="{ row }">
                        <span class="operesee" @click="See(row)"> <el-icon>
                                <View />
                            </el-icon>查看</span>
                    </template>
                </MOSTY.Table>
            </section>
            <div class="fenye">
                <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
            </div>
        </div>

    </section>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { getImgUrl } from "@/utils/tools.js"
import * as echarts from 'echarts';
import 'echarts-liquidfill';
import { getApi } from "@/api/tobAcco_api.js";
import { ref, shallowRef, onMounted, nextTick, watch, reactive, getCurrentInstance } from 'vue'
import { get } from "lodash";
const { proxy } = getCurrentInstance();
const { D_BZ_JCBZPL, D_BZ_FXLX } = proxy.$dict("D_BZ_JCBZPL", "D_BZ_FXLX");
const router = useRouter();
const store = useStore();
const keys = ref(1)
const listData = ref([
    { title: '隐患统计', id: 1 },
    { title: '风险预警', id: 2 },

])
const obj = ref({
    ylCount: 0,
    yhRate: 0,
    pxCount: 0,
    bmbsRate: 0
})
const actives = ref(1)
const chart2 = shallowRef(null)
const tableColumns = reactive([
    {
        title: "编号",
        prop: "shortid"
    },

    {
        title: "风险类型",
        prop: "type",
        slot: true
    },
    {
        title: "辨识区域",
        prop: "objname",
    },
    {
        title: "风险等级",
        prop: "risklevel",
        slot: true
    },

])
const tableloading = ref(false);
const tableData = ref([]);
// 分页
const listQuery = reactive({
    pageCurrent: 1,
    pageSize: 20,
    total: 0,
    year: new Date().getFullYear()
});
const handleTabs = _index => {
    actives.value = _index
    if (_index == 2) {
        getTableData();
    } else {
        getyhcount()



    }
}
watch(() => store.getters.sidebarOpened, () => {
    setTimeout(() => {
        chart2.value.resize();
    }, 500)
})
onMounted(() => {
    getyhcount()



})
//隐患统计
function getyhcount() {
    getApi({}, '/mosty-jcgl/basicData/getYhStatistics').then(res => {
        obj.value.ylCount = res.ylCount ? res.ylCount : 0
        obj.value.yhRate = res.yhRate ? res.yhRate : 0
        obj.value.pxCount = res.pxCount ? res.pxCount : 0
        obj.value.bmbsRate = res.bmbsRate ? res.bmbsRate : 0
    })
    geteach()
}
function geteach() {
    getApi({}, '/mosty-jcgl/basicData/getYhLine').then(res => {
        initchar(res.dataList, res.timeList)
    })
}
//风险预警
function getTableData() {
    tableloading.value = true;
    getApi(listQuery, '/mosty-jcgl/identify/getBsPageList').then(res => {
        tableData.value = res.records;
        listQuery.total = res.total;
        listQuery.pageSize = res.size;

    }).finally(() => {
        tableloading.value = false;
    })
}
//页码发生变化
const handleCurrentChange = (val) => {
    listQuery.pageCurrent = val;
    getTableData();
};
//查询条数发生变化
const handleSizeChange = (val) => {
    listQuery.pageSize = val;
    getTableData();
};
function initchar(dataList, timeList) {
    // keys.value++
    nextTick(() => {
        const chart = echarts.init(document.getElementById('waveChart'));
        const chart1 = echarts.init(document.getElementById('dashboard'));
        chart2.value = echarts.init(document.getElementById('chartContainer'));
        const option = {
            series: [
                {
                    type: 'liquidFill',
                    // 水波图的配置
                    data: [obj.value.yhRate], // 设置水位，值为0到1之间
                    radius: '90%', // 设置图的大小
                    color: ['#20E0A5'],
                    outline: {
                        borderDistance: 0, // 外边框距离
                        itemStyle: {
                            borderWidth: 2, // 外边框宽度
                            borderColor: '#20E0A5' // 外边框颜色
                        }
                    },
                    backgroundStyle: {
                        color: '#fff' // 背景色
                    },
                    label: {
                        show: false
                    }
                },
            ],
        };
        let colorTemplate1 = [[0.2, "#24CCB8"], [0.8, "#24CCB8"], [1, "#24CCB8"]];

        // 指定图表的配置项和数据
        let option1 = {
            backgroundColor: "transparent",
            series: [
                {
                    type: "gauge",          // 系列类型
                    center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
                    min: 1,                 // 最小的数据值,默认 0 。映射到 minAngle。
                    max: 4,               // 最大的数据值,默认 100 。映射到 maxAngle。
                    splitNumber: 3,        // 仪表盘刻度的分割段数,默认 10。

                    axisLine: {             // 仪表盘轴线(轮廓线)相关配置。
                        show: true,             // 是否显示仪表盘轴线(轮廓线),默认 true。
                        lineStyle: {            // 仪表盘轴线样式。
                            color: colorTemplate1,  //仪表盘的轴线可以被分成不同颜色的多段。每段的  结束位置(范围是[0,1]) 和  颜色  可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                            opacity: 1,                 //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                            width: 2,                  //轴线宽度,默认 30。
                            shadowBlur: 2,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
                            shadowColor: "#fff",        //阴影颜色。支持的格式同color。
                        }
                    },

                    splitLine: {            // 分隔线样式。
                        show: true,             // 是否显示分隔线,默认 true。
                        lineStyle: {            // 分隔线样式。
                            color: "#24CCB8",              //线的颜色,默认 #eee。
                            opacity: 1,                 //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                            width: 1,                   //线度,默认 2。
                            shadowBlur: 10,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
                            shadowColor: "#fff",        //阴影颜色。支持的格式同color。
                        }
                    },

                    axisTick: {             // 刻度(线)样式。
                        show: false,             // 是否显示刻度(线),默认 true。
                        splitNumber: 1,         // 分隔线之间分割的刻度数,默认 5。
                        length: 50,
                        lineStyle: {            // 刻度线样式。   
                            color: "#24CCB8",              //线的颜色,默认 #eee。
                            opacity: 1,                 //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                            width: 1,                   //线度,默认 1。
                            type: "solid",              //线的类型,默认 solid。 此外还有 dashed,dotted
                            shadowBlur: 10,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
                            shadowColor: "#fff",        //阴影颜色。支持的格式同color。
                        },
                    },

                    axisLabel: {            // 刻度标签。
                        show: true,             // 是否显示标签,默认 true。
                        color: "#E3E8EB",          // 文字的颜色,默认 #fff。
                        fontSize: 12,           // 文字的字体大小,默认 5。
                    },

                    pointer: {              // 仪表盘指针。
                        show: true,             // 是否显示指针,默认 true。
                        width: 2,               // 指针宽度,默认 8。
                    },

                    itemStyle: {            // 仪表盘指针样式。
                        color: '#16DBCC',          // 指针颜色，默认(auto)取数值所在的区间的颜色
                        opacity: 1,             // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                        borderType: "solid",    // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
                        borderColor: "#16DBCC",    // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
                        shadowBlur: 10,         // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
                        shadowColor: "#fff",    // 阴影颜色。支持的格式同color。
                    },

                    title: {                // 仪表盘标题。
                        show: true,             // 是否显示标题,默认 true。
                        offsetCenter: [0, "95%"],//相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                        color: "#74798C",          // 文字的颜色,默认 #333。
                        fontSize: 12,
                    },

                    detail: {               // 仪表盘详情，用于显示数据。
                        show: false,             // 是否显示详情,默认 true。
                    },
                    data: [{ name: "红橙占比", value: obj.value.bmbsRate }]
                }
            ]

        };
        let option2 = {
            title: {
                text: '面积图隐患趋势分析示例',
                left: 'center'
            },
            xAxis: {
                type: 'category',
                data: timeList
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: dataList,
                type: 'line',
                areaStyle: {
                    color: '#24CCB8',
                    opacity: 0.4
                },
                lineStyle: {
                    color: '#24CCB8'
                },
                itemStyle: {
                    normal: {
                        color: '#24CCB8', // 连接点的颜色
                    }
                },
            }]
        }
        chart.setOption(option);
        chart1.setOption(option1);
        chart2.value.setOption(option2);
    })
}
</script>
<style scoped lang="scss">
@import '../style/index.scss';

.bottom-modules {
    position: relative !important;
    padding: 0 !important;
}

.header {
    display: flex;

    .posi {
        margin-left: 16px;
        width: 10px;
    }

    .tabs {
        display: flex;
        align-items: center;
        color: #666666;
        font-size: 14px;

        >article {
            margin-right: 23px;
            cursor: pointer;

            &:hover {
                color: var(--el-color-primary);
            }
        }

        .active {
            color: #000000;
            font-size: 16px;
        }
    }
}

.charts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 84px;
    background: #EFEFEF;

    >article {
        background: #fff;
        margin-right: 4px;
        height: 100%;

        &:last-child {
            margin-right: 0;
        }
    }

    .cha {
        width: 160px;
        padding: 10px 0 0 8px;
        box-sizing: border-box;
        position: relative;

        >h3 {
            margin: 0;
            color: #20253A;
            font-size: 14px;
        }

        .percent {
            display: block;
            color: #333333;
            font-size: 16px;
            margin-top: 12px;
        }

        .text {
            color: #666666;
            font-size: 12px;
            transform: scale(0.8, 0.8)
        }

        .liquidfill {
            position: absolute;
            bottom: 10px;
            right: 8px;
            width: 56px;
            height: 56px;
        }

        .fxkz {
            right: -8px;
            bottom: -3px;
        }
    }

    .grow {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 8px;
        box-sizing: border-box;

        .grow-l {
            width: calc(50% - 10px);
            text-align: center;

            >h3 {
                margin: 0;
                color: #74798C;
                font-size: 14px;
                min-height: 26px;
            }

            .grow-flex {
                display: flex;
                align-items: center;
                justify-content: center;

                >img {
                    width: 22px;
                    height: 22px;
                }

                >span {
                    margin-left: 2px;
                    color: #282D30;
                    font-size: 14px;
                }
            }
        }
    }
}

.chart-line {
    margin-top: 12px;
}
</style>