<template>
  <div class="eqS-right">
       <div class="atten-content">
         <p>重点关注的内容</p>
         <div><span></span><li>此区域暂时没有数据！</li></div>
       </div>
       <div class="info-center">
         <div class="i-top" v-if="flag==3">
           <div class="top-left">
             <div class="i-box">优</div>
             <p>环境健康指数</p>
           </div>
           <div class="top-right">
             <p>空气温度: <span>{{envData.Tdb}}℃</span></p>
             <p>空气湿度: <span>{{envData.RH }}%</span></p>
             <p>CO2浓度: <span>{{envData.CO }} ppm</span></p>
             <p>PM2.5: <span>{{envData.PM}} μg/m³</span></p>
           </div>
         </div>
          <div class="i-top2" v-if="flag==1">
              <p><img src="/static/img/yongxing.png" alt=""> 设备运行状态 <span class="grade">{{RunStatusData || '--'}}</span></p>
          </div>
          <div class="i-top2" v-if="flag==4">
              <p><img src="/static/img/yongxing.png" alt=""> 系统运行状态 <span class="grade">{{RunStatusData || '--'}}</span></p>
          </div>
          <div class="i-top2" v-if="flag==2">
              <p><img src="/static/img/yongxing.png" alt=""> 使用状态 <span class="grade" v-if="linkEq">使用中</span><span v-else>暂无使用</span></p>
          </div>
         <div class="i-bottom"  v-if="flag==1 || flag==3 || flag==4">
           <div class="bottom-left">
            <p><img src="/static/img/elePower.png"> <strong>{{ElecConsumPData || '--'}}</strong> kW</p>
            <p class="readmine">耗电功率</p>
           </div>
           <div class="bottom-right">
             <p><img src="/static/img/eleCon.png" alt=""> <strong>{{AccElecConsumData|| '--'}}</strong> kW/h</p>
             <p class="readmine">累计用电量</p>
           </div>
         </div>
       </div>
       <div v-if="flag==1" class="fault-rate">
           <div>
               <p class="rate-num">{{subsetCount}}</p>
               <p class="rate-name">同类设备数量</p>
           </div>
           <!-- <div>
               <p class="rate-num">2<span style="font-size:14px">%</span>    </p>
               <p class="rate-name">平均故障率</p>
           </div> -->
           <div>
               <p class="rate-num">{{repairRadio}}<span style="font-size:14px">%</span> </p>
               <p class="rate-name">同类设备故障率</p>
           </div>
       </div>
       <div class="detail-info" >
         <ul>
           <a  :href="`/equipment?pid=${this.$store.state.projId}&${Info.infos.EquipID}&${Info.infos.EquipLocalName}`" target="_black">
             <li v-if="flag==1">
             <a><img src="/static/img/alarmAandS.png" alt="">未恢复的报警 </a>
             <span class="type-number">{{noAlarmNum}}<img src="/static/img/left.png" alt=""></span>
           </li>
           </a>
           <a  :href="`/rooms?pid=${this.$store.state.projId}&${Info.infos.RoomID}&${Info.infos.RoomLocalName}`" target="_black">
             <li v-if="flag==3">
             <a><img src="/static/img/alarmAandS.png" alt="">未恢复的报警 </a>
             <span class="type-number">{{noAlarmNum}}<img src="/static/img/left.png" alt=""></span>
           </li>
           </a>
           <li v-if="flag!=2">
             <a><img src="/static/img/order.png" alt="">进行中的工单 </a>
             <span class="type-number">{{orderCount}}<img src="/static/img/left.png" alt=""></span>
           </li>
           <li @click="getMoreMonitor" v-if="flag==3">
             <a><img src="/static/img/video.png" alt="">查看空间监控</a>
             <span class="type-number" style="font-size:14px">{{moniData}}个机位<img src="/static/img/left.png" alt=""></span>
           </li>
           <li @click="getMoreMonitor" v-if="flag==2 || flag==1">
             <a><img src="/static/img/video.png" alt="">查看设备相关视频</a>
              <span class="type-number" style="font-size:14px">{{moniData}}个机位<img src="/static/img/left.png" alt=""></span>
           </li>
           <li @click="getMoreMonitor" v-if="flag==4">
             <a><img src="/static/img/video.png" alt="">系统内相关视频</a>
             <span class="type-number" style="font-size:14px">{{moniData}}个机位<img src="/static/img/left.png" alt=""></span>
           </li>
         </ul>
         <!-- <div class="video-box">
           <video class="my-video" ></video>
           <p><button class="my-button" v-for="(item ,index ) in btn" :key="index" :class="{btnClass:type==item.type}" @click="changeVideo(item)">{{item.name}}</button></p>
         </div> -->
       </div>
  </div>
</template>

<script>

