<template>
    <div class="lock-item" :class="data.battery<15?'lock-item-red':''">
        <div class="lock-content">
            <img :src="src" class="avator" alt="">
            <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">{{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">信号：</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==item.code"  v-for="(item,index) in accessPlatform.show" :key="index">{{item.desc}}</div>
<!--                    <div class="row-title">类型：</div>-->
<!--                    <div class="row-ime" v-if="data.manufactureId==item.code" v-for="(item,index) in accessPlatform.deviceType" :key="index">{{item.desc}}</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 class="person-normalOne lock-offline" v-if="data.battery<15">低电</div>
    </div>
</template>

<script>
export default {
  name: "deviceLi",
	data() {
		return {
			accessPlatform:{}
		}
	},
  props: {
    data:{
      type:Object,
      default:{}
    },
    src:{
      type:String,
      default:''
    }
  },
	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 #409eff;
    border-left: 5px solid #59adf7;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.lock-item-red{
    border: 1px solid #ec6363;
    border-left: 5px solid #ed3131;
}
.lock-content{
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 166px;
    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: 10px 0 8px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #409eff;
    overflow: hidden;
    /* white-space:nowrap; */
    text-overflow: ellipsis;
     display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
}
.lock .lock-line{
    width: 212px;
    height: 1px;
    background: #59adf7;
    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: 26px;
}
.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: #58acf533;
    border-radius: 0 0 10px 10px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #409eff;
    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-normalOne{
    width: 42px;
    height: 22px;
    position: absolute;
    bottom: 40px;
    left: 9px;
    text-align: center;
    line-height: 22px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
}
.person-normalOne.lock-offline{
    background: rgb(237 49 49 / 10%);
    border: 1px solid #ec6363;
    border-radius: 4px;
    color: #ed3131;
}
.person-normal.normal{
    background: #58acf533;
    border: 1px solid #409eff;
    border-radius: 4px;
    color: #409eff;
}
.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;
}
</style>
