<template>
    <div
        class="NowData"
        :class="[screenType === 'hor' ? 'horiNowClass' : 'verticalNowData']"
    >
        <div class="head-title">
            <span>实时数据</span>
            <span class="subhead-title">主动式空调，会呼吸的写字楼</span>
        </div>

        <div class="contain">
            <div class="item" v-for="(item, index) in realDataArr" :key="index">
                <div
                    class="item_content"
                    :style="{
                        backgroundImage:
                            'url(' + selectColor(item.value, item.id) + ')',
                    }"
                >
                    <div class="content_value">
                        <span>{{ item.value }}</span
                        ><span>{{ item.unit }}</span>
                    </div>
                    <div class="content_name">
                        <span>{{ item.name }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { ref, defineComponent, reactive, toRefs, onMounted } from "vue";
import { queryEnvCurrent } from "@/api/index";
import { selectColor } from "@/utils/publicMethod";
export default defineComponent({
    props: {
        screenType: {
            type: String,
        },
    },
    setup(props, contx) {
        const allData = reactive({
            realDataArr: [],
            selectColor: selectColor,
        });

        onMounted(() => {
            queryEnvCurrent()
                .then((res) => {
                    let realTimeData = res.data.data || [];
                    let realInit = [
                        {
                            id: "temp",
                            code: "Tdb",
                            name: "温度",
                            //value: 24.5,
                            unit: "℃",
                            level: "low",
                            fixed: 1,
                        },
                        {
                            id: "humidity",
                            name: "湿度",
                            code: "RH",
                            // value: 33,
                            unit: "%",
                            level: "middle",
                            fixed: 0,
                        },
                        {
                            id: "co2",
                            name: "CO₂",
                            code: "CO2",
                            unit: "ppm",
                            level: "low",
                            fixed: 0,
                        },
                        {
                            id: "methanal",
                            code: "HCHO",
                            name: "甲醛",
                            unit: "mg/m³",
                            level: "low",
                            fixed: 2,
                        },
                        {
                            id: "pm25",
                            code: "PM2d5",
                            name: "PM2.5",
                            unit: "ug/m³",
                            level: "low",
                            fixed: 0,
                        },
                    ];
                    realInit.forEach((item) => {
                        var filterRes = realTimeData.filter((ele) => {
                            return ele.code == item.code;
                        });
                        var value = (filterRes[0] || {}).data;
                        item.value = value
                            ? Number(value.toFixed(item.fixed))
                            : value;
                    });
                    allData.realDataArr = realInit;
                })
                .catch((err) => {});
        });
        return { ...toRefs(allData) };
    },
});
</script>

<style scoped lang="scss">
.horiNowClass {
    height: 48%;
}

.NowData {
    .subhead-title {
        margin-left: 14px;
    }
    .title-right-icon {
        display: inline-block;
        padding: 0;
        width: 12px;
        height: 12px;
        margin-right: 8px;
        border-radius: 50%;
        background: rgba(126, 216, 116, 1);
    }

    .contain {
        height: calc(100% - 60px);
        display: flex;
    }
    .item {
        width: calc(100% / 5);
        display: flex;
        align-items: center;
        justify-content: center;
        .item_content {
            // height: 100%;
            background-size: auto 240px;
            background-position: center -36px;
            background-repeat: no-repeat;
            padding-bottom: 30px;
            // display: flex;
            // flex-direction: column;
            // justify-content: center;
            // align-items: center;
            width: 100%;
            text-align: center;

            .content_value {
                font-family: Persagy;
                font-size: 52px;
                font-weight: 700;
                background: linear-gradient(180deg, #fff5df 0%, #ead0b1 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                text-fill-color: transparent;
                text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.4);
                line-height: 64px;
            }
            .content_name {
                margin-top: 8px;
                font-family: PingFang SC;
                font-size: 32px;
                font-weight: 400;
                line-height: 46px;
                color: #f7e6cd;
            }
        }
    }
    .content_level {
        margin-top: 8px;
        margin-right: 8px;
        box-sizing: border-box;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: rgba(126, 216, 116, 1);
        &.middle {
            background: rgba(239, 214, 46, 1);
        }
    }
    .normal-explain {
        display: flex;
        align-items: center;
        font-size: 14px;
    }
}
.verticalNowData {
    height: 380px;
    .item {
        .item_content {
            .content_value {
                font-size: 46px;
            }
            .content_name {
                margin-top: 12px;
                font-size: 28px;
            }
            .content_level {
                margin-top: 12px;
            }
        }
    }
}
</style>
