<template>
    <div class="storage-item">
        <div class="container">
            <BatteryStatus
            :storeCode="storeCode"
            :comState="comState"
            :sn="sn"
            :soc="soc"
            :chgEstimatedTime="chgEstimatedTime"
            ></BatteryStatus>
            <div class="battery-info">
                <BatteryInfo :num="current" unit="A" text="电流"></BatteryInfo>
                <BatteryInfo :num="voltage" unit="V" text="电压"></BatteryInfo>
                <BatteryInfo :num="minTemperature" unit="℃" text="最低温度"></BatteryInfo>
                <BatteryInfo :num="maxTemperature" unit="℃" text="最高温度"></BatteryInfo>
                <BatteryInfo :num="maxCellVoltage" unit="V" text="最高单体电压"></BatteryInfo>
                <BatteryInfo :num="minCellVoltage" unit="V" text="最低单体电压"></BatteryInfo>
                <BatteryInfo :num="soh" unit="%" text="SOH"></BatteryInfo>
                <div class="info-right">
                    <img src="../assets/have.png">{{storeState? '有电池':'空仓'}}
                </div>
            </div>
            <div class="battery-charger">
                <BatteryCharger
                :chargerCode="chargerInfoVo.chargerCode"
                :comState="chargerInfoVo.comState"
                v-show="chargerInfoVo.chargerCode"></BatteryCharger>
                <div class="battery-info" v-show="chargerInfoVo.chargerCode">
                    <BatteryInfo :num="chargerInfoVo.demandCurrent" unit="A" text="需求电流"></BatteryInfo>
                    <BatteryInfo :num="chargerInfoVo.demandVoltage" unit="V" text="需求电压"></BatteryInfo>
                    <BatteryInfo :num="chargerInfoVo.chgCurrent" unit="A" text="充电电流"></BatteryInfo>
                    <BatteryInfo :num="chargerInfoVo.chgVoltage" unit="V" text="充电电压"></BatteryInfo>
                    <BatteryInfo :num="chargerInfoVo.chgCapacity" unit="kwh" text="充电电量"></BatteryInfo>
                    <div class="info-right">
                        <img src="../assets/have.png">{{chargerState}}
                    </div>
                </div>
                <img src="../assets/nodata.png" class="nodata" v-show="!chargerInfoVo.chargerCode">
            </div>
        </div>
    </div>
</template>

<script>
import BatteryInfo from "./BatteryInfo.vue";
import BatteryStatus from "./BatteryStatus.vue";
import BatteryCharger from "./BatteryCharger.vue"
export default {
    name:"StorageInfo",
    props:['storeCode','comState','sn','soc','chgEstimatedTime','current','voltage','minTemperature','maxTemperature','maxCellVoltage','minCellVoltage',
        'soh','storeState','chargerInfoVo'],
    components: {
        BatteryInfo,
        BatteryStatus,
        BatteryCharger
    },
    data(){
        return{
            
        }
    },
    computed:{
        chargerState(){
            if(this.chargerInfoVo.chgState === 1){
                return '充电中'
            }else if(this.chargerInfoVo.chgState === 2){
                return '待充电'
            }else if(this.chargerInfoVo.chgState === 3){
                return '故障'
            }else if(this.chargerInfoVo.chgState === 4){
                return '充电完成'
            }else{
                return '无'
            }
        }
    }
};
</script >
<style lang="scss" scoped>
    .storage-item{
        width: 19%;
        background-color: #0a101c;
        min-height: 100%;
        margin-right: 22px;
        .container{
            padding: 1.3vh 25px 0.5vh 25px;
            color: #404a63;
            font-size: 15px;
            
            .battery-info{
                display: flex;
                margin-top: 16px;
                justify-content: space-between;
                flex-wrap: wrap;
                .info-right{
                    width: 46%;
                    background-color: #0e1f31;
                    border: #1b71a4 solid 1px;
                    height: 34px;
                    line-height:32px;
                    text-align: center;
                    font-size: 14px;
                    font-weight: 500;
                    color: white;
                    img{
                        vertical-align: middle;
                    }
                }
                .info-warning{
                    width: 46%;
                    background-color: #201823;
                    border: #834246 solid 1px;
                    height: 34px;
                    line-height:32px;
                    text-align: center;
                    font-size: 14px;
                    font-weight: 500;
                    color: white;
                    img{
                        vertical-align: middle;
                    }
                }
            }
            .battery-charger{
                width: 100%;
                min-height: 228px;
                .nodata{
                    position: relative;
                    left: 40%;
                    margin-top: 6vh;
                    
                }
            }
        }
    }
</style>