<!-- 设备状态 -->
<template>
  <div class="">
    <div class="equipInfo">
      <div class="equipImg">
        <img v-if="equipType==2" src="../../../../../static/images/equipImg2.png" alt="">
        <img v-if="equipType==3" src="../../../../../static/images/equipImg3.png" alt="">
        <img v-if="equipType==4" src="../../../../../static/images/equipImg4.jpg" alt="">
        <img v-if="equipType==5" src="../../../../../static/images/equipImg5.png" alt="">
        <img v-if="equipType==7" src="../../../../../static/images/equipImg7.png" alt="">
        <img v-if="equipType==8" src="../../../../../static/images/equipImg8.jpg" alt="">
        <p>设备类型：{{equipType|equipType}}</p>
      </div>
      <div class="equipMsg">
        <div class="title">
          <span></span>
          <span>基础信息</span>
        </div>
        <div>设备ID：{{equipId}}</div>
        <div>设备名称：{{info.device_name || '--'}}</div>
        <div>在线状态：<span :class="[info.is_online?'online':'offline']">{{info.is_online?'在线':'离线'}}</span></div>
        <template v-if="equipType==2">
          <div>设备版本：{{info.dtype || '--'}}</div>
        </template>
        <template v-if="equipType==3">
          <div>设备版本：{{info.dtype || '--'}}</div>
        </template>
        <template v-if="equipType==4">
          <div>添加诱芯：
            <span v-if="!lureShow">{{lure}}</span>
            <span ref="upDateLure" v-if="lureShow">
              <input type="text" v-model="editlure" placeholder="请输入监测害虫名称">
              <i class="el-icon-check controlIcon" @click="submitYx()"></i>
              <i class="el-icon-close controlIcon" @click="lureShow=false;editlure=lure"></i>
            </span>
            <i v-else class="el-icon-edit controlIcon" @click="changeLure()"></i>
          </div>
        </template>
        <template v-if="equipType==5">
          <div>电压：{{info.device_status || '--'}}</div>
          <div>信号强度：{{info.device_status || '--'}}</div>
        </template>
        <template v-if="equipType==7">
          <div>载玻片、培养液更换：
            <span v-if="!lureShow">{{lure}}</span>
            <span ref="upDateLure" v-if="lureShow">
              <input type="text" v-model="editlure" placeholder="请输入监测害虫名称">
              <i class="el-icon-edit controlIcon" @click="submitYx()"></i>
              <i class="el-icon-edit controlIcon" @click="lureShow=false;editlure=lure"></i>
            </span>
            <i v-else class="el-icon-edit controlIcon" @click="setTime()"></i>
          </div>
        </template>
        <div>最新上报时间：{{info.addtime*1000|formatTime}} 
          <span><i class="el-icon-refresh controlIcon" @click="refreshDate()" v-if="info.d_id"></i></span>
        </div>
        <div v-if="equipType!=5">设备定位：{{info.address || '--'}}</div>
      </div>
      <div class="equipState">
        <slot name="equipStateInner"></slot>
      </div>
    </div>
    <div class="tab-pane" v-if="equipType !== 5">
      <!-- {{equipId}}-
      {{equipType}} -->
      <div class="list" v-if="equipDataState">
        <div class="elementItem" v-for="(item,index) in showState[equipType]" :key="index">
          <!-- {{equipState_dict[item]}} -->
          <div>{{equipState_dict[item].name}}</div>
          <template v-if="item=='tt'">
            <template v-if="equipData.ts == 1">
              <div class="elementValue" >{{equipData['st']}}-{{equipData['et']}}{{equipState_dict['et'].unit}}</div>
            </template>
            <template v-else>
              <div class="elementValue" v-if="equipState_dict[item].value">{{equipState_dict[item].value[equipData[item]]}}</div>
              <div class="elementValue" v-else >{{equipData[item]}}{{equipState_dict[item].unit}}</div>
            </template>
          </template>
          <template v-else>
            <template v-if="item=='addtime'">
              <div class="elementValue" >{{equipData[item]*1000|formatTime}}</div>
            </template>
            <template v-else-if="item=='at'">
              <template v-if="equipData.new_tem">
                <div class="elementValue" >{{equipData.new_tem}}{{equipState_dict[item].unit}}</div>
              </template>
              <template v-else>
                <div class="elementValue" >{{equipData[item]}}{{equipState_dict[item].unit}}</div>
              </template>
            </template>
            <template v-else-if="item=='ah'">
              <template v-if="equipData.new_hum">
                <div class="elementValue" >{{equipData.new_hum}}{{equipState_dict[item].unit}}</div>
              </template>
              <template v-else>
                <div class="elementValue" >{{equipData[item]}}{{equipState_dict[item].unit}}</div>
              </template>
            </template>
            <template v-else>
              <div class="elementValue" v-if="equipState_dict[item].value">{{equipState_dict[item].value[equipData[item]]}}</div>
              <div class="elementValue" v-else >{{equipData[item]}}{{equipState_dict[item].unit}}</div>
            </template>
          </template>
            
        </div>
      </div>
      <div v-else class="empty">
          <div>暂无数据</div>
      </div>
    </div>
    <div class="qxztab-pane" v-if="equipType == 5">
      <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>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import equipState_dict from './equipState_dict.json'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ["equipId", "equipType","d_id"],
  data() {
    //这里存放数据
    return {
      info:{},
      editlure:"",
      lure:"",
      lureShow:false,
      cultivate:"",
      glass:"",
      // 实施状态
      equipState_dict,
      showState: {
          "2": ["ds","ws","rps","tps","dps","tt","ct","at","ah","cv","bv","csq","dver"],
          "3": ["ds","ws","tt","hs","at","ah","upds","dnds","vbat","rps","tps","lps","csq","dver"],
          "4": ["proj","ds","ws","at","ah","cv","bv","cs","bs","infr_ct","csq","dver"],
          "7": ["at","ah","set_temp","pre_temp","bs","usb_sta","vbat","csq","dver"],
      },
      equipData:{},
      equipDataState:true,
      infos:'',
      reaTimeStatusList:[],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 设备状态弹框
    getEquipInfo(id, device_status) {
      if(this.equipType==5){
        this.$axios({
          method: "POST",
          url: "/api/api_gateway?method=weather.weather.qxz_page",
          data: this.qs.stringify({
            device_type_id: this.equipType,
            device_id: id,
            page: 1
          })
        }).then(res => {
          if (res.data.message == "") {
            if(res.data.data.counts == 0){
              this.equipDataState=false;
              this.info = {}
            }else{
              this.equipDataState = true;
              var dat = res.data.data.ids[0]
              dat.device_name = dat.equip_name;
              dat.addtime = dat.uptime;
              dat.imei = dat.equip_id;
              dat.d_id = dat.d_id;
              this.info = dat
            }
          }
        });
      }else{
        this.$axios({
          method: "POST",
          url: "/api/api_gateway?method=forecast.worm_lamp.lamp_list",
          data: this.qs.stringify({
            device_type_id: this.equipType,
            page_size: 1,
            device_id: id,
            page: 1
          })
        }).then(res => {
          if (res.data.message == "") {
            if(res.data.data.counts>0){
              this.info = res.data.data.data[0]
            }else{
              this.info = {
                address: "",
                dver_num: "--",
                device_status:0,
                status_time: 0
              }
            }
          }
        });
      }
      if(this.equipType==4){
        this.addYx()
      }
    },
    // 添加诱芯
    changeLure(){
      this.addYx()
      this.lureShow = !this.lureShow;
    },
    addYx() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=device.device_manage.get_spore_time",
        data: this.qs.stringify({
          device_type_id: 4,
          d_id:this.d_id,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          let data = res.data.data;
          this.lure = data.decoy;
        }
      });
    },
    submitYx() {
      if (!this.editlure) {
        this.$message.warning("请填写诱芯名称");
        return false
      }
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=device.device_manage.updata_spore_time",
        data: this.qs.stringify({
          device_type_id: 4,
          d_id: this.info.d_id,
          decoy: this.editlure,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          this.$message.success("添加成功!");
        } else {
          this.$message.error(res.data.message);
        }
         this.changeLure();
      });
    },
    // 载玻片、培养液
    setTime(){
      this.getSporeTime()
    },
    getSporeTime() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=device.device_manage.get_spore_time",
        data: this.qs.stringify({
          device_type_id: this.equipType,
          d_id:this.info.d_id,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          let data = res.data.data;
          this.glass = data.glass_slide_time;
          this.cultivate = data.cultivate_time;
          var dat = {
            glass:this.glass,
            cultivate:this.cultivate,
            d_id:this.info.d_id,
          }
          this.$emit('child-event',dat)
        }
      });
    },
    refreshDate(){
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.send_control.get_device_config",
        data: this.qs.stringify({
          device_type_id: this.equipType,
          d_id: this.d_id,
          control_type: "data",
        }),
      }).then((res) => {
        if (res.data.message == "") {
          setTimeout(()=>{
                this.equipStateSet(this.equipId, this.equipType);
          },3000)
        } else {
          this.$message.err("刷新失败");
        }
      });
    },
    // 设备状态弹框
    equipStateSet(id, device_status) {
      if(device_status == 5){
        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;
        }
      });
      }else{
        this.$axios({
          method: "POST",
          url: "/api/api_gateway?method=forecast.worm_lamp.device_history_data",
          data: this.qs.stringify({
            device_type_id: this.equipType,
            page_size: 1,
            device_id: id,
            page: 1
          })
        }).then(res => {
          if (res.data.message == "") {
            if(res.data.data.counts == 0){
              this.equipDataState=false;
              this.equipData = {}
            }else{
              this.equipDataState = true;
              this.equipData = res.data.data.data[0].d_h_t
              console.log(this.equipData);
              console.log('this.equipData');
              
            }
          }
        });
      }
      
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getEquipInfo(this.equipId,this.equipType)
    this.equipStateSet(this.equipId, this.equipType);
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
// 设备信息样式
.equipInfo{
  display: flex;
  justify-content: space-around;
  align-content: center;
  margin-bottom: 20px;
  .equipImg{
    position: relative;
    flex: 1;
    img{
      width: 100%;
      height: 100%;
      border: 1px solid #9c9c9c;
      border-radius: 5px;
    }
    p{
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      line-height: 33px;
      background: rgba(0,0,0,.5);
      color: #eee;
      text-align: center;
      font-size: 12px;
    }
  }
  .equipMsg{
    width: 300px;
    padding-left: 25px;
    line-height: 24px;
    color: #92c2f3;
    font-size: 13px;
    .title{
      font-size: 14px;
      color: #fff;
      span:nth-child(1){
        // vertical-align: middle;
        display: inline-block;
        border: 4px solid #04d5e8;
        margin-right: 2px;
      }
    }
    >div{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .equipState{
    flex: 1;
  }
}
.online{
  color: #04d5e8;
}
.offline{
  color: #ff0000;
}
.controlIcon{
  color: #04d5e8;
  cursor: pointer;
}
// 实时状态
.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: .1625rem;
          .elementValue{
              color: #04d5e8;
          }
      }
      
      .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;
  }
}
// qxz实时状态
.qxztab-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>