<template>
    <el-dialog  title="设备详情" width=' 1080px' :visible.sync="isShowInfo" append-to-body @close='close'>
  <div class="deviceDialog " >
    <div class="headInfo">
      <div class="inputContent">
        <input-vue title="设备型号" width="200px" v-model="rowInfo.brandCode" :disabled="true"></input-vue>
        <input-vue title="设备名称" width="200px" v-model="rowInfo.deviceName" :disabled="true"></input-vue>
        <input-vue title="SN码" width="200px" v-model="rowInfo.snCode" :disabled="true"></input-vue>
      </div>
      <div class="inputContent">
        <input-vue title=" 设备状态" width="200px" v-model="rowInfo.deviceStatus" :disabled="true"></input-vue>
        <input-vue
        v-model="rowInfo.deviceAddress" :disabled="true"
          title=" 设备位置"
          width="552px"
          style="flex: 1; margin-left: 63px"
        ></input-vue>
      </div>
    </div>
    <div class="content">
      <div class="content_nav">
        <div class="nav_item" :class="{ selectNav: navSelect == 0 }" @click="changeNav(0)">基本信息</div>
        <div class="nav_item" :class="{ selectNav: navSelect == 1 }" @click="changeNav(1)">设备信息</div>
        <div class="nav_item" :class="{ selectNav: navSelect == 2 }" @click="changeNav(2)" v-if="rowInfo.businessExt">数据信息</div>
      </div>
      <div class="content_content">
        <div class="baseInfo" v-if="navSelect == 0">
          <div class="inputContent">
            <input-vue title="设备品牌" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandName" :disabled="true"></input-vue>
            <input-vue title="生产日期" width="200px" style="justify-content: space-between;" v-model="rowInfo.createTime" :disabled="true"></input-vue>
            <input-vue title="Mac地址" width="200px" style="justify-content: space-between;" v-model="rowInfo.deviceMac" :disabled="true"></input-vue>
            <input-vue title="产品品类" width="200px" style="justify-content: space-between;" v-model="rowInfo.productCode" :disabled="true"></input-vue>
            <!-- <input-vue title="产品重量" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue>
            <input-vue title="产品材质" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
          </div>
          <div class="inputContent">
            <input-vue title="硬件版本" width="200px" style="justify-content: space-between;" v-model="rowInfo.deviceHardwareVersion" :disabled="true"></input-vue>
            <input-vue title="设备名称" width="200px" style="justify-content: space-between;" v-model="rowInfo.deviceName" :disabled="true"></input-vue>
            <input-vue title="IP地址"  width="200px"  style="justify-content: space-between;" v-model="rowInfo.deviceIp" :disabled="true"></input-vue>
            <!-- <input-vue title="国际69码" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
            <input-vue title="产品状态" width="200px" style="justify-content: space-between;" v-model="rowInfo.deviceStatus" :disabled="true"></input-vue>
            <!-- <input-vue title="产品颜色" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
           
          </div>
          <div class="inputContent">
            <input-vue title="软件版本" width="200px" style="justify-content: space-between;" v-model="rowInfo.deviceSoftwareVersion"  :disabled="true"></input-vue>
            <!-- <input-vue title="供应商" width="200px" style="justify-content: space-between;"  v-model="rowInfo.brandCode"   :disabled="true"></input-vue> -->
            <div style="height: 40px;"></div>
            <!-- <input-vue title="产品尺寸" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
            <input-vue title="产品版本" width="200px" style="justify-content: space-between;" v-model="rowInfo.serialVersionUID" :disabled="true"></input-vue>
            <div style="height: 40px;"></div>
          </div>
        
        </div>
        <div class="deviceInfo" v-if="navSelect == 1">
          <div class="inputContent">
            <input-vue title="是否激活" width="200px" style="justify-content: space-between;" v-model="rowInfo.deviceActive" :disabled="true"></input-vue>
            <input-vue title="是否绑定用户" width="200px"  style="justify-content: space-between;" v-model="rowInfo.deviceBindUser" :disabled="true"></input-vue>
            <!-- <input-vue title="用户手机号" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
          </div>
          <div class="inputContent">
            <input-vue title="激活时间" width="200px" style="justify-content: space-between;" v-model="rowInfo.deviceActiveTime" :disabled="true"></input-vue>
            <!-- <input-vue title="用户账号" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
            
          </div>
          <div class="inputContent">
            <input-vue title="用户名称" width="200px" style="justify-content: space-between;" v-model="rowInfo.createTime" :disabled="true"></input-vue>
            <!-- <input-vue title="绑定时间" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
          </div>
        </div>
        <div  v-if="navSelect == 2  ">
         <div class="deviceInfo" v-if="rowInfo.deviceName == '油烟机' ">
          <div class="inputContent" >
            <input-vue title="工作状态" width="200px" style="justify-content: space-between;"  v-model="rowInfo.businessExt.workStatus" :disabled="true"></input-vue>
            <input-vue title="wifi状态" width="200px" style="justify-content: space-between;"  v-model="rowInfo.businessExt.wifiStatus" :disabled="true"></input-vue>
            <input-vue title="开关机状态" width="200px" style="justify-content: space-between;" v-model="rowInfo.businessExt.switchStatus" :disabled="true"></input-vue>
          </div>
          <div class="inputContent">
            <input-vue title="运行时长" width="200px" style="justify-content: space-between;" v-model="rowInfo.businessExt.runTime" :disabled="true"></input-vue>
            <input-vue title="wifi名称" width="200px" style="justify-content: space-between;" v-model="rowInfo.businessExt.wifiName" :disabled="true"></input-vue>
          </div>
          <div class="inputContent">
            <input-vue title="烟灶联动" width="200px" style="justify-content: space-between;" v-model="rowInfo.businessExt.smokeStove" :disabled="true"></input-vue>
            <input-vue title="倒油提醒开关" width="200px" style="justify-content: space-between;" v-model="rowInfo.businessExt.oilPouringReminder" :disabled="true"></input-vue>
          </div>
         </div>
         <div class="deviceInfo" v-if="rowInfo.deviceName == '热水器' ">
          <div class="inputContent" >
            <input-vue title="工作状态" width="200px" style="justify-content: space-between;"  v-model="rowInfo.businessExt.workStatus" :disabled="true"></input-vue>
            <input-vue title="当前温度" width="200px" style="justify-content: space-between;"  v-model="rowInfo.businessExt.currentTemperature" :disabled="true"></input-vue>
            <input-vue title="零冷水开关" width="200px" style="justify-content: space-between;" v-model="rowInfo.businessExt.switchStatus" :disabled="true"></input-vue>
          </div>
          <div class="inputContent">
            <input-vue title="运行时长" width="200px" style="justify-content: space-between;" v-model="rowInfo.businessExt.runTime" :disabled="true"></input-vue>
            <!-- <input-vue title="进水温度" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
          </div>
          <div class="inputContent">
            <input-vue title="当前模式" width="200px" style="justify-content: space-between;" v-model="rowInfo.businessExt.workMode" :disabled="true"></input-vue>
            <!-- <input-vue title="出水温度" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
          </div>
         </div>
         <div class="deviceInfo" v-if="rowInfo.deviceName == '燃气灶' ">
          <div class="inputContent" >
            <input-vue title="工作状态" width="200px" style="justify-content: space-between;"  v-model="rowInfo.businessExt.workStatus" :disabled="true"></input-vue>
            <input-vue title="左灶工作状态" width="200px" style="justify-content: space-between;"  v-model="rowInfo.businessExt.leftWorkStatus" :disabled="true"></input-vue>
           
          </div>
          <div class="inputContent">
            <input-vue title="烟灶联动" width="200px" style="justify-content: space-between;" v-model="rowInfo.businessExt.smokeStove" :disabled="true"></input-vue>
            <input-vue title="右灶工作状态" width="200px" style="justify-content: space-between;" v-model="rowInfo.businessExt.rightWorkStatus" :disabled="true"></input-vue>
          </div>
          <div class="inputContent">
            <input-vue title="运行时长" width="200px" style="justify-content: space-between;" v-model="rowInfo.businessExt.runTime" :disabled="true"></input-vue>
            <!-- <input-vue title="出水温度" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
          </div>
         </div>
         <div class="deviceInfo" v-if="rowInfo.deviceName == '壁挂炉' ">
          <div class="inputContent" >
            <input-vue title="工作状态" width="200px" style="justify-content: space-between;"  v-model="rowInfo.businessExt.workStatus" :disabled="true"></input-vue>
            <input-vue title="供暖" width="200px" style="justify-content: space-between;"  v-model="rowInfo.businessExt.heatingStatus" :disabled="true"></input-vue>
            <input-vue title="卫浴温度" width="200px" style="justify-content: space-between;" v-model="rowInfo.businessExt.bathroomTemp" :disabled="true"></input-vue>
          </div>
          <div class="inputContent">
            <input-vue title="供暖温度" width="200px" style="justify-content: space-between;" v-model="rowInfo.businessExt.heatingTemp" :disabled="true"></input-vue>
            <input-vue title="卫浴状态" width="200px" style="justify-content: space-between;" v-model="rowInfo.businessExt.bathroomStatus" :disabled="true"></input-vue>
            <input-vue title="水泵状态" width="200px" style="justify-content: space-between;" v-model="rowInfo.businessExt.waterPumpStatus" :disabled="true"></input-vue>
          </div>
          <div class="inputContent">
            <input-vue title="防冻状态" width="200px" style="justify-content: space-between;" v-model="rowInfo.businessExt.antifreezeStatus" :disabled="true"></input-vue>
            <input-vue title="风机状态" width="200px" style="justify-content: space-between;" v-model="rowInfo.businessExt.fanStatus" :disabled="true"></input-vue>
          </div>
         </div>
        </div>
      </div>
    </div>
  </div>
