<template>
    <div class='water-unit'>
        <div class='strate-right-box-1' :class='type==2?"content1":""'>
            <div class='starte-right-box-1-title' :class='type==2?"title1":""'>冷水机组</div>
            <div class='starte-right-box-1-content1' v-if='data'>
                <p>
                    <font v-if='type==1' :class='data.chillerNumSetLOrg=="-9999"?"reds":""'>{{formatterRes(data.chillerNumSetLOrg,true,0)}}</font>
                    <font v-if='type==2' :class='data.chillerNumSetL=="-9999"?"reds":""'>{{formatterRes(data.chillerNumSetL,true,0)}}</font>
                </p>
                <p>
                    <font v-if='type==1' :class='data.chillerNumSetSOrg=="-9999"?"reds":""'>{{formatterRes(data.chillerNumSetSOrg,true,0)}}</font>
                    <font v-if='type==2' :class='data.chillerNumSetS=="-9999"?"reds":""'>{{formatterRes(data.chillerNumSetS,true,0)}}</font>
                </p>
                <p>
                    <font
                        v-if='type==1'
                        :class='data.chillWaterOutTempSetOrg=="-9999"?"reds":""'
                    >{{formatterRes(data.chillWaterOutTempSetOrg,true,1)}}</font>
                    <font v-if='type==2' :class='data.chillWaterOutTempSet=="-9999"?"reds":""'>{{formatterRes(data.chillWaterOutTempSet,true,1)}}</font>
                    <font style='font-size:12px;'>℃</font>
                </p>
            </div>
            <div class='starte-right-box-1-content'>
                <p>大</p>
                <p>小</p>
                <p>供水温度设定</p>
            </div>
        </div>
        <div class='strate-right-box-1' :class='type==2?"content1":""'>
            <div class='starte-right-box-1-title' :class='type==2?"title1":""'>冷冻水泵</div>
            <div class='starte-right-box-1-content1' v-if='data'>
                <p>
                    <font v-if='type==1' :class='data.coolPumpNumSetLOrg=="-9999"?"reds":""'>{{formatterRes(data.coolPumpNumSetLOrg ,true,0)}}</font>
                    <font v-if='type==2' :class='data.coolPumpNumSetL=="-9999"?"reds":""'>{{formatterRes(data.coolPumpNumSetL,true,0)}}</font>
                </p>
                <p>
                    <font v-if='type==1' :class='data.coolPumpNumSetSOrg=="-9999"?"reds":""'>{{formatterRes(data.coolPumpNumSetSOrg,true,0)}}</font>
                    <font v-if='type==2' :class='data.coolPumpNumSetS=="-9999"?"reds":""'>{{formatterRes(data.coolPumpNumSetS,true,0)}}</font>
                </p>
                <p>
                    <font v-if='type==1' :class='data.coolPumpFreqSetOrg=="-9999"?"reds":""'>{{formatterRes(data.coolPumpFreqSetOrg,false,0)}}</font>
                    <font v-if='type==2' :class='data.coolPumpFreqSet=="-9999"?"reds":""'>{{formatterRes(data.coolPumpFreqSet,false,0)}}</font>
                    <font style='font-size:12px;'>Hz</font>
                </p>
            </div>
            <div class='starte-right-box-1-content'>
                <p>大</p>
                <p>小</p>
                <p>{{type==2?'运行频率设定':'运行频率'}}</p>
            </div>
        </div>
        <div class='strate-right-box-1' :class='type==2?"content1":""'>
            <div class='starte-right-box-1-title' :class='type==2?"title1":""'>冷却水泵</div>
            <div class='starte-right-box-1-content1' v-if='data'>
                <p>
                    <font v-if='type==1' :class='data.chillPumpNumSetLOrg=="-9999"?"reds":""'>{{formatterRes(data.chillPumpNumSetLOrg,true,0)}}</font>
                    <font v-if='type==2' :class='data.chillPumpNumSetL=="-9999"?"reds":""'>{{formatterRes(data.chillPumpNumSetL,true,0)}}</font>
                </p>
                <p>
                    <font v-if='type==1' :class='data.chillPumpNumSetSOrg=="-9999"?"reds":""'>{{formatterRes(data.chillPumpNumSetSOrg,true,0)}}</font>
                    <font v-if='type==2' :class='data.chillPumpNumSetS=="-9999"?"reds":""'>{{formatterRes(data.chillPumpNumSetS,true,0)}}</font>
                </p>
                <p>
                    <font v-if='type==1' :class='data.chillPumpFreqSetOrg=="-9999"?"reds":""'>{{formatterRes(data.chillPumpFreqSetOrg,false,0)}}</font>
                    <font v-if='type==2' :class='data.chillPumpFreqSet=="-9999"?"reds":""'>{{formatterRes(data.chillPumpFreqSet,false,0)}}</font>
                    <font style='font-size:12px;'>Hz</font>
                </p>
            </div>
            <div class='starte-right-box-1-content'>
                <p>大</p>
                <p>小</p>
                <p>{{type==2?'运行频率设定':'运行频率'}}</p>
            </div>
        </div>
        <div class='strate-right-box-1' :class='type==2?"content1":""'>
            <div class='starte-right-box-1-title' :class='type==2?"title1":""'>冷却塔</div>
            <div class='starte-right-box-1-content1' v-if='data'>
                <p>
                    <font v-if='type==1' :class='data.coolTowerNumSetLOrg=="-9999"?"reds":""'>{{formatterRes(data.coolTowerNumSetLOrg,true,0)}}</font>
                    <font v-if='type==2' :class='data.coolTowerNumSetL=="-9999"?"reds":""'>{{formatterRes(data.coolTowerNumSetL,true,0)}}</font>
                </p>
                <p>
                    <font v-if='type==1' :class='data.coolTowerNumSetSOrg=="-9999"?"reds":""'>{{formatterRes(data.coolTowerNumSetSOrg,true,0)}}</font>
                    <font v-if='type==2' :class='data.coolTowerNumSetS=="-9999"?"reds":""'>{{formatterRes(data.coolTowerNumSetS,true,0)}}</font>
                </p>
                <p>
                    <font v-if='type==1' :class='data.coolTowerFreqSetOrg=="-9999"?"reds":""'>{{formatterRes(data.coolTowerFreqSetOrg,false,0)}}</font>
                    <font v-if='type==2' :class='data.coolTowerFreqSet=="-9999"?"reds":""'>{{formatterRes(data.coolTowerFreqSet,false,0)}}</font>
                    <font style='font-size:12px;'>Hz</font>
                </p>
            </div>
            <div class='starte-right-box-1-content'>
                <p>大</p>
                <p>小</p>
                <p>{{type==2?'运行频率设定':'运行频率'}}</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {}
    },
    props: ['data', 'type'],
    methods: {
        formatterRes(res, type, num) {
            if (res == '-9999') {
                return 'x'
            } else if (res == '-9998') {
                if (type) {
                    return 0
                } else {
                    return '--'
                }
            } else {
                if (res != undefined) {
                    res = res.toFixed(num)
                } else {
                    return '--'
                }
                return res
            }
        }
    }
}
</script>

