<!--设备详情弹窗-->
<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 v-model="rowInfo.brandCode" title="设备型号" width="200px" :disabled="true" />
          <input-vue v-model="rowInfo.deviceName" title="设备名称" width="200px" :disabled="true" />
          <input-vue v-model="rowInfo.snCode" title="SN码" width="200px" :disabled="true" />
        </div>
        <div class="inputContent">
          <input-vue v-model="rowInfo.deviceStatus" title=" 设备状态" width="200px" :disabled="true" />
          <input-vue
            v-model="rowInfo.deviceAddress"
            :disabled="true"
            title=" 设备位置"
            width="552px"
            style="flex: 1; margin-left: 63px"
          />
        </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 v-if="rowInfo.businessExt" class="nav_item" :class="{ selectNav: navSelect == 2 }" @click="changeNav(2)">
            数据信息
          </div>
        </div>
        <div class="content_content">
          <div v-if="navSelect == 0" class="baseInfo">
            <div class="inputContent">
              <input-vue
                v-model="rowInfo.brandName"
                title="设备品牌"
                width="200px"
                style="justify-content: space-between;"
                :disabled="true"
              />
              <input-vue
                v-model="rowInfo.createTime"
                title="生产日期"
                width="200px"
                style="justify-content: space-between;"
                :disabled="true"
              />
              <input-vue
                v-model="rowInfo.deviceMac"
                title="Mac地址"
                width="200px"
                style="justify-content: space-between;"
                :disabled="true"
              />
              <input-vue
                v-model="rowInfo.productCode"
                title="产品品类"
                width="200px"
                style="justify-content: space-between;"
                :disabled="true"
              />
              <!-- <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
                v-model="rowInfo.deviceHardwareVersion"
                title="硬件版本"
                width="200px"
                style="justify-content: space-between;"
                :disabled="true"
              />
              <input-vue
                v-model="rowInfo.deviceName"
                title="设备名称"
                width="200px"
                style="justify-content: space-between;"
                :disabled="true"
              />
              <input-vue
                v-model="rowInfo.deviceIp"
                title="IP地址"
                width="200px"
                style="justify-content: space-between;"
                :disabled="true"
              />
              <!-- <input-vue title="国际69码" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
              <input-vue
                v-model="rowInfo.deviceStatus"
                title="产品状态"
                width="200px"
                style="justify-content: space-between;"
                :disabled="true"
              />
              <!-- <input-vue title="产品颜色" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
            </div>
            <div class="inputContent">
              <input-vue
                v-model="rowInfo.deviceSoftwareVersion"
                title="软件版本"
                width="200px"
                style="justify-content: space-between;"
                :disabled="true"
              />
              <!-- <input-vue title="供应商" width="200px" style="justify-content: space-between;"  v-model="rowInfo.brandCode"   :disabled="true"></input-vue> -->
              <div style="height: 40px;" />
              <!-- <input-vue title="产品尺寸" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
              <input-vue
                v-model="rowInfo.serialVersionUID"
                title="产品版本"
                width="200px"
                style="justify-content: space-between;"
                :disabled="true"
              />
              <div style="height: 40px;" />
            </div>
          </div>
          <div v-if="navSelect == 1" class="deviceInfo">
            <div class="inputContent">
              <input-vue
                v-model="rowInfo.deviceActive"
                title="是否激活"
                width="200px"
                style="justify-content: space-between;"
                :disabled="true"
              />
              <input-vue
                v-model="rowInfo.deviceBindUser"
                title="是否绑定用户"
                width="200px"
                style="justify-content: space-between;"
                :disabled="true"
              />
              <!-- <input-vue title="用户手机号" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
            </div>
            <div class="inputContent">
              <input-vue
                v-model="rowInfo.deviceActiveTime"
                title="激活时间"
                width="200px"
                style="justify-content: space-between;"
                :disabled="true"
              />
              <!-- <input-vue title="用户账号" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
            </div>
            <div class="inputContent">
              <input-vue
                v-model="rowInfo.createTime"
                title="用户名称"
                width="200px"
                style="justify-content: space-between;"
                :disabled="true"
              />
              <!-- <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 v-if="rowInfo.deviceName == '油烟机' " class="deviceInfo">
              <div class="inputContent">
                <input-vue
                  v-model="rowInfo.businessExt.workStatus"
                  title="工作状态"
                  width="200px"
                  style="justify-content: space-between;"
                  :disabled="true"
                />
                <input-vue
                  v-model="rowInfo.businessExt.wifiStatus"
                  title="wifi状态"
                  width="200px"
                  style="justify-content: space-between;"
                  :disabled="true"
                />
                <input-vue
                  v-model="rowInfo.businessExt.switchStatus"
                  title="开关机状态"
                  width="200px"
                  style="justify-content: space-between;"
                  :disabled="true"
                />
              </div>
              <div class="inputContent">
                <input-vue
                  v-model="rowInfo.businessExt.runTime"
                  title="运行时长"
                  width="200px"
                  style="justify-content: space-between;"
                  :disabled="true"
                />
                <input-vue
                  v-model="rowInfo.businessExt.wifiName"
                  title="wifi名称"
                  width="200px"
                  style="justify-content: space-between;"
                  :disabled="true"
                />
              </div>
              <div class="inputContent">
                <input-vue
                  v-model="rowInfo.businessExt.smokeStove"
                  title="烟灶联动"
                  width="200px"
                  style="justify-content: space-between;"
                  :disabled="true"
                />
                <input-vue
                  v-model="rowInfo.businessExt.oilPouringReminder"
                  title="倒油提醒开关"
                  width="200px"
                  style="justify-content: space-between;"
                  :disabled="true"
                />
              </div>
            </div>
            <div v-if="rowInfo.deviceName == '热水器' " class="deviceInfo">
              <div class="inputContent">
                <input-vue
                  v-model="rowInfo.businessExt.workStatus"
                  title="工作状态"
                  width="200px"
                  style="justify-content: space-between;"
                  :disabled="true"
                />
                <input-vue
                  v-model="rowInfo.businessExt.currentTemperature"
                  title="当前温度"
                  width="200px"
                  style="justify-content: space-between;"
                  :disabled="true"
                />
                <input-vue
                  v-model="rowInfo.businessExt.switchStatus"
                  title="零冷水开关"
                  width="200px"
                  style="justify-content: space-between;"
                  :disabled="true"
                />
              </div>
              <div class="inputContent">
                <input-vue
                  v-model="rowInfo.businessExt.runTime"
                  title="运行时长"
                  width="200px"
                  style="justify-content: space-between;"
                  :disabled="true"
                />
                <!-- <input-vue title="进水温度" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
              </div>
              <div class="inputContent">
                <input-vue
                  v-model="rowInfo.businessExt.workMode"
                  title="当前模式"
                  width="200px"
                  style="justify-content: space-between;"
                  :disabled="true"
                />
                <!-- <input-vue title="出水温度" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
              </div>
            </div>
            <div v-if="rowInfo.deviceName == '燃气灶' " class="deviceInfo">
              <div class="inputContent">
                <input-vue
                  v-model="rowInfo.businessExt.workStatus"
                  title="工作状态"
                  width="200px"
                  style="justify-content: space-between;"
                  :disabled="true"
                />
                <input-vue
                  v-model="rowInfo.businessExt.leftWorkStatus"
                  title="左灶工作状态"
                  width="200px"
                  style="justify-content: space-between;"
                  :disabled="true"
                />
              </div>
              <div class="inputContent">
                <input-vue
                  v-model="rowInfo.businessExt.smokeStove"
                  title="烟灶联动"
                  width="200px"
                  style="justify-content: space-between;"
                  :disabled="true"
                />
                <input-vue
                  v-model="rowInfo.businessExt.rightWorkStatus"
                  title="右灶工作状态"
                  width="200px"
                  style="justify-content: space-between;"
                  :disabled="true"
                />
              </div>
              <div class="inputContent">
                <input-vue
                  v-model="rowInfo.businessExt.runTime"
                  title="运行时长"
                  width="200px"
                  style="justify-content: space-between;"
                  :disabled="true"
                />
                <!-- <input-vue title="出水温度" width="200px" style="justify-content: space-between;" v-model="rowInfo.brandCode" :disabled="true"></input-vue> -->
              </div>
            </div>
            <div v-if="rowInfo.deviceName == '壁挂炉' " class="deviceInfo">
              <div class="inputContent">
                <input-vue
                  v-model="rowInfo.businessExt.workStatus"
                  title="工作状态"
                  width="200px"
                  style="justify-content: space-between;"
                  :disabled="true"
                />
                <input-vue
                  v-model="rowInfo.businessExt.heatingStatus"
                  title="供暖"
                  width="200px"
                  style="justify-content: space-between;"
                  :disabled="true"
                />
                <input-vue
                  v-model="rowInfo.businessExt.bathroomTemp"
                  title="卫浴温度"
                  width="200px"
                  style="justify-content: space-between;"
                  :disabled="true"
                />
              </div>
              <div class="inputContent">
                <input-vue
                  v-model="rowInfo.businessExt.heatingTemp"
                  title="供暖温度"
                  width="200px"
                  style="justify-content: space-between;"
                  :disabled="true"
                />
                <input-vue
                  v-model="rowInfo.businessExt.bathroomStatus"
                  title="卫浴状态"
                  width="200px"
                  style="justify-content: space-between;"
                  :disabled="true"
                />
                <input-vue
                  v-model="rowInfo.businessExt.waterPumpStatus"
                  title="水泵状态"
                  width="200px"
                  style="justify-content: space-between;"
                  :disabled="true"
                />
              </div>
              <div class="inputContent">
                <input-vue
                  v-model="rowInfo.businessExt.antifreezeStatus"
                  title="防冻状态"
                  width="200px"
                  style="justify-content: space-between;"
                  :disabled="true"
                />
                <input-vue
                  v-model="rowInfo.businessExt.fanStatus"
                  title="风机状态"
                  width="200px"
                  style="justify-content: space-between;"
                  :disabled="true"
                />
              </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 {
  components: {
    inputVue
  },
  props: {
    isShowInfo: {
      type: Boolean,
      default: 'false'
    },
    dataInfo: {}
  },
  data() {
    return {
      navSelect: 0, // 0 1 2 为导航栏的选项
      rowInfo: {}
    }
  },
  watch: {
    dataInfo: {
      handler(newValue) {
        d_info({ id: newValue.id }).then(res => {
          console.log(res)
          this.rowInfo = res
          // 数据处理
          this.rowInfo.deviceActive = this.dealstate(this.rowInfo.deviceActive)
          this.rowInfo.deviceBindUser = this.dealstate(this.rowInfo.deviceBindUser)

          this.rowInfo.businessExt.switchStatus = this.dealwitch(this.rowInfo.businessExt.switchStatus)
          this.rowInfo.businessExt.oilPouringReminder = this.dealwitch(this.rowInfo.businessExt.oilPouringReminder)
        })
      },
      // 深度监听
      deep: true,
      immediate: true
    }
  },
  methods: {
    changeNav(index) {
      this.navSelect = index
    },
    close() {
      this.$emit('close')
    },
    dealwitch(index) {
      if (index == 0) {
        return '关'
      } else {
        return '开'
      }
    },
    dealstate(index) {
      if (index == 0) {
        return '否'
      } else {
        return '是'
      }
    }

  }
}
</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>