<template>
    <div class="inspection">
        <layout>
            <template #left>
                <div class="left_spection">
                    <div class="facility_entry">
                        <HeadlineTag value="按设备统计"></HeadlineTag>
                        <div class="box_arch">
                            <div ref="chartFacility" style="width: 100%;height: 100%;"></div>
                        </div>
                    </div>
                    <div class="flex_spection">
                        <HeadlineTag value="报警列表"></HeadlineTag>
                        <div class="box_arch_point">
                            <div class="point_box" style="margin-top: 10px;margin-left: 15px;">
                                <el-input v-model="input" placeholder="按报警名称搜索" />
                            </div>
                            <div v-if="leftData.realTime && Object.keys(leftData.realTime).length != 0">
                                <alarm :resultData="leftData.realTime"></alarm>
                            </div>
                            <div style="height: calc(100% - 160px);" v-else>
                                <Empty :bottom="true"></Empty>
                            </div>
                            <!-- <div style="height: calc(100% - 160px);">
                                <Empty></Empty>
                            </div>
                            <div class="center_in">
                                <pagination :total="total" v-model:page="queryParams.pageNum"
                                    v-model:limit="queryParams.pageSize" layout="total, prev, pager, next"
                                    @pagination="getList" />
                            </div> -->
                        </div>
                    </div>
                </div>
            </template>
            <template #right>
                <div class="right_spection">
                    <div class="operation_spection">
                        <HeadlineTag type="right" value="24小时告警数量趋势"></HeadlineTag>
                        <div class="entry" style="margin-right: 15px;">
                            <div class="entry-box">
                                <div class="entry-box-item">
                                    <div class="item-center-line"></div>
                                    <div class="item-center-pie"></div>
                                </div>
                            </div>
                            <div class="left_water">
                                <span class="water_span_title">{{ leftData.EventRisk }}</span>
                                <div class="tile_fx">事件风险</div>
                            </div>
                            <div class="right_water">
                                <span class="water_span_title">{{ leftData.AlarmRisk }}</span>
                                <div class="tile_fx">告警风险</div>
                            </div>
                            <div class="box_water_drop">
                                <div style="width: 140px;height: 140px;">
                                    <waterdrop width="100%" fontSize="32px" circleBackGround="rgb(8, 36, 62)"
                                        birderColor="transparent" color="rgb(42, 139, 247)"
                                        :heightTop="'-' + leftData.trend + '%'" :dropTitle="leftData.trend + '%'">
                                    </waterdrop>
                                </div>
                                <!-- <div ref="chartWater" style="width: 140px;height: 140px;"></div> -->
                            </div>
                        </div>
                    </div>
                    <div class="flex_spection">
                        <HeadlineTag type="right" value="24小时告警数量趋势"></HeadlineTag>
                        <div class="box_arch">
                            <div ref="chartRouting" style="width: 100%;height: 100%;"></div>
                        </div>
                    </div>
                    <div class="flex_spection" style="height: 33%;">
                        <HeadlineTag type="right" value="实时监控"></HeadlineTag>
                        <div class="box_arch" v-if="leftData.realTime && Object.keys(leftData.realTime).length != 0">
                            <inspection :resultData="leftData.realTime"></inspection>
                        </div>
                        <Empty :bottom="true" v-else></Empty>
                    </div>
                </div>
            </template>
        </layout>
    </div>
</template>

