<!--
 * @Author: your name
 * @Date: 2022-04-12 18:02:16
 * @LastEditTime: 2022-04-13 09:24:43
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/ScrollItem.vue
-->
<template>
  <div class="top flex" :class="[{ n: index % 2 == 0, n2: index % 2 == 1 }]">
    <div class="left zzz" :title="data.detectorCode">{{ data.detectorCode }}</div>
    <div class="zzz" :title="data.fConstructionEnd">
      {{getType(data.detectorType)}}
    </div>
    <div class="zzz" :title="data.statusName || ''">{{ data.statusName || '' }}</div>
    <div class="zzz" :title="data.alarmTime || ''">{{ data.alarmTime || '-' }}</div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
    },
    index: {
      type: Number,
    },
  },
  methods: {
    getType(value){
      if(value==1){
        return "家用探测器";
      }else if(value==2){
        return "工业探测器";
      }else if(value==3){
        return "激光家报";
      }else if(value==4){
        return "地下井探测器";
      }else{
        return '-'
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  height: 29px;
  line-height: 29px;
  &.n {
    color: #333333;
  }
  &.n2 {
    color: #1f8df3;
    background: rgba(0, 0, 0, 0.1);
  }
  > div {
    flex: 1;
    text-align: center;
    font-size: 12px;
    box-sizing: border-box;
    padding: 0 2px;
    &.left{
      padding: 0 5px;
    }
  }
}
</style>
