<!-- 设备状态 -->
<template>
  <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>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ["equipId", "equipType","d_id"],
  data() {
    //这里存放数据
    return {
      info:{},
      editlure:"",
      lure:"",
      lureShow:false,
      cultivate:"",
      glass:""
    };
  },
  //监听属性 类似于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;
              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
              }
            }
          }
        });
      }
    },
    // 添加诱芯
    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.info.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.getEquipInfo(this.equipId,this.equipType);
            var val = new Date().getTime();
            this.$emit('getNowState');
          },3000)
        } else {
          this.$message.err("刷新失败");
        }
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getEquipInfo(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;
  .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;
}
</style>