<template>
  <div class="room-eq">
      <div v-if="content.length!=0">
       <div class="eq-box" v-for="(item,index) in content" :key='index'>
          <div class="box-left">
              <p class="eq-name">{{item.equipLocalName}}-{{item.equipLocalID}}</p>
              <p class="eq-type">设备类型: <span v-if="$store.state.equipmentAll.length > 0">{{formatCodetoClass($store.state.equipmentAll, item.category)}}{{facility}}</span></p>
              <p class="eq-type">设备型号: <span>{{item.specification}}</span></p>
          </div>
          <div class="box-right">
              <img :src="`/dp-auxiliary/image-service/common/file_get?systemId=dataPlatform&key=${item.equipQRCode}`">
          </div>

          <div class="box-bottom">
               <p class="eq-type"  >设备图片: </p>
               <div class="pic-box" v-if="item.pic">
                   <ex-swipe :list="item.pic"></ex-swipe>
              </div>
              <div class="no-box" v-else>
                  <img src="/static/img/noimg.png" alt="">
              </div>
              <p v-if="item.alarmList"><img src="/static/img/prompt.png" alt=""> 当前 {{item.alarmList.length}} 条报警未恢复：
                 <span v-for="(ele,index) in item.alarmList" :key="index">{{ele.alarmName}} </span>
              </p>
          </div>
      </div>
      <p class="other-alarm">另有 {{count}} 个设备未报警</p>
      </div>
      <div class="noEq" v-else>
          空间内设备未发生报警，请继续保持！
      </div>
  </div>
</template>

<script>
import {formatCodetoClass} from '../../tools/formatData.js'
import Swipe from '../../common/swipe'
// import {mapActions, mapMutations, mapGetters, mapState} from 'vuex'
import axios from 'axios'
export default {
  components: {
    'ex-swipe': Swipe
  },

  mixins: [],

  props: {

  },

  data () {
    return {

      formatCodetoClass,

      content: [
        //    {
        //        equipLocalName :"" ,   //设备本地名称
        //        equipLocalID:""    ,     //设备本地编码
        //        specification:" ",        //设备型号
        //        equipQRCode:"",         //设备二维码
        //        category:""            //设备类型编码
        //    }

      ],
      equipmentAll: [],
      facility: '',
      count: ''
    }
  },

  computed: {

  },

  mounted () {
    this.queryEquipmentInSpace()
  },

  methods: {
    // 查询设备中空间报警
    queryEquipmentInSpace () {
      let params = {
        spaceId: 'Sp1101080001dbba0f04aa8b11e8bd139b854ebc9e7b' // 空间id
      }
      axios.post(`/dp-auxiliary/alarm-system/alarm/equipInSpace/query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
        let data = res.data
        if (data.Result == 'success') {
          this.content = data.Content
          this.count = data.EquipCount - data.Count
        }
      })
    }

    // 所有的设备类型编码和对应的设备类型
    // getEquipmentAll(){
    //     axios.get(`/data-platform-3/dict/query/equipment_all`).then(res=>{
    //       let data = res.data;
    //       if(data.Result=='success'){
    //           this.equipmentAll = data.Content;
    //           this.queryEquipmentInSpace();
    //       }
    //     })
    // },
    // 将设备类型编码转换成对应的设备类型
    // formatCodetoClass(this, str){
    //     let code = str.slice(2,str.length)
    //     this.equipmentAll.forEach(i=>{
    //         if(i.code == str.slice(0,2)){
    //              i.content.forEach(j=>{
    //             let item = j.content.find(k=>k.code == code)
    //             if(item){
    //               this.facility = item.facility
    //             }
    //         })
    //         }

    //     })
    // }
  }

}
</script>

<style scoped lang="less" >
.room-eq {
    margin:0 20px 0 20px;
    .noEq{
        padding-bottom: 40px;
    }
    .eq-box {
        background: #FAFAFA;
        border: 1px solid #E0E0E0;
        border-radius: 2px;
        display: inline-block;
        margin-right: 18px;
        //min-width: 380px;
        width: 560px;
        padding: 20px 20px 20px 20px;
        margin-bottom: 30px;
        .box-left {
            float: left;
            .eq-name {
              font-size: 18px;
              color: #728DEE;
              font-weight: bold;
           }
           .eq-type{
                font-size: 14px;
                color: #6D747C;
                line-height: 16px;
                padding:9px 0;
               >span{
                   color: #212830;
                   padding-left: 14px;
               }
           }
        }
        .box-right{
            float: right;
            margin-right: 45px;
            >img{
                width:91px;
                height: 90px;
            }
        }
        .box-bottom {
            clear: both;
            color: #F08378;
            font-weight: bold;
            .pic-box {
               height: 100px;
               //width: 500px;
               margin: 20px 0 20px 20px;
           }
           .no-box{
               height: 100px;
               //width: 500px;
               margin: 20px 0 20px 20px;
               img {
                   width:96px;
                   height: 95px;
               }
           }

        }
    }
    .other-alarm {
        padding-bottom: 40px;
    }
    .removeClass{
        transform: translateX(-100px);
    }
}
</style>
