<template>
    <div class='an-content'>
        <div class='snapshotss-center2'>
            <div class='snapshotss-cont2-box1 MicrYaHei'>
                <span>数据传输情况</span>
                <span :class='data.energyErrorFlag!=1?"span1":"span2"'>
                    能耗
                    <img v-if='data.energyErrorFlag!=1' src='../../assets/finish.png' alt />
                    <img v-else src='../../assets/wrong.png' alt />
                </span>
                <span :class='data.environmentErrorFlag!=1?"span1":"span2"'>
                    环境
                    <img v-if='data.environmentErrorFlag!=1' src='../../assets/finish.png' alt />
                    <img v-else src='../../assets/wrong.png' alt />
                </span>
                <span :class='data.baErrorFalg!=1?"span1":"span2"'>
                    BA
                    <img v-if='data.baErrorFalg!=1' src='../../assets/finish.png' alt />
                    <img v-else src='../../assets/wrong.png' alt />
                </span>
            </div>
            <div class='snapshotss-cont2-box2 MicrYaHei'>
                <span>实际冷量</span>
                <span>
                    <font
                        :class='parseInt(data.nowPlantLoad)=="-9999"?"red":""'
                    >{{(data.nowPlantLoad==undefined)?'--':(parseInt(data.nowPlantLoad)=='-9999'?'x':(parseInt(data.nowPlantLoad)=='-9998'?'--':parseInt(data.nowPlantLoad)))}}</font>
                    <font style='font-size:12px;'>kW</font>
                </span>
                <span>未来1小时预测冷量</span>
                <span>
                    <font
                        :class='parseInt(data.predictedLoad1h)=="-9999"?"red":""'
                    >{{(data.predictedLoad1h==undefined)?'--':(parseInt(data.predictedLoad1h)=='-9999'?'x':(parseInt(data.predictedLoad1h)=='-9998'?'--':parseInt(data.predictedLoad1h)))}}</font>
                    <font style='font-size:12px;'>kW</font>
                </span>
            </div>
        </div>
        <div class='an-bottom'>
            <strategy-line :chillerList='chillerHourList' v-if='chillerHourList.length>=0'></strategy-line>
        </div>

        <div class='side-r' :class='chillerCommandQ.hasOwnProperty("isExecuted")?(chillerCommandQ.isExecuted?"green-bg":"red-bg"):"blue-bg"'>
            <div v-if='!showDraw' class='float-r' @click='showDraw = true'>
                <div
                    class='float-line'
                    :class='chillerCommandQ.hasOwnProperty("isExecuted")?(chillerCommandQ.isExecuted?"green-bg":"red-bg"):"blue-bg"'
                ></div>
                <img src='../../assets/open.png' alt />
                <p>当前策略</p>
            </div>
        </div>
        <bom-box v-if='Object.keys(chillerCommandQ).length>0' :class='["draw", {"open": showDraw}]' :data='chillerCommandQ' @close='showDraw = false'></bom-box>
    </div>
</template>

<script>
import echarts from 'echarts'
import bomBox from './bomBox'
import strategyLine from '@/components/strategyLine'

export default {
    data() {
        return {
            showDraw: false,
            dataX: [],
            dataY1: [],
            dataY2: [],
            dataY3: [],
            loadX: [],
            loadY1: [],
            loadY2: [],
            loadY3: [],
            dataY1Min: '',
            dataY1Max: ''
        }
    },
    components: { bomBox, strategyLine },
    methods:{
        isShowDraw(){
            if((Object.keys(this.chillerCommandQ).length>0 && this.chillerCommandQ.isNew) || (Object.keys(this.chillerCommandQ).length>0 && !this.chillerCommandQ.isExecuted)){
                this.showDraw = true
            }else{
                this.showDraw = false
            }
        }
    },
    props: ['data', 'chillerHourList', 'chillerCommandQ']
}
</script>

<style lang='scss' scoped>
.an-content {
    .snapshotss-center2 {
        padding: 20px 0;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        overflow: hidden;
        .snapshotss-cont2-box1,
        .snapshotss-cont2-box2 {
            flex: 1;
            height: 80px;
            background: url('../../assets/copy.png');
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            padding-left: 24px;
        }
        .snapshotss-cont2-box1 {
            margin-right: 12px;
            span:nth-of-type(1) {
                height: 22px;
                font-size: 14px;
                color: rgba(100, 108, 115, 1);
                line-height: 19px;
                margin-right: 20px;
            }
            span:not(:first-child) {
                height: 28px;
                background: rgba(255, 255, 255, 1);
                border-radius: 16px;
                font-size: 14px;
                color: rgba(31, 36, 41, 1);
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 6px 0 12px;
                margin-right: 20px;
                img {
                    width: 20px;
                    height: 20px;
                    margin-left: 8px;
                }
            }
            .span1 {
                border: 1px solid rgba(52, 199, 36, 1);
            }
            .span2 {
                border: 1px solid rgba(245, 78, 69, 1);
            }
        }
        .snapshotss-cont2-box2 {
            span:nth-of-type(1),
            span:nth-of-type(3) {
                height: 22px;
                font-size: 14px;
                color: rgba(100, 108, 115, 1);
                line-height: 19px;
                margin-right: 16px;
            }
            span:nth-of-type(2),
            span:nth-of-type(4) {
                height: 32px;
                font-size: 24px;
                font-family: Persagy;
                color: rgba(31, 36, 41, 1);
                line-height: 29px;
                margin-right: 64px;
            }
            span:nth-of-type(3) {
                margin-right: 16px;
            }
        }
    }
    .side-r {
        position: fixed;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
        display: flex;
        width: 8px;
        border-radius: 8px 0 0 8px;
        cursor: pointer;
        height: 357px;
        .float-r {
            width: 8px;
            display: flex;
            align-items: center;
            border-radius: 8px 0 0 8px;
            cursor: pointer;
            .float-line {
                width: 8px;
                height: 357px;
                border-radius: 8px 0 0 8px;
            }
            img {
                height: 10px;
                margin: 0 10px;
            }
            p {
                width: 0;
            }
        }
    }
    .side-r:hover {
        width: 68px;
        background: #fff;
    }
    .side-r:hover .float-r {
        width: 68px;
    }
    .draw {
        position: fixed;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
        background: #ffffff;
        transition: transform 0.3s ease-in-out;
        &.open {
            transform: translate(-100%, -50%);
        }
    }
    .an-bottom {
        margin-top: 45px;
        display: flex;
    }
}
</style>
