<template>
    <div class="battery-info" :class="[IsSelect?'SelectBorder':'defaultBorder']" @click="HandleBatterySelected(storeCode,storeState,freezeState,getChgState)">
        <ul>
            <li>
                <el-tooltip class="item" effect="dark" content="冻结中" placement="top"  v-if="freezeState">
                    <span><img src="../assets/s5.png"></span>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" :content="getChgState==2?'充电中':'未充电'" placement="top">
                    <span><img :src="getChgState==2?require('../assets/s1-active.png'):require('../assets/s1.png')"></span>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" :content="comState===1?'已连接':'未连接'" placement="top">
                    <span><img :src="comState===1?require('../assets/s2-link.png'):require('../assets/s2.png')"></span>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" :content="alarmState==1?'告警中':'无警告'" placement="top">
                    <span><img :src="alarmState==1?require('../assets/s3-active.png'):require('../assets/s3.png')"></span>
                </el-tooltip>
            </li>
            <li class="battery-center" :class="[storeState===1?'battery-have':'battery-null']">
                <div class="battery-box" v-show="getChgState!=2 && storeState===1">
                    <div class="batteryList">
                        <div class="battery-many" v-for="item in getBatteryNum" :key="item"
                            :style="{ 'bottom': ChangePxToRem(item * 24 - 24) }">
                            <img :src="item === getBatteryNum ? require('../assets/ding.png') : require('../assets/zhong.png')">
                        </div>
                    </div>
                    <span>SOC {{soc || '0'}}%<br>{{chgEstimatedTime || '0'}}min 充满</span>
                </div>
                <div class="battery-anmition" v-show="getChgState==2">
                    <span>SOC {{soc || '0'}}%<br>{{chgEstimatedTime || '0'}}min 充满</span>
                </div>
            </li>
            <li>
                <span class="battery-number">{{ storeCode }}号仓</span>
                <!-- <el-tooltip class="item" effect="dark" content="已落座" placement="top" v-if="storeState==2">
                    <span><img src="../assets/s4-active.png"></span>
                </el-tooltip> -->
                <el-tooltip class="item" effect="dark" :content="chargerComState==1?'已连接':'未连接'" placement="bottom">
                    <span><img :src="chargerComState==1?require('../assets/s2-link.png'):require('../assets/s2.png')"></span>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" :content="chgAlarmState==1?'告警中':'无告警'" placement="bottom">
                    <span><img :src="chgAlarmState==1?require('../assets/s3-active.png'):require('../assets/s3.png')"></span>
                </el-tooltip>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'BatteryInfo',
    props:['soc',
        'chgState',
        'storeCode',
        'IsSelect',
        'BatterySelected',
        'BatterySelectAllArr',
        'chgEstimatedTime',
        'storeState',//是否有电池
        'freezeState',//冻结状态
        'comState',//电池通讯状态
        'chargerComState',//充电机通讯状态
        'chgAlarmState',//充电机告警状态
        'alarmState',//电池告警状态
    ],
    data(){
        return{
            // ChildrenisSelect:false,//电池选中切换
        }
    },
    computed:{
        //计算电池块数
        getBatteryNum() {
            if(this.soc === 0){return 0}
            else if (this.soc > 0 && this.soc <= 20) { return 1 }
            else if (this.soc > 20 && this.soc <= 40) { return 2 }
            else if (this.soc > 40 && this.soc <= 60) { return 3 }
            else if (this.soc > 60 && this.soc <= 80) { return 4 }
            else if (this.soc > 80 && this.soc <= 100) { return 5 }
        },
        //计算电池是否充电中
        getChgState(){
            if(this.chgState==1 || this.chgState==2){
                return 2
            }else{
                return 0
            }
        }
    },
    methods:{
        //把选择的仓位号传给父组件，触发函数BatterySelected
        HandleBatterySelected(storeCode,storeState,freezeState,getChgState){
            const CurrentStore={storeCode,storeState,freezeState,getChgState}//当前选择的电池仓位号，以及是否有电池
            this.BatterySelected(CurrentStore)
        },
        //将模板中的PX TO REM
        ChangePxToRem(num){
            // const currentFz=(window.document.documentElement.style.fontSize).replace('px','')
            if(num > 0){
                return num/80+'rem';
            }else{
                return 0
            }
        }
    }

}
</script>

<style lang="scss" scoped>
    .battery-null{
        background: #292D46;
    }
    .battery-have{
        background: #0A101C;
    }
    .SelectBorder{
        border: 1px solid #338150;
    }
    .defaultBorder{
        border: 1px solid rgb(25, 34, 51,0.55);
    }
</style>