export default {
  components: {

  },

  mixins: [],

  props: {
    envData: {
      type: Object,
      default: () => {}
    },
    Info: {
      type: Object,
      default: () => {}
    },
    noAlarmNum: {
      type: Number,
      default: 0
    },
    AccElecConsumData: {
      type: String
    },
    ElecConsumPData: {
      type: String
    },
    orderCount: {
      type: Number
    },
    linkEq: {
      type: String
    },
    RunStatusData: {
      type: String
    },
    subsetCount: {
      type: Number
    },
    repairRadio: {
      type: Number
    },
    moniData: {
      type: Number
    }
  },

  data () {
    return {
      btn: [{type: 1, name: 'f001'}, {type: 2, name: 'f002'}, {type: 3, name: 'f003'}, {type: 4, name: 'f004'}],
      type: 1

    }
  },

  computed: {
    flag () {
      if (location.pathname === '/spread') {
        return 1
      } else if (location.pathname === '/asset') {
        return 2
      } else if (location.pathname === '/vr') {
        return 3
      } else if (location.pathname === '/system') {
        return 4
      }
    },
    RunStatus () {
      if (this.Info.infos.RunStatus) {
        return this.Info.infos.RunStatus
      } else {
        return '--'
      }
    }

  },

  mounted () {

  },

  methods: {
    getMoreMonitor () {
      this.$router.push('monitoring')
    },
    changeVideo (item) {
      this.type = item.type
    }
  }

}
</script>

<style scoped lang="less" >
.eqS-right {
    min-width: 300px;
   .atten-content {
        background: #FFFFFF;
        box-shadow: 0 2px 10px 0 rgba(44,48,62,0.06);
        border-radius: 2px;
        padding: 20px;
        >p {
            font-size: 18px;
            color: #212830;
        }
        div {
             span {
                background: #728DEE;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                //margin-top: 8px;
                display: inline-block;
            }
            li {
                font-size: 14px;
                color: #6D747C;
                list-style: none;
                padding-left: 14px;
                display: inline;
            }
       }
    }
    .info-center{
        margin: 20px 0;
        background: #FFFFFF;
        box-shadow: 0 2px 10px 0 rgba(44,48,62,0.06);
        border-radius: 2px;
        .i-top {
            display: flex;
            padding: 20px;
            justify-content: space-evenly;
            .top-left {
                .i-box {
                    background: #3BC6A1;
                    border-radius: 6px;
                    width: 80px;
                    height: 80px;
                    text-align: center;
                    line-height: 80px;
                    font-size: 20px;
                    color: #FFFFFF;
                }
                >p{
                    margin-top: 14px;
                    font-size: 14px;
                    color: #6D747C;
                }
            }
            .top-right {
                font-size: 14px;
                color: #6D747C;
                >p {
                    margin-bottom: 10px;
                }
            }
       }
       .i-top2 {
           padding: 10px 0 15px 20px;
          p{
               >img {
               padding-right: 8px;
           }
          }
           .grade {
               font-size: 32px;
               color: #3BC6A1;
               margin-left: 10%;
           }
       }
        .i-bottom {
            display: flex;
            padding: 0 20px 20px 20px;
            justify-content:space-between;
            img {
                //margin-left: -42px;
               margin-top: -5px;
            }
            strong {
                font-family: 'DIN-Medium';
                font-size: 18px;
                color: #212830;
            }
            .readmine {
                font-size: 14px;
                color: #6D747C;
            }
        }
    }
    .fault-rate{
        display: flex;
        justify-content:space-between;
        background: #FFFFFF;
        box-shadow: 0 2px 10px 0 rgba(44,48,62,0.06);
        border-radius: 2px;
        padding:20px 20px;
        margin-bottom:20px;
        >div{
            .rate-num {
                font-size: 36px;
                color: #212830;
                text-align: center;
            }
            .rate-name {
                font-size: 14px;
                color: #6D747C;
            }
        }
    }
    .detail-info {
        background: #FFFFFF;
        box-shadow: 0 2px 10px 0 rgba(44,48,62,0.06);
        border-radius: 2px;
        ul {
            margin-bottom: 0;
            li {
                padding-left: 24px;
                height: 65px;
                line-height: 65px;
                font-size: 14px;
                color: #6D747C;
                display: flex;
                align-items:center;
                justify-content:space-between;
                cursor: pointer;
                &:hover {
                    background: #f5f5f5;
                }
                .type-number {
                    color: #212830;
                    font-size: 32px;
                    cursor: pointer;
                    >img {
                        margin-left: 14px;
                    }
                }
            img {
                //vertical-align: middle;
                margin-right:20px;
                margin-top: -2px;
            }
            }
        }
        .video-box{
            width: 93%;
            margin: 0 10px;
            //height: 240px;
            background: #F5F5F5;
            border-radius: 2px;
            .my-video {
                margin: 10px;
                width: 95%;
                //height: 180px;
                background: rgba(0,0,0,0.30);
                border-radius: 2px;
            }
            >p {
                padding-left: 10px;
                .my-button {
                    width: 52px;
                    height: 28px;
                    background: #FFFFFF;
                    border: 1px solid #728DEE;
                    border-radius: 2px;
                    font-size: 14px;
                    color: #728DEE;
                    display: inline-block;
                    margin-right: 10px;
                    text-align: center;
                    border-radius: 2px;
                    margin-bottom: 10px;
                     &:hover {
                        background: #728DEE;
                        color: #fff;
                    }
                }
                 .btnClass{
                    background: #728DEE;
                    color: #fff;
                }

            }
        }
   }
}
</style>