</el-dialog>
</template>

<script>
import inputVue from "../input/inputVue.vue";
import { d_info } from '../../../api/product/device'
export default {
  props:{
    isShowInfo:{
      type:Boolean,
      default:'false'
    },
    dataInfo:{}
  },
  components: {
    inputVue, 
},
  data() {
    return {
      navSelect: 0, // 0 1 2 为导航栏的选项
      rowInfo:{}
    };
  },
  methods:{
    changeNav(index){
      this.navSelect =index
    },
    close(){
      this.$emit('close')
    }
  },
  watch: {
    dataInfo:{
      handler(newValue){
        d_info({id:newValue.id}).then(res=>{
          console.log(res);
          this.rowInfo=res
        })
      },
      // 深度监听
      deep:true,
      immediate: true
    }
  },
};
</script>

<style lang="scss" scoped>
.deviceDialog{
  border-radius: 5px;
  // overflow: hidden;
  // padding: 10px 0;
  width: 1025px;
  height: 600px;
  box-sizing: border-box;
}
.selectNav {
  border: 1px solid #999;
    border-bottom: 3px solid #fff;
    position: relative;
    z-index: 9;
    box-sizing: border-box;
    top: 2px;
}
.content {
  width: 100%;
  .content_nav {
    box-sizing: border-box;
    display: flex;
    margin: 10px 0;
    border-bottom: 1px solid #999;
    .nav_item {
      width: 130px;
      height: 60px;
      margin: 0 10px;
      line-height: 60px;
      text-align: center;
    }
  }
}

.content_content{
  // padding: 20px 0 60px 0;
  // box-sizing: border-box;
 
}
.headInfo{
  width: 1000px;
  .inputContent {
    // flex: 1;
    display: flex;
    // flex-direction: column;
    
    justify-content: space-between;
    align-items: center;
  }
}
.baseInfo {
  width: 1000px;
  display: flex;
 
  .inputContent {
    flex: 1;
    display: flex;
    flex-direction: column;
    
    // justify-content: space-between;
    // align-items: center;
  }
}
.deviceInfo{
  display: flex;
  // align-items: center;
  justify-content: space-between;
  height: 100%;
  .inputContent{
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
.dataInfo{
  display: flex;
  // align-items: center;
  justify-content: space-between;
  height: 100%;
  .inputContent{
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
</style>