<!-- 气象站设备状态 -->
<template>
  <div class="tab-pane">
    <div class="list">
      <div class="elementItem" v-for="(item,index) in reaTimeStatusList" :key="index">
        <div>{{item.e}}{{item.name}}</div>
        <!-- <div>{{item.e}}{{item.name}}<i class="el-icon-refresh edit" @click="editName(item,index)"></i></div> -->
        <div class="elementValue">{{item.num}}{{item.unit}}</div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ["equipId", "equipType"],
  data() {
    //这里存放数据
    return {
        reaTimeStatusList:[],
        equipDataState:false
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 设备状态弹框
    equipStateSet(id, device_status) {
      this.currImei = id;
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=weather.weather.qxz_status",
        data: this.qs.stringify({
          device_type_id: this.equipType,
          page_size: 1,
          device_id: id,
          page: 1
        })
      }).then(res => {
        if (res.data.message == "") {
          console.log(res.data.data.counts)
            let arr = new Array();
            let conf = res.data.data.conf;
            let dat = res.data.data.dat;
            for (let i1 in conf) {
              if (conf[i1]) {
                let arr2 = conf[i1].split("#");
                let obj = {};
                obj.e = "e" + i1.slice(1);
                obj.name = arr2[0];
                obj.unit = arr2[1];
                for (let i2 in dat) {
                  if (i1 == i2) {
                    let arr3 = dat[i2].split("#");
                    obj.num = arr3[0] == "-99.99" ? "N/A" : arr3[0];
                    obj.icon = arr3[1];
                    arr.push(obj);
                  }
                }
              }
            }
            arr = arr.sort((a, b) => {
              return a.e.slice(-1) - b.e.slice(-1);
            });
            this.reaTimeStatusList = arr;

          //   let data = res.data.data.data[0].d_h_t;
          //   this.equipStateList[5].val = device_status == 0 ? "离线" : "在线";
          //   for (let item in data) {
          //     if (item == "ds") {
          //       this.equipStateList[0].val = data[item] == 0 ? "关机" : "开机";
          //     } else if (item == "ws") {
          //       switch (data[item]) {
          //         case 0:
          //           this.equipStateList[1].val = "待机";
          //           break;
          //         case 1:
          //           this.equipStateList[1].val = "工作";
          //           break;
          //         case 2:
          //           this.equipStateList[1].val = "充电";
          //           break;
          //       }
          //     } else if (item == "tt") {
          //       this.equipStateList[2].val =
          //         data[item] == 0 ? "常亮" : data[item];
          //     } else if (item == "clt") {
          //       this.equipStateList[3].val = data[item] / 60;
          //     } else if (item == "tbs") {
          //       this.equipStateList[4].val = data[item] == 0 ? "正常" : "保护";
          //     } else if (item == "rps") {
          //       this.equipStateList[6].val = data[item] == 0 ? "正常" : "保护";
          //     }
          //   }
        }
      });
      // this.equipStateDialogVisible = true;
    },
    editName(item,index){
      console.log(item)
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.equipStateSet(this.equipId, this.equipType);
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
.tab-pane{
    background: rgba(56,67,86,.7);
}
.list {
    display: flex;
    justify-content: left;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 10px 7px 5px 7px;
    .elementItem{
        width: 33.3333%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        line-height: 36px;
        border-left: 5px solid rgba(56,67,86,.7);
        border-right: 5px solid rgba(56,67,86,.7);
        margin-bottom: 10px;
        padding: 0 9px;
        font-size: 13px;
        .elementValue{
            color: #04d5e8;
        }
        .edit{
          cursor: pointer;
        }
    }
    
    .elementItem:nth-child(6n+1),
    .elementItem:nth-child(6n+2),
    .elementItem:nth-child(6n+3){
        background: #0c142c;
    }

    .elementItem:nth-child(6n+4),
    .elementItem:nth-child(6n+5),
    .elementItem:nth-child(6n+6){
        background: #0c142c;
    }
}
.empty{
  line-height: 100px;
  text-align: center;
  font-size: 14px;
  color: #0195ff;
}
</style>