<style lang='scss' scoped>
.water-unit {
    .reds {
        color: #f54e45;
    }
    display: flex;
    justify-content: space-between;
    .content1 {
        background: rgba(0, 145, 255, 1);
        color: #fff;
    }
    .strate-right-box-1 {
        flex: 1;
        border-radius: 6px;
        border: 1px solid rgba(238, 238, 238, 1);
        margin-right: 18px;
        &:last-of-type {
            margin-right: 0;
        }
        .starte-right-box-1-title {
            padding-left: 28px;
            height: 56px;
            line-height: 56px;
            font-size: 16px;
            background: rgba(248, 249, 250, 1);
            color: #1f2429;
        }
        .title1 {
            color: #fff;
            background: rgba(0, 124, 219, 1);
        }

        p {
            padding: 0;
            margin: 0;
        }
        .starte-right-box-1-content1 {
            display: flex;
            font-size: 24px;
            justify-content: space-evenly;
            margin-top: 11px;
            p {
                width: 35%;
                text-align: center;
            }
            p:nth-of-type(1),
            p:nth-of-type(2) {
                width: 15%;
                text-align: center;
            }
        }
        .starte-right-box-1-content {
            display: flex;
            font-size: 14px;
            margin-top: 4px;
            margin-bottom: 14px;
            justify-content: space-evenly;
            p {
                width: 35%;
                text-align: center;
            }
            p:nth-of-type(1),
            p:nth-of-type(2) {
                width: 15%;
                text-align: center;
            }
        }
    }
}
</style>