<template>
    <div class='MicrYaHei'>
        <p>
            <span class='Micbold'>根据历史数据计算</span>
            <span></span>
            <span>本日概况</span>
            <span></span>
            <span>相似日概况</span>
        </p>
        <div class='count-data'>
            <div class='outdoor'>
                <div
                    class='outdoor-left'
                    :style='{"height":maxArr[0]=="--"?0+ "px":((current.tempOutdoor!="--"?current.tempOutdoor:0)/maxArr[0])*160 + "px"}'
                >
                    <span>{{current.tempOutdoor=="--"?"--":current.tempOutdoor.toFixed(1)}}℃</span>
                </div>
                <div
                    class='outdoor-right'
                    :style='{"height":maxArr[0]=="--"?0+ "px":((similarDay.tempOutdoor!="--"?similarDay.tempOutdoor:0)/maxArr[0])*160 + "px"}'
                >
                    <span>{{similarDay.tempOutdoor=="--"?"--":similarDay.tempOutdoor.toFixed(1)}}℃</span>
                </div>
            </div>
            <div class='indoor'>
                <div
                    class='indoor-left'
                    :style='{"height":maxArr[1]=="--"?0+ "px": ((current.tempIndoor!="--"?current.tempIndoor:0)/maxArr[1])*160 + "px"}'
                >
                    <span>{{current.tempIndoor=="--"?"--":current.tempIndoor.toFixed(1)}}℃</span>
                </div>
                <div
                    class='indoor-right'
                    :style='{"height":maxArr[1]=="--"?0+ "px": ((similarDay.tempIndoor!="--"?similarDay.tempIndoor:0)/maxArr[1])*160 + "px"}'
                >
                    <span>{{similarDay.tempIndoor=="--"?"--":similarDay.tempIndoor.toFixed(1)}}℃</span>
                </div>
            </div>
            <div class='coldWar'>
                <div class='coldWar-left' :style='{"height":maxArr[2]=="--"?0+ "px": ((current.energy!="--"?current.energy:0)/maxArr[2])*160 + "px"}'>
                    <span>{{current.energy=="--"?"--":current.energy.toFixed(0)}}kWh</span>
                </div>
                <div
                    class='coldWar-right'
                    :style='{"height": maxArr[2]=="--"?0+ "px":((similarDay.energy!="--"?similarDay.energy:0)/maxArr[2])*160 + "px"}'
                >
                    <span>{{similarDay.energy=="--"?"--":similarDay.energy.toFixed(0)}}kWh</span>
                </div>
            </div>
        </div>
        <div class='count-text'>
            <div class='outdoor-text'>室外平均温度</div>
            <div class='indoor-text'>室内平均温度</div>
            <div class='coldWar-text'>冷站能耗</div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {}
    },
    props: ['current', 'similarDay', 'maxArr'],
    mounted() {
        this.init()
    },
    methods: {
        init() {
            if (this.current) {
                if (this.current.tempOutdoor == '-9999' || this.current.tempOutdoor == '-9998') {
                    this.current.tempOutdoor = '--'
                }
                if (this.current.tempIndoor == '-9999' || this.current.tempIndoor == '-9998') {
                    this.current.tempIndoor = '--'
                }
                if (this.current.energy == '-9999' || this.current.energy == '-9998') {
                    this.current.energy = '--'
                }
            }
            console.log('11111', this.current.tempOutdoor, this.current.tempIndoor, this.current.energy)
            console.log('22222', this.similarDay.tempOutdoor, this.similarDay.tempIndoor, this.similarDay.energy)
            console.log('33333', this.maxArr)
        }
    },
    watch: {
        current(val, old) {
            this.current = val
            this.init()
        }
    }
}
</script>
<style lang="scss" scoped>
p {
    margin: 0;
    margin-top: 20px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    span {
        display: inline-block;
    }
    span:nth-of-type(1) {
        height: 24px;
        font-size: 16px;
        color: rgba(31, 36, 41, 1);
        line-height: 21px;
        margin-right: 24px;
    }
    span:nth-of-type(2) {
        width: 10px;
        height: 10px;
        background: rgba(0, 145, 255, 1);
        margin-right: 5px;
    }
    span:nth-of-type(3) {
        height: 18px;
        font-size: 12px;
        color: rgba(0, 0, 0, 1);
        line-height: 16px;
        margin-right: 20px;
    }
    span:nth-of-type(4) {
        width: 10px;
        height: 10px;
        background: rgba(0, 214, 185, 1);
        margin-right: 5px;
    }
    span:nth-of-type(5) {
        height: 18px;
        font-size: 12px;
        color: rgba(0, 0, 0, 1);
        line-height: 16px;
    }
}
.count-data {
    height: 200px;
    text-align: center;
    border-bottom: 1px solid #e4e6e7;
    display: flex;
    justify-content: space-around;
    .outdoor {
        width: 208px;
        height: 200px;
        display: flex;
        justify-content: space-between;
        position: relative;
        span {
            width: 100%;
            position: absolute;
            top: -25px;
            left: 0;
            height: 22px;
            font-size: 14px;
            color: rgba(31, 36, 41, 1);
            line-height: 19px;
        }
        .outdoor-left {
            width: 100px;
            // height: 121px;
            background: rgba(0, 145, 255, 1);
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .outdoor-right {
            width: 100px;
            height: 141px;
            background: rgba(0, 214, 185, 1);
            position: absolute;
            bottom: 0;
            right: 0;
        }
    }
    .indoor {
        width: 208px;
        height: 200px;
        position: relative;
        span {
            width: 100%;
            position: absolute;
            top: -25px;
            left: 0;
            height: 22px;
            font-size: 14px;
            color: rgba(31, 36, 41, 1);
            line-height: 19px;
        }
        .indoor-left {
            width: 100px;
            height: 121px;
            background: rgba(0, 145, 255, 1);
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .indoor-right {
            width: 100px;
            height: 131px;
            background: rgba(0, 214, 185, 1);
            position: absolute;
            bottom: 0;
            right: 0;
        }
    }
    .coldWar {
        width: 208px;
        height: 200px;
        position: relative;
        span {
            width: 100%;
            position: absolute;
            top: -25px;
            left: 0;
            height: 22px;
            font-size: 14px;
            color: rgba(31, 36, 41, 1);
            line-height: 19px;
        }
        .coldWar-left {
            width: 100px;
            height: 84px;
            background: rgba(0, 145, 255, 1);
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .coldWar-right {
            width: 100px;
            height: 137px;
            background: rgba(0, 214, 185, 1);
            position: absolute;
            bottom: 0;
            right: 0;
        }
    }
}
.count-text {
    height: 16px;
    font-size: 12px;
    color: rgba(100, 108, 115, 1);
    line-height: 16px;
    display: flex;
    text-align: center;
    margin-top: 12px;
    margin-bottom: 34px;
    justify-content: space-around;
    .outdoor-text,
    .indoor-text,
    .coldWar-text {
        width: 208px;
    }
}
</style>