<template>
    <div class="container2">
        <div class="title">
            <img :src="u918" alt="">
            <span>温湿度监测</span>
        </div>
        <div class="content">
            <v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />

        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import u918 from './../image/u918.png';

const prop = defineProps({
    data: {
        type: Object,
        default: () => {
            return {
                Humiture: [],
                bottom: {
                    "temp": -15,
                    "humidity": 15,
                    "name": "温湿度下限值"
                },
                top: {
                    "temp": 45,
                    "humidity": 75,
                    "name": "温湿度上限值"
                }
            }
        }
    }
});

const options = computed(() => {

    let obj = {
        bottom: prop.data.bottom,
        top: prop.data.top
    }
    //x轴数据
    let x = [];
    //y轴数据
    let y = { temp: [], humidity: [] };
    prop.data.Humiture.forEach((res) => {
        x.push(res.name);
        y.temp.push(res.temp);
        y.humidity.push(res.humidity);
    });

    return {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },

        },
        legend: {
            // bottom: "3%",
            top: '2%'
        },
        backgroundColor: "transparent",
        grid: {
            top: "15%",
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
        },
        color: ["#4992FF", "#7CFFB2", "#FF6E76"],
        xAxis: {
            type: "category",
            data: x,
            axisLabel: {
                interval: 0,
                rotate: 25,
            }
        },
        yAxis: {
            type: "value",
            boundaryGap: [0, 0.01],
            name:'(°C/%RH)',
            axisLabel: {
                formatter: "{value}",
            },
        },
        series: [
            {
                name: `温度(°C)`,//(范围：${obj.bottom.temp}°C - ${obj.top.temp}°C)
                type: "bar",
                data: y.temp,
                barWidth: '30%',
                itemStyle: {
                    color: function (params) {
                        var index_color = params.value;
                        if (
                            index_color <= obj.bottom.temp ||
                            index_color >= obj.top.temp
                        ) {
                            return "#FF6E76";
                        } else {
                            return "#4992FF";
                        }
                    },
                },
                label: {
                    formatter: "{c} °C",
                    show: false,
                    position: "top",
                    textStyle: {
                        color: "rgb(255,255,255,0.9)",
                    },
                },
                markLine: {
                    // 设置最大值和最小值
                    silent: true, //基线显示 隐藏
                    symbol: "none", // 不显示箭头和圆点
                    data: [
                        {
                            name: '温度',
                            yAxis: obj.bottom.temp,
                            label: {
                                formatter: `温度下限值： ${obj.bottom.temp} °C`,
                                position: "middle",
                            },
                            lineStyle: {
                                color: "yellow", // 这儿设置安全基线颜色
                            },
                        },
                        {
                            name: '温度',
                            yAxis: obj.top.temp,
                            label: {
                                formatter: `温度上限值：${obj.top.temp} °C`,
                                position: "middle",
                            },
                            lineStyle: {
                                color: "yellow", // 这儿设置安全基线颜色
                            },
                        },
                    ],
                },
            },
            {
                name: `湿度(%RH)`,//(范围：${obj.bottom.humidity}%RH - ${obj.top.humidity}%RH)
                type: "bar",
                data: y.humidity,
                barWidth: '30%',
                itemStyle: {
                    color: function (params) {
                        var index_color = params.value;

                        if (
                            index_color <= obj.bottom.humidity ||
                            index_color >= obj.top.humidity
                        ) {
                            return "#FF6E76";
                        } else {
                            return "#7CFFB2";
                        }
                    },
                },
                label: {
                    formatter: "{c} %RH",
                    show: false,
                    position: "top",
                    textStyle: {
                        color: "rgb(255,255,255,0.9)",
                    },
                },
                markLine: {
                    // 设置最大值和最小值
                    silent: true, //基线显示 隐藏
                    symbol: "none", // 不显示箭头和圆点
                    data: [
                        {
                            name: "湿度",
                            yAxis: obj.bottom.humidity,
                            label: {
                                formatter: `湿度下限值：` + obj.bottom.humidity + "%RH",
                                position: "middle",
                            },
                            lineStyle: {
                                color: "red", // 这儿设置安全基线颜色
                            },
                        },
                        {
                            name: "湿度",
                            yAxis: obj.top.humidity,
                            label: {
                                formatter: `湿度上限值：` + obj.top.humidity + "%RH",
                                position: "middle",
                            },
                            lineStyle: {
                                color: "red", // 这儿设置安全基线颜色
                            },
                        },
                    ],
                },
            },
            {
                name: '超标',//(温湿度未达正常值均为超标)
                type: "bar",
                color: '#FF6E76'
            }
        ],
    }
});
</script>

<style lang="scss" scoped>
.container2 {
    width: 395px;
    height: 272px;

    .title {
        width: 395px;
        height: 35px;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        span {
            font-size: 20px;
            color: #2affff;
            font-weight: 700;
            margin-left: 10px;
        }
    }
    .content {
        width: 100%;
        height: 237px;
    }
}
</style>
