<template>
    <div class="lock-item" :class="data.lockStatus==0?'':'contred'">
        <div class="lock-content" >
            <img src="../../../assets/img/mc.png" class="avator" alt="" v-if="data.lockStatus==0">
            <img src="../../../assets/img/mc1.png" class="avator" alt="" v-else-if="data.lockStatus==1">
            <img src="../../../assets/img/mc1.png" class="avator" alt="" v-else>			
            <div class="lock">
                <div class="lock-name" :title="data.roomName" v-if="data.roomName">{{data.roomName}}</div>
                <div class="lock-name" :title="data.roomName" v-else>{{data.deviceNum}}</div>
                <div class="lock-line"></div>
                <div class="lock-row">
                    <div class="row-title">门状态：</div>
                    <div class="row-ime red"><span v-if="data.lockStatus==0">门已关</span><span v-if="data.lockStatus==1">门已开</span></div>
                </div>
                <div class="lock-row">
                    <div class="row-title">名称：</div>
                    <div class="row-ime">{{data.deviceNum}}</div>
                </div>
                <div class="lock-row">
                    <div class="row-title">IMEI：</div>
                    <div class="row-ime">{{data.imei}}</div>
                </div>
                <div class="lock-row">
                    <div class="row-title">IMSI：</div>
                    <div class="row-ime">{{data.imsi}}</div>
                </div>
                <div class="lock-row">
                    <div class="row-title">电量：</div>
                    <div class="row-ime">{{data.battery}}</div>
                    <div class="row-title">
						<span v-if="data.accessPlatform==item.code" v-for="(item,index) in accessPlatform.show" :key="index">{{item.desc}}</span>信号：
					</div>
                    <div class="row-ime">{{data.rssi}}</div>
                </div>
                <!-- <div class="lock-row">
                    <div class="row-title">运营商：</div>
                    <div class="row-ime" v-if="data.accessPlatform==1">电信</div>
                    <div class="row-ime" v-if="data.accessPlatform==2">移动</div>
                    <div class="row-ime" v-if="data.accessPlatform==3">联通</div>
                </div> -->
            </div>
        </div>
        <div class="lock-bottom" v-if="data.roomId">已绑定</div>
        <div class="lock-bottom" v-else>未绑定</div>
        <div class="person-normal normal" v-if="data.isOnline == 1">在线</div>
        <div class="person-normal lock-offline" v-else>离线</div>
    </div>
</template>

<script>
    export default {
        name: "deviceLi",
		data() {
			return {
				accessPlatform:{}
			}
		},
        props: ['data'],
		created() {
			this.accessPlatform = this.$MANUFACTURER.accessPlatform
		},
        methods: {}
    };
</script>

<style scoped>
    .lock-item {
        width: 300px;
        height: 200px;
        margin-right: 20px;
        margin-bottom: 29px;
        position: relative;
        border: 1px solid #459f75;
        border-left: 5px solid #459f75;
        border-radius: 10px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    .lock-content {
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        height: 165px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    
    .lock-content img {
        width: 33px;
        height: 110px;
        margin: 24px 26px 10px 16px;
    }
    
    .lock {
        width: 220px;
    }
    
    .lock .lock-name {
        margin: 20px 0 8px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #459f75;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    
    .lock .lock-line {
        width: 212px;
        height: 1px;
        background: #459f75;
        margin-bottom: 10px;
    }
    
    .lock-row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333;
        line-height: 20px;
    }
    
    .w50 {
        width: 50%;
    }
    
    .lock-row .row-title {
        width: 60px;
    }
    
    .lock-row .row-ime {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .lock-bottom {
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        height: 33px;
        background: #f2f6fc;
        border-radius: 0 0 10px 10px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #459f75;
        text-align: center;
        line-height: 33px;
    }
    
    .person-normal {
        width: 42px;
        height: 22px;
        position: absolute;
        top: 9px;
        left: 9px;
        text-align: center;
        line-height: 22px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
    }
    
    .person-normal.normal {
        background: #58acf533;
        border: 1px solid #459f75;
        border-radius: 4px;
        color: #459f75;
    }
    
    .person-normal.lock-offline {
        background: rgba(237, 125, 49, .1);
        border: 1px solid #ec9a63;
        border-radius: 4px;
        color: #ed7d31;
    }
    
    .lock-bottom {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
	.contred.lock-item{
		border: 1px solid #da2f14;
		border-left: 5px solid #da2f14;
	}
	.contred .red{
		color: #da2f14;
	}
	/* .contred .lock .lock-name{
		color: #da2f14;
	}
	.contred .person-normal.normal{
		border: 1px solid #da2f14;
		color: #da2f14;
	}
	.contred .lock .lock-line{
		background:#da2f14;
	}
	.contred .lock-bottom{
		color: #da2f14;
	}
	.contred .lock-row{
		color: #da2f14;
	} */
</style>