<template>
  <div class="page-container iotHardware-hardwareIotInfo">
    <div class="hardwareIotInfo-max-box scrollbar-box" v-if="newData">
      <div class="hardwareIotInfo-min-box" v-if="newData.localIp">
        <p class="left-name-p">内网：</p>
        <p class="right-text-p">{{newData.localIp}}:{{newData.localPort}}</p>
      </div>
      <div class="hardwareIotInfo-min-box" v-if="newData.publicIp">
        <p class="left-name-p">公网：</p>
        <p class="right-text-p">{{newData.publicIp}}:{{newData.publicPort}}</p>
      </div>
      <div class="hardwareIotInfo-min-box" v-if="newData.authKey">
        <p class="left-name-p">账号：</p>
        <p class="right-text-p">{{newData.authKey}}</p>
      </div>
      <div class="hardwareIotInfo-min-box" v-for="(item,index) in newData.params">
        <p class="left-name-p">{{item.key}}：</p>
        <p class="right-text-p">{{item.value}}</p>
      </div>
    </div>
    <p class="hardwareIotInfo-null-p" v-if="!newData">未配置网络组件</p>
  </div>
</template>

<script>
  import { iotNetworkInfo } from "@/api/iotDevice/index";
  export default {
    name: 'hardwareIotInfo',
    data(){
      return{
        newData:null,
      }
    },
    created(){
      this.initialize();
    },
    mounted(){

    },
    methods:{
      initialize(){
        if(this.$parent.propsData.networkId){
          iotNetworkInfo({isList:false,id:this.$parent.propsData.networkId}).then(response => {
            if(response.data){
              let obj = response.data.params ? JSON.parse(response.data.params) : {};
              let list = [];
              Object.keys(obj).forEach((key) => {
                const value = obj[key];
                list.push({
                  key:key,
                  value:value
                })
              });
              response.data.params = list;
              this.$set(this,'newData',response.data);
            }
          });
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  .iotHardware-hardwareIotInfo{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .hardwareIotInfo-max-box{
      padding:20px 40px;
      .hardwareIotInfo-min-box{
        display: flex;
        line-height:40px;
        width:350px;
      }
    }
    .hardwareIotInfo-null-p{
      text-align: center;
      color:#999;
      font-size:18px;
      line-height:400px;
    }
  }
</style>
