<template>
    <div class='detailTable' style='width: 767px'>
        <!-- <el-table :data='tableList' border>
            <el-table-column prop='title' label width='95'></el-table-column>
            <el-table-column prop label='冷机开启台数' align='center' width>
                <template slot-scope='{row}'>
                    <font :class='row.chillerNumSetLOrg=="-9999"?"reds":""'>{{formatterRes(row.chillerNumSetLOrg,true,0)}}</font>
                    大
                    <font :class='row.chillerNumSetSOrg=="-9999"?"reds":""'>{{formatterRes(row.chillerNumSetSOrg,true,0)}}</font>
                    小
                </template>
            </el-table-column>
            <el-table-column prop label='冷机出水温度' align='center' width>
                <template slot-scope='{row}'>
                    <font :class='row.chillWaterOutTempSetOrg=="-9999"?"reds":""'>{{formatterRes(parseInt(row.chillWaterOutTempSetOrg),false,1)}}</font>
                    ℃
                </template>
            </el-table-column>
            <el-table-column prop label='冷冻泵台数' align='center' width>
                <template slot-scope='{row}'>
                    <font :class='row.coolPumpNumSetLOrg=="-9999"?"reds":""'>{{formatterRes(row.coolPumpNumSetLOrg,true,1)}}</font>
                    大
                    <font :class='row.coolPumpNumSetSOrg=="-9999"?"reds":""'>{{formatterRes(row.coolPumpNumSetSOrg,true,0)}}</font>
                    小
                </template>
            </el-table-column>
            <el-table-column prop label='冷冻泵频率' align='center' width>
                <template slot-scope='{row}'>
                    <font :class='row.coolPumpFreqSetOrg=="-9999"?"reds":""'>{{formatterRes(row.coolPumpFreqSetOrg,false,0)}}</font>
                    HZ
                </template>
            </el-table-column>
            <el-table-column prop label='冷却泵台数' align='center' width>
                <template slot-scope='{row}'>
                    <font :class='row.chillPumpNumSetLOrg=="-9999"?"reds":""'>{{formatterRes(row.chillPumpNumSetLOrg,true,0)}}</font>
                    大
                    <font :class='row.chillPumpNumSetSOrg=="-9999"?"reds":""'>{{formatterRes(row.chillPumpNumSetSOrg,true,0)}}</font>
                    小
                </template>
            </el-table-column>
            <el-table-column prop label='冷却泵频率' align='center' width>
                <template slot-scope='{row}'>
                    <font :class='row.chillPumpFreqSetOrg=="-9999"?"reds":""'>{{formatterRes(row.chillPumpFreqSetOrg,false,0)}}</font>
                    HZ
                </template>
            </el-table-column>
            <el-table-column prop label='冷却塔台数' align='center' width>
                <template slot-scope='{row}'>
                    <font :class='row.coolTowerNumSetSOrg=="-9999"?"reds":""'>{{formatterRes(row.coolTowerNumSetSOrg,true,0)}}</font>
                    大
                    <font :class='row.coolTowerNumSetLOrg=="-9999"?"reds":""'>{{formatterRes(row.coolTowerNumSetLOrg,true,0)}}</font>
                    小
                </template>
            </el-table-column>
            <el-table-column prop='zip' label='冷却塔频率' align='center' width>
                <template slot-scope='{row}'>
                    <font :class='row.coolTowerFreqSetOrg=="-9999"?"reds":""'>{{formatterRes(row.coolTowerFreqSetOrg,false,0)}}</font>
                    HZ
                </template>
            </el-table-column>
            <el-table-column prop label='室内平均温度' align='center' width>
                <template slot-scope='{row}'>
                    <font :class='row.meanTindoor=="-9999"?"reds":""'>{{formatterRes(row.meanTindoor,false,1)}}</font>
                    ℃
                </template>
            </el-table-column>
            <el-table-column prop label='室内最高温度' align='center' width>
                <template slot-scope='{row}'>
                    <font :class='row.maxTindoor=="-9999"?"reds":""'>{{formatterRes(row.maxTindoor,false,1)}}</font>
                    ℃
                </template>
            </el-table-column>
            <el-table-column prop label='冷机负载率' align='center' width>
                <template slot-scope='{row}'>
                    <font
                        :class='parseInt(row.plrAllOrg)=="-9999"?"reds":""'
                    >{{(row.plrAllOrg==undefined)?'--':(parseInt(row.plrAllOrg)=='-9999'?'x':(parseInt(row.plrAllOrg)=='-9998'?'--':parseInt(row.plrAllOrg)))}}</font>
                    HZ
                </template>
            </el-table-column>
        </el-table>-->
        <div class='detail-box'>
            <div class='detail-box-top'>
                <div style='width:100px;diplay:inline-block;'></div>
                <span style='width:75px;text-align:center'>
                    冷机
                    <br />开启台数
                </span>
                <span style='width:75px;text-align:center'>
                    冷机
                    <br />出水温度
                </span>
                <span style='width:70px;text-align:center'>
                    冷冻泵
                    <br />台数
                </span>
                <span style='width:60px;text-align:center'>
                    冷冻泵
                    <br />频率
                </span>
                <span style='width:70px;text-align:center'>
                    冷却泵
                    <br />台数
                </span>
                <span style='width:60px;text-align:center'>
                    冷却泵
                    <br />频率
                </span>
                <span style='width:70px;text-align:center'>
                    冷却塔
                    <br />台数
                </span>
                <span style='width:60px;text-align:center'>
                    冷却塔
                    <br />频率
                </span>
                <span style='width:75px;text-align:center'>
                    室内
                    <br />平均温度
                </span>
                <span style='width:75px;text-align:center'>
                    室内
                    <br />最高温度
                </span>
                <span style='width:60px;text-align:center'>
                    冷机
                    <br />负载率
                </span>
            </div>
            <div class='detail-box-bottom' Î>
                <div class='detail-box-bottom-box' v-for='(item,index) in tableList' :key='index'>
                    <span
                        style='width:100px;font-size:12px;background:rgba(248,249,250,1);color:rgba(100,106,115,1);diplay:inline-block;text-align: center;'
                    >{{item.title}}</span>
                    <span style='width:75px;text-align:center'>
                        <font :class='item.chillerNumSetLOrg=="-9999"?"reds":""'>{{formatterRes(item.chillerNumSetLOrg,true,0)}}</font>大
                        <font :class='item.chillerNumSetSOrg=="-9999"?"reds":""'>{{formatterRes(item.chillerNumSetSOrg,true,0)}}</font>小
                    </span>
                    <span style='width:75px;text-align:center'>
                        <font
                            :class='item.chillWaterOutTempSetOrg=="-9999"?"reds":""'
                        >{{formatterRes(parseInt(item.chillWaterOutTempSetOrg),false,1)}}</font>℃
                    </span>
                    <span style='width:70px;text-align:center'>
                        <font :class='item.coolPumpNumSetLOrg=="-9999"?"reds":""'>{{formatterRes(item.coolPumpNumSetLOrg,true,1)}}</font>大
                        <font :class='item.coolPumpNumSetSOrg=="-9999"?"reds":""'>{{formatterRes(item.coolPumpNumSetSOrg,true,0)}}</font>小
                    </span>
                    <span style='width:60px;text-align:center'>
                        <font :class='item.coolPumpFreqSetOrg=="-9999"?"reds":""'>{{formatterRes(item.coolPumpFreqSetOrg,false,0)}}</font>Hz
                    </span>
                    <span style='width:70px;text-align:center'>
                        <font :class='item.chillPumpNumSetLOrg=="-9999"?"reds":""'>{{formatterRes(item.chillPumpNumSetLOrg,true,0)}}</font>大
                        <font :class='item.chillPumpNumSetSOrg=="-9999"?"reds":""'>{{formatterRes(item.chillPumpNumSetSOrg,true,0)}}</font>小
                    </span>
                    <span style='width:60px;text-align:center'>
                        <font :class='item.chillPumpFreqSetOrg=="-9999"?"reds":""'>{{formatterRes(item.chillPumpFreqSetOrg,false,0)}}</font>Hz
                    </span>
                    <span style='width:70px;text-align:center'>
                        <font :class='item.coolTowerNumSetSOrg=="-9999"?"reds":""'>{{formatterRes(item.coolTowerNumSetSOrg,true,0)}}</font>大
                        <font :class='item.coolTowerNumSetLOrg=="-9999"?"reds":""'>{{formatterRes(item.coolTowerNumSetLOrg,true,0)}}</font>小
                    </span>
                    <span style='width:60px;text-align:center'>
                        <font :class='item.coolTowerFreqSetOrg=="-9999"?"reds":""'>{{formatterRes(item.coolTowerFreqSetOrg,false,0)}}</font>Hz
                    </span>
                    <span style='width:75px;text-align:center'>
                        <font :class='item.meanTindoor=="-9999"?"reds":""'>{{formatterRes(item.meanTindoor,false,1)}}</font>℃
                    </span>
                    <span style='width:75px;text-align:center'>
                        <font :class='item.maxTindoor=="-9999"?"reds":""'>{{formatterRes(item.maxTindoor,false,1)}}</font>℃
                    </span>
                    <span style='width:60px;text-align:center'>
                        <font
                            :class='parseInt(item.plrAllOrg)=="-9999"?"reds":""'
                        >{{(item.plrAllOrg==undefined)?'--':(parseInt(item.plrAllOrg)=='-9999'?'x':(parseInt(item.plrAllOrg)=='-9998'?'--':parseInt(item.plrAllOrg)))}}</font>Hz
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

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

 <style lang="scss" scoped>