<script setup>
import { getInvade } from "@/api/system/invade"
import waterdrop from '@/components/waterdrop'
import layout from "@/components/layout_/index.vue";
import HeadlineTag from '@/components/HeadlineTag'
import Empty from '@/components/Empty'
import alarm from './alarm.vue'
import inspection from './inspection.vue'
import * as echarts from 'echarts'
import 'echarts-liquidfill';
const route = useRoute()
const total = ref(0);
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
});
const input = ref('')
/** 查询列表 */
function getList() {
};
const chartRouting = ref(null);
let chartInstance = null;
// 初始化图表
const initChart = () => {
    chartInstance = echarts.init(chartRouting.value);
    chartInstance.setOption({
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(0, 255, 233,0)',
                            },
                            {
                                offset: 0.5,
                                color: 'rgba(255, 255, 255,1)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(0, 255, 233,0)',
                            },
                        ],
                        global: false,
                    },
                },
            },
        },
        grid: {
            top: '5%',
            left: '5%',
            right: '5%',
            bottom: '5%',
            containLabel: true,
        },
        xAxis: [
            {
                type: 'category',
                axisLine: {
                    show: true,
                },
                splitArea: {
                    // show: true,
                    color: '#f00',
                    lineStyle: {
                        color: '#f00',
                    },
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        fontSize: 12,
                        color: 'rgba(255,255,255,1)',
                    },
                    formatter: function (params) {
                        return '2021.11.' + params;
                    },
                },
                splitLine: {
                    show: false,
                },
                boundaryGap: false,
                data: [
                    '1',
                    '2',
                    '3',
                    '4',
                    '5',
                    '6',
                    '7',
                    '8',
                    '9',
                    '10',
                    '11',
                    '12',
                    '13',
                    '14',
                    '15',
                ],
            },
        ],
        yAxis: [
            {
                type: 'value',
                min: 0,
                // max: 140,
                splitNumber: 4,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: ['#fff'],
                        opacity: 0.06,
                    },
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        fontSize: 12,
                        color: 'rgba(255,255,255,1)',
                    },
                },
                axisTick: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: '注册总量',
                type: 'line',
                smooth: true, //是否平滑
                showAllSymbol: true,
                // symbol: 'image://./static/images/guang-circle.png',
                symbol: 'circle',
                symbolSize: 10,
                lineStyle: {
                    normal: {
                        color: '#FFBC0D',
                        shadowColor: 'rgba(0, 0, 0, 0)',
                        shadowBlur: 0,
                        shadowOffsetY: 5,
                        shadowOffsetX: 5,
                    },
                },
                label: {
                    show: false,//圆点上方数值
                    position: 'top',
                    textStyle: {
                        color: 'rgb(218 255 232)',
                        fontSize: 16,
                    },
                },
                itemStyle: {
                    color: '#FFBC0D',
                    borderColor: 'rgb(108,78,0)',
                    borderWidth: 1,
                    shadowColor: 'rgba(0, 0, 0, 0)',
                    shadowBlur: 0,
                    shadowOffsetY: 2,
                    shadowOffsetX: 2,
                },
                tooltip: {
                    show: false,
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(255,188,13, 0.4)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(255,188,13, 0)',
                            },
                        ],
                        global: false, // 缺省为 false
                    },
                },
                data: [
                    30,
                    32,
                    32,
                    32,
                    32,
                    38,
                    32,
                    33,
                    36,
                    32,
                    32,
                    32,
                    34,
                    32,
                    32,
                ],
            },
        ],
    });
};
const chartFacility = ref(null);
let chartInstanceFacility = null;
const initFacility = (data, total) => {
    let nameList = [
        '超危报警',
        '高危报警',
        '中危报警',
        '低危报警',
        '设备预警',
    ];
    let valueList = [612.5, 548.7, 300.2, 300, 900];
    if (data) {
        valueList = data
    }
    let colorList = ['#FB6A66', '#FFC949', '#867DFF', '#06CA70', '#008AFF'];
    let totalNum = 1000; // 数据总数
    if (total) {
        totalNum = total
    }
    let emue = ['red', 'yellow', 'purple', 'green', 'blue'];
    var category = nameList.map((item, index) => {
        return {
            value: valueList[index],
            itemStyle: {
                color: colorList[index],
            },
        };
    });
    var totalList = [];
    var totalBorderList = [];
    nameList.map((item, index) => {
        totalList.push({
            value: totalNum,
            itemStyle: {
                color: colorList[index],
            },
        });
        totalBorderList.push({
            value: totalNum,
            itemStyle: {
                borderColor: colorList[index],
                color: 'transparent',
            },
        });
    });
    var datas = [];
    category.forEach((value) => {
        datas.push(value.value);
    });
    if (chartInstanceFacility == null) {
        chartInstanceFacility = echarts.init(chartFacility.value);
    }
    chartInstanceFacility.setOption({
        xAxis: {
            max: totalNum,
            splitLine: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
        grid: {
            left: '5%',
            top: '5%', // 设置条形图的边距
            right: '15%',
            bottom: '0%',
        },
        yAxis: [
            {
                type: 'category',
                inverse: false,
                data: nameList,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
            },
        ],
        series: [
            {
                type: 'bar',
                barWidth: 16,
                barGap: '20%',
                silent: true,
                label: {
                    normal: {
                        formatter: (item) => {
                            return `{${emue[item['dataIndex']]}|${item['name']}}`;
                        },
                        textStyle: {
                            color: '#008AFF',
                            fontSize: 14,
                        },
                        position: [0, '-25px'],
                        show: true,
                        rich: {
                            green: {
                                color: '#06CA70',
                            },
                            blue: {
                                color: '#008AFF',
                            },
                            purple: {
                                color: '#867DFF',
                            },
                            red: {
                                color: '#FB6A66',
                            },
                            yellow: {
                                color: '#FFC949',
                            },
                        },
                    },
                },
                data: category,
                z: 1,
                animationEasing: 'elasticOut',
            },
            {
                // 分隔
                type: 'pictorialBar',
                itemStyle: {
                    normal: {
                        color: '#020b3f',
                    },
                },
                symbolRepeat: 'fixed',
                symbolMargin: 1,
                symbol: 'rect',
                symbolClip: false,
                symbolSize: [1, 17],
                symbolPosition: 'start',
                symbolOffset: [3, -2],
                symbolBoundingData: totalNum,
                data: [totalNum, totalNum, totalNum, totalNum, totalNum],
                z: 2,
                animationEasing: 'elasticOut',
            },
            {
                // label
                type: 'pictorialBar',
                symbolBoundingData: totalNum,
                itemStyle: {
                    normal: {
                        color: 'none',
                    },
                },
                label: {
                    normal: {
                        formatter: (params) => {
                            var text;
                            text = `{${emue[params['dataIndex']]}|${((params['data'] * 100) / totalNum).toFixed(2)}%}`;
                            return text;
                        },
                        rich: {
                            green: {
                                color: '#06CA70',
                            },
                            blue: {
                                color: '#008AFF',
                            },
                            purple: {
                                color: '#867DFF',
                            },
                            red: {
                                color: '#FB6A66',
                            },
                            yellow: {
                                color: '#FFC949',
                            },
                        },
                        position: 'right',
                        offset: [0, -3],
                        distance: 10, // 向右偏移位置
                        show: true,
                    },
                },
                data: datas,
                z: 0,
            },
            {
                name: '外框',
                type: 'bar',
                barGap: '-130%', // 设置外框粗细
                data: totalBorderList,
                barWidth: 26,
                itemStyle: {
                    normal: {
                        // barBorderRadius: [5, 5, 5, 5],
                        borderWidth: 1, // 边框宽度
                    },
                },
                z: 0,
            },
            {
                type: 'scatter',
                name: '条形',
                symbol: 'roundRect',
                symbolSize: [4, 12],
                symbolOffset: [3, -3],
                symbolKeepAspect: true,
                data: totalList,
            },
        ],
    });
}
// 生命周期
onMounted(() => {
    getInvadeData()
    initChart()
    initFacility()
});
onUnmounted(() => {
    clearInterval(intervalId.value);
})
const intervalId = ref(null)
const leftData = ref({})
function getInvadeData() {
    clearInterval(intervalId.value);
    getInvade().then((res) => {
        if (res.code == 200) {
            leftData.value = res.data
            if (route.path == '/system/intruderalarm') {
                intervalId.value = setInterval(getInvadeData, 10000);
            } else {
                clearInterval(intervalId.value);
            }
        }
    }).catch(() => {
        if (route.path == '/system/intruderalarm') {
            intervalId.value = null
            getInvadeData()
        }
    })
}

watch(() => leftData.value, (newVal) => {
    if (chartInstance && chartInstanceFacility) {
        let alarmArr = [newVal.OverHazardWarning, newVal.HighRiskWarning, newVal.MediumRiskWarning, newVal.LowRiskWarning, newVal.DeviceAlerts]
        let sum = 0;
        alarmArr.forEach(number => {
            sum += number;
        });
        initFacility(alarmArr, sum)
        chartInstance.setOption({
            xAxis: {
                data: Object.keys(newVal.AlarmTrend24Hour),
            },
            series: [{
                type: 'line',
                data: Object.entries(newVal.AlarmTrend24Hour),
            }],
        })
    }
}, { deep: true, immediate: true } // 开启深度监听
)
// 窗口自适应
window.addEventListener('resize', () => {
    chartInstance?.resize();
    chartInstanceFacility?.resize();
});
</script>

<style scoped lang="scss">
.inspection {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.left_spection {
    position: absolute;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.right_spection {
    position: absolute;
    right: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.box_arch_point {
    height: calc(100% - 40px);
}

.operation_spection {
    position: relative;
    height: 30%;
    color: #fff;
}

.facility_entry {
    position: relative;
    height: 400px;
    color: #fff;
}

.flex_spection {
    flex: 1;
    color: #fff;
}

.box_arch {
    display: flex;
    align-items: center;
    height: calc(100% - 40px);
}

.image_tubbiness {
    position: relative;
    flex: none;
    width: 200px;
    height: 100%;
    background: url("@/assets/images/tubbiness.png");
    background-size: 80% 80%;
    background-position: center center;
    background-repeat: no-repeat;

    .work_num {
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        text-align: center;
        color: rgb(84, 218, 250);
        font-size: 20px;

        span {
            font-size: 14px;
            color: rgb(158, 174, 195);
        }
    }

    .work_title {
        position: absolute;
        bottom: 36px;
        left: 0px;
        right: 0px;
        text-align: center;
    }
}

.right_content {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    .work_week {
        display: flex;
        align-items: center;
        font-size: 22px;
        font-weight: bold;
        color: #fff;

        span {
            padding-right: 10px;
            font-size: 16px;
            color: rgb(214, 218, 222);
        }
    }
}

.color_line_xj {
    width: 6px;
    height: 6px;
    margin-right: 10px;
}

.entry {
    width: calc(100% - 15px);
    height: calc(100% - 45px);
    display: flex;
    position: relative;

    .entry-box {
        width: 100%;
        height: 100%;
        object-fit: fill;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .entry-box-item {
        width: 100%;
        height: 100%;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        background: radial-gradient(circle,
                rgba(47, 207, 218, 0.3),
                rgba(51, 149, 233, 0) 100px,
                rgba(51, 149, 233, 0) 100px,
                rgba(51, 149, 233, 0) 12px,
                rgba(51, 149, 233, 0.1) 12px,
                rgba(51, 149, 233, 0.1) 40px);

        .item-center-line {
            width: 170px;
            height: 170px;
            background-color: transparent;
            border-top: 0.5px solid #80bff7;
            border-bottom: 0.5px solid #80bff7;
            border-radius: 50%;
            box-sizing: border-box;
            position: absolute;
            top: calc(50% - 85px);
            left: calc(50% - 85px);
            animation: rotate 8s infinite linear;
        }

        .item-center-pie {
            width: 150px;
            height: 150px;
            background-color: transparent;
            border-top: 0.5px solid #80bff7;
            border-bottom: 0.5px solid #80bff7;
            border-radius: 50%;
            box-sizing: border-box;
            position: absolute;
            top: calc(50% - 75px);
            left: calc(50% - 75px);
            animation: rotate1 8s infinite linear;
        }
    }
}

/* 定义中间球体顺时针转动 */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 定义中间圆逆时针转动 */
@keyframes rotate1 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

.box_water_drop {
    position: absolute;
    top: calc(50% - 70px);
    left: calc(50% - 70px);
}

.left_water {
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-left: 30px;
}

.right_water {
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-right: 30px;
}

.water_span_title {
    padding-bottom: 5px;
    color: #fff;
    font-size: 30px;
}

.tile_fx {
    color: rgb(148, 189, 229);
    font-size: 15px;
}
</style>
<style lang="scss" scoped>
.point_box :deep(.el-input__wrapper) {
    background-color: transparent !important;
    box-shadow: 0 0 0 1px rgb(58, 86, 117) inset !important;
}

.point_box :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px #409EFF inset !important;
}

.point_box :deep(.el-input__inner) {
    color: #ffffff !important;
}
</style>