<template>
  <div class="page-container iotHardware-infoPage">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">详情</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
    </div>
    <div class="content-box scrollbar-box">
      <div class="info-max-box">
        <div class="info-left-max-box">
          <img src="@/assets/ZDimages/iotDevice/iot_icon.png">
          <p :class="newData.online?'onlineTypeA':'onlineTypeB'">{{newData.online?'在线':'离线'}}</p>
        </div>
        <div class="info-right-max-box scrollbar-box">
          <div class="info-min-box">
            <div>
              <p>设备ID：</p>
              <p>{{newData.id}}</p>
            </div>
          </div>
          <div class="info-min-box">
            <div>
              <p>设备名称：</p>
              <p>{{newData.deviceName}}</p>
            </div>
          </div>
          <div class="info-min-box">
            <div>
              <p>设备编号：</p>
              <p>{{newData.deviceNo}}</p>
            </div>
          </div>
          <div class="info-min-box">
            <div>
              <p>设备类型：</p>
              <p>{{newData.typeName}}</p>
            </div>
          </div>
          <div class="info-min-box" v-for="(item,index) in models" :key="index">
            <div>
              <p>{{item.name}}：</p>
              <p :style="item.color?'color:'+item.color+';':''">{{item.value}}</p>
            </div>
          </div>
          <div class="info-min-box">
            <div>
              <p>状态：</p>
              <p>{{newData.state?'启用':'停用'}}</p>
            </div>
          </div>
          <div class="info-min-box">
            <div>
              <p>创建时间：</p>
              <p>{{parseTime(newData.createTime)}}</p>
            </div>
          </div>
          <div class="info-min-box">
            <div>
              <p>说明：</p>
              <p>{{newData.remark?newData.remark:'--'}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="table-max-box">
        <div class="table-button-box" @click="tableCheck(1)" :class="tableType==1?'check-table-box':''">
          <p>物联信息</p>
          <p></p>
        </div>
        <div class="table-button-box" @click="tableCheck(2)" :class="tableType==2?'check-table-box':''">
          <p>设备日志</p>
          <p></p>
        </div>
        <div class="table-button-box" @click="tableCheck(3)" :class="tableType==3?'check-table-box':''">
          <p>设备诊断</p>
          <p></p>
        </div>
        <div class="table-button-box" @click="tableCheck(4)" :class="tableType==4?'check-table-box':''">
          <p>设备调试</p>
          <p></p>
        </div>
        <!--传感器独有-上报数据列表页面-->
        <div class="table-button-box" @click="tableCheck(5)" :class="tableType==5?'check-table-box':''" v-if="newData.typeKey == 'sensor'">
          <p>上报数据</p>
          <p></p>
        </div>
        <div class="table-null-box">
          <p></p>
          <p></p>
        </div>
      </div>
      <div class="table-content-box" v-if="tableType == 1">
        <hardware-iot-info></hardware-iot-info>
      </div>
      <div class="table-content-box" v-if="tableType == 2">
        <hardware-log></hardware-log>
      </div>
      <div class="table-content-box" v-if="tableType == 3">
        <hardware-feature></hardware-feature>
      </div>
      <div class="table-content-box" v-if="tableType == 4">
        <hardware-debug></hardware-debug>
      </div>
      <div class="table-content-box" v-if="tableType == 5">
        <hardware-reported-data></hardware-reported-data>
      </div>
    </div>
  </div>
</template>

<script>
  import hardwareIotInfo from "./bottomModule/hardwareIotInfo.vue";
  import hardwareLog from "./bottomModule/hardwareLog.vue";
  import hardwareFeature from "./bottomModule/hardwareFeature.vue";
  import hardwareDebug from "./bottomModule/hardwareDebug.vue";
  import hardwareReportedData from "./bottomModule/hardwareReportedData.vue";
  import { iotTypeGetAllTypes,iotTypeGetParamByTypeId } from "@/api/iotDevice/index";
  export default {
    name: 'addPage',
    components: {
      hardwareIotInfo,
      hardwareLog,
      hardwareFeature,
      hardwareDebug,
      hardwareReportedData,
    },
    props:{
      propsData:{},
    },
    data(){
      return{
        tableType:1,
        newData:{},
        models:[],
      }
    },
    created(){
      this.initialize();
    },
    mounted(){

    },
    methods:{
      tableCheck(type){
        if(this.tableType != type){
          this.$set(this,'tableType',type);
        }
      },
      //初始化
      initialize(){
        this.$set(this,'newData',this.propsData);
        let model = JSON.parse(this.propsData.reservedField)
        iotTypeGetParamByTypeId({typeId:this.propsData.typeId}).then(response => {
          let list = [];
          for(let i=0;i<response.data.length;i++){
            let obj = {
              name:"",
              value:"",
            };
            if(response.data[i].field == 'selectMultiple' || response.data[i].field == 'checkbox' || response.data[i].field == 'datePickerRange'){
              if(model[response.data[i].field][0]){
                if( response.data[i].field == 'selectMultiple' || response.data[i].field == 'checkbox'){
                  //多选
                  for(let o=0;o<model[response.data[i].field].length;o++){
                    for(let x=0;x<response.data[i].iotParamValueModels.length;x++){
                      if(model[response.data[i].field][o] == response.data[i].iotParamValueModels[x].dictValue){
                        obj.name = response.data[i].label;
                        obj.value = obj.value + response.data[i].iotParamValueModels[x].dictKey + ',';
                      }
                    }
                  }
                  obj.value = obj.value.slice(0, -1);
                }else if(response.data[i].field == 'datePickerRange'){
                  obj.name = response.data[i].label;
                  obj.value = this.parseTime(model[response.data[i].field][0],"{y}-{m}-{d}")+' - '+this.parseTime(model[response.data[i].field][1],"{y}-{m}-{d}");
                }
              }else{
                obj.name = response.data[i].label;
                obj.value = '--';
              }
            }else{
              if(model[response.data[i].field]){
                if(response.data[i].field == 'timePickerRange'){
                  obj.name = response.data[i].label;
                  obj.value = this.parseTime(model[response.data[i].field][0],"{h}:{i}")+' - '+this.parseTime(model[response.data[i].field][1],"{h}:{i}");
                }else if(response.data[i].field == 'select' || response.data[i].field == 'radio'){
                  //单选
                  for(let o=0;o<response.data[i].iotParamValueModels.length;o++){
                    if(model[response.data[i].field] == response.data[i].iotParamValueModels[o].dictValue){
                      obj.name = response.data[i].label;
                      obj.value = obj.value + response.data[i].iotParamValueModels[o].dictKey;
                    }
                  }
                }else if(response.data[i].field == 'colorPicker'){
                  //颜色
                  obj.name = response.data[i].label;
                  obj.value = model[response.data[i].field];
                  obj.color = model[response.data[i].field];
                }else if(response.data[i].field == 'datePicker'){
                  obj.name = response.data[i].label;
                  obj.value = this.parseTime(model[response.data[i].field],"{y}-{m}-{d}");
                }else if(response.data[i].field == 'timePicker'){
                  obj.name = response.data[i].label;
                  obj.value = this.parseTime(model[response.data[i].field],"{h}:{i}");
                }else{
                  //字符
                  obj.name = response.data[i].label;
                  obj.value = model[response.data[i].field];
                }
              }else{
                obj.name = response.data[i].label;
                obj.value = '--';
              }
            }
            list.push(obj);
          }
          this.$set(this,'models',list);
        })
      },
      // 返回按钮
      backPage(){
        this.$parent.tableButton(6);
      },
    },
  }
</script>

<style scoped lang="scss">
  .iotHardware-infoPage{
    .content-box{
      flex:1;
      display: flex;
      flex-direction: column;
      .info-max-box{
        padding:20px;
        display: flex;
        .info-left-max-box{
          width:180px;
          height:180px;
          img{
            width:100px;
            height:100px;
            margin:20px 40px 0;
          }
          p{
            width:100px;
            line-height:30px;
            height:30px;
            text-align: center;
            font-size:14px;
            margin:10px 40px 0;
            border-radius:4px;
          }
          .onlineTypeA{
            background-color: #0183FA;
            color:#fff;
          }
          .onlineTypeB{
            background-color: #E65D6E;
            color:#fff;
          }
        }
        .info-right-max-box{
          height:180px;
          padding:20px 0;
          .info-min-box{
            width:440px;
            display: inline-block;
            div{
              display: flex;
              padding:10px;
              p{
                color:#333;
                font-size:14px;
                line-height:20px;
              }
              p:nth-child(1){
                width:140px;
                text-align: right;
              }
              p:nth-child(2){
                width:300px;
                word-wrap:break-word;
                word-break:break-all;
                overflow: hidden;
              }
            }
          }
        }
      }
      .table-max-box{
        display: flex;
        .table-button-box{
          cursor: pointer;
          display: flex;
          height:44px;
          flex-direction: column;
          p:nth-child(1){
            padding:0 40px;
            font-size:14px;
            line-height:40px;
            height:40px;
            text-align: center;
          }
          p:nth-child(2){
            height:4px;
            background-color: #dedede;
          }
        }
        .table-null-box{
          flex:1;
          display: flex;
          height:44px;
          flex-direction: column;
          p:nth-child(1){
            height:40px;
          }
          p:nth-child(2){
            height:4px;
            background-color: #dedede;
          }
        }
        .check-table-box{
          p:nth-child(1){
            font-weight:700;
            color:#0045AF;
          }
          p:nth-child(2){
            background-color: #0045AF;
          }
        }
      }
      .table-content-box{
        flex:1;
        flex-direction: column;
        display: flex;
        overflow: hidden;
      }
    }
  }
</style>