.detailTable {
    .reds {
        color: #f54e45;
    }
    margin: 0 auto;
    .el-table {
        font-size: 12px;
    }
    .el-table th {
        padding: 6px 0;
        font-size: 12px;
    }
    .el-table td {
        padding: 8px 0;
    }
    .el-table th > .cell {
        padding-right: 2px;
        padding-left: 2px;
    }
    .detail-box {
        // width: 100%;
        .detail-box-top {
            // width: 762px;
            height: 48px;
            background: rgba(248, 249, 250, 1);
            display: flex;
            border-bottom: 1px solid #eee;
            span {
                display: inline-block;
                font-size: 12px;
                font-family: MicrosoftYaHei;
                color: rgba(100, 106, 115, 1);
                line-height: 16px;
                padding: 8px 5px;
            }
        }
        .detail-box-bottom {
            // width:92px;
            height: 123px;
            background: rgba(255, 255, 255, 1);
            font-size: 12px;
            font-family: MicrosoftYaHei;
            color: rgba(31, 36, 41, 1);
            .detail-box-bottom-box {
                display: flex;
                border-bottom: 1px solid #eee;
                span {
                    padding: 12px 5px;
                    display: inline-block;
                }
            }
        }
    }
}
</style>
<style lang="scss">
.detailTable {
    .el-table__header,
    table {
        width: auto !important;
    }
    .el-table_tbody {
        width: auto !important;
    }
}
</style>
