<template>
    <v-chart :option="options" style="width: 100%;height: 100%;" />
</template>

<script setup>
import { computed } from 'vue';
const prop = defineProps({
    value: {
        type: Object,
        default: () => {
            return {
                Humiture: [{
                    "devId": "eb98cb70-158f-11ee-b4df-a9653aef169c",
                    "name": "服装军团",
                    "temp": "18.2",
                    "humidity": "32.2",
                    "status": true
                }],
                top: { temp: 0, humidity: 0 },
                bottom: { temp: 0, humidity: 0 }
            };
        }
    }
});

const options = computed(() => {

    //x轴数据
    let x = [];
    //y轴数据
    let y = { temp: [], humidity: [] };

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

                        if (
                            index_color <= prop.value.bottom.humidity ||
                            index_color >= prop.value.top.humidity
                        ) {
                            return "#FF6E76";
                        } else {
                            return "#7CFFB2";
                        }
                    },
                },
                label: {
                    formatter: "{c} %RH",
                    show: true,
                    position: "top",
                    textStyle: {
                        color: "rgb(255,255,255,0.9)",
                    },
                },
                markLine: {
                    // 设置最大值和最小值
                    silent: true, //基线显示 隐藏
                    symbol: "none", // 不显示箭头和圆点
                    data: [
                        {
                            name: "湿度",
                            yAxis: prop.value.bottom.humidity,
                            label: {
                                // formatter: `${t('messages.HumidityRange')}${t('messages.TemperatureRange_down')}：` + value.bottom.humidity + "%RH",
                                formatter: `湿度下限值：` + prop.value.bottom.humidity + "%RH",

                                position: "middle",
                            },
                            lineStyle: {
                                color: "red", // 这儿设置安全基线颜色
                            },
                        },
                        {
                            name: "湿度",
                            yAxis: prop.value.top.humidity,
                            label: {
                                // formatter: `${t('messages.HumidityRange')}${t('messages.TemperatureRange_up')}：` + value.top.humidity + "%RH",
                                formatter: `湿度上限值：` + prop.value.top.humidity + "%RH",
                                position: "middle",
                            },
                            lineStyle: {
                                color: "red", // 这儿设置安全基线颜色
                            },
                        },
                    ],
                },
            },
            {
                name: '超标(温湿度未达正常值均为超标)',
                type: "bar",
                color: '#FF6E76'
            }
        ],
    };
});
</script>

<style lang="scss" scoped></style>
