<template>
    <div
        class="lastMonth"
        :class="[screenType === 'hor' ? 'horiLastMonth' : 'verticalLastMonth']"
    >
        <div class="subhead-title"><span>上月数据</span></div>
        <div class="itemWrap">
            <div class="item" v-for="(item, index) in lastDataArr" :key="index">
                <div class="item-left">
                    <img :src="item.img" />
                </div>
                <div class="item-right">
                    <div class="item-value">
                        <span>{{ item.value }}</span
                        ><span>{{ item.unit }}</span>
                    </div>
                    <div class="item-content">
                        <div class="item-content-right">
                            <div class="max">
                                <span>{{ item.maxName }}</span>
                                <span>{{ item.max }}</span>
                                <span>{{ item.unit }}</span>
                            </div>
                            <div class="min">
                                <span>{{ item.minName }}</span>
                                <span>{{ item.min }}</span>
                                <span>{{ item.unit }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { ref, defineComponent, reactive, toRefs, onMounted } from "vue";
import { queryEnvHistory } from "@/api/index";
import { dapingImage } from "@/utils/dapingImage";

export default defineComponent({
    props: {
        screenType: {
            type: String,
        },
    },
    setup(props, contx) {
       
        const { lastco2, lasthumidity, lastmethanal, lastpm25, lasttemp } =
            dapingImage;
        const allData = reactive({
            lastDataArr: [],
        });
        onMounted(() => {
            queryEnvHistory()
                .then((res) => {
                    var lastMonthData = res.data.data || [];
                    var lastMonthInit = [
                        {
                            id: "temp",
                            name: "温度",
                            code: "Tdb",
                            unit: "℃",
                            maxName: "最高温",
                            minName: "最低温",
                            img: lasttemp,
                            fixed: 1,
                        },
                        {
                            id: "humidity",
                            name: "湿度",
                            code: "RH",
                            unit: "%",
                            maxName: "最大值",
                            max: 50,
                            minName: "最小值",
                            min: 20,
                            img: lasthumidity,
                            fixed: 0,
                        },
                        {
                            id: "co2",
                            name: "CO2",
                            code: "CO2",
                            value: 2600,
                            unit: "ppm",
                            maxName: "最大值",
                            max: 2600,
                            minName: "最小值",
                            min: 300,
                            img: lastco2,
                            fixed: 0,
                        },
                        {
                            id: "methanal",
                            name: "甲醛",
                            code: "HCHO",
                            value: 0.03,
                            unit: "mg/m³",
                            maxName: "最大值",
                            max: 0.01,
                            minName: "最小值",
                            min: 0.07,
                            img: lastmethanal,
                            fixed: 2,
                        },
                        {
                            id: "pm25",
                            name: "PM2.5",
                            code: "PM2d5",
                            value: 120,
                            unit: "ug/m³",
                            maxColor: "#C4E34F",
                            minColor: "#7ed874",
                            maxName: "最大值",
                            max: 340,
                            minName: "最小值",
                            min: 20,
                            img: lastpm25,
                            fixed: 0,
                        },
                    ];
                    lastMonthInit.forEach((item) => {
                        var filterRes = lastMonthData.filter((ele) => {
                            return ele.code == item.code;
                        });
                        var filterObj = filterRes[0] || {};
                        item.value = filterObj.avgData
                            ? Number(filterObj.avgData.toFixed(item.fixed))
                            : filterObj.avgData;
                        item.max = filterObj.maxData
                            ? Number(filterObj.maxData.toFixed(item.fixed))
                            : filterObj.maxData;
                        item.min = filterObj.minData
                            ? Number(filterObj.minData.toFixed(item.fixed))
                            : filterObj.minData;
                    });
                    // debugger;
                    allData.lastDataArr = lastMonthInit;
                })
                .catch((err) => {});
        });
        return { ...toRefs(allData) };
    },
});
</script>

<style scoped lang="scss">
.lastMonth {
    .item {
        padding-top: 60px;
        display: flex;
        align-items: center;

        .item-left {
            width: 86px;
            height: 86px;
            margin-right: 20px;
            background: rgba(100, 108, 130, 0.3);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            img {
                width: 86px;
            }
        }
        .item-value {
            font-family: Persagy;
            font-weight: 700;
            font-size: 24px;
            line-height: 30px;
            color: #f7e6cd;
        }
        .item-content {
            display: flex;
            align-items: center;
            padding-top: 8px;
            font-weight: 500;
            font-size: 14px;
        }
        .item-content-right {
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            color: #f7e6cd;
            white-space: nowrap;

            .min {
                padding-top: 8px;
            }
        }
    }
}
.horiLastMonth {
    height: 100%;
    padding-left: 35px;
    .item {
        padding-top: 0;
    }
    .itemWrap {
        height: calc(100% - 30px);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }
}
.verticalLastMonth {
    height: 400px;
    padding: 0 36px;
    background: rgba(149, 162, 194, 0.1);
    backdrop-filter: blur(40px);
    border-radius: 20px;
    .itemWrap {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        //  justify-content:space-around;
        .item {
            width: 33.33%;
            // justify-content: center;
            .item-content-right {
                font-size: 14px;
                white-space: nowrap;
            }
        }
    }
}
</style>
