<template>
  <div>
    <div
      class="main"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.3)"
    >
      <div class="basic-item">
        <h3>实例信息</h3>
        <div class="str-item">
          <div class="str-name">实例名称</div>
          <div class="str-value">{{ serverDetail.instanceName }}</div>
        </div>
        <div class="str-item">
          <div class="str-name">实例ID</div>
          <div class="str-value">{{ serverDetail.instanceId }}</div>
        </div>
        <div class="str-item">
          <div class="str-name">UUID</div>
          <div class="str-value">{{ serverDetail.uuid }}</div>
        </div>
        <div class="str-item">
          <div class="str-name">实例规格</div>
          <div class="str-value">{{ serverDetail.instanceStandard }}</div>
        </div>
        <div class="str-item">
          <div class="str-name">所属项目</div>
          <div class="str-value">{{ serverDetail.parentProject }}</div>
        </div>
        <div class="str-item">
          <div class="str-name">地域</div>
          <div class="str-value">{{ serverDetail.region }}</div>
        </div>
        <div class="str-item">
          <div class="str-name">可用区</div>
          <div class="str-value">{{ serverDetail.zone }}</div>
        </div>
        <div class="str-item">
          <div class="str-name">密钥</div>
          <div class="str-value">{{ serverDetail.keyIds }}</div>
        </div>
        <div class="str-item">
          <div class="str-name">角色</div>
          <div class="str-value">{{ serverDetail.camRoleName }}</div>
        </div>
        <div class="str-item">
          <div class="str-name">标签</div>
          <div class="str-value">
            {{ serverDetail.tags && serverDetail.tags.length === 0 ? "" : 1 }}
          </div>
        </div>
      </div>
      <div class="basic-item">
        <h3>网络信息</h3>
        <div class="str-item">
          <div class="str-name">所属网络</div>
          <div class="str-value">{{ serverDetail.vpcId }}</div>
        </div>
        <div class="str-item">
          <div class="str-name">所属子网</div>
          <div class="str-value">{{ serverDetail.subNetId }}</div>
        </div>
        <div class="str-item">
          <div class="str-name">主IPv4公网IP</div>
          <div class="str-value">
            {{ serverDetail.publicAddress && serverDetail.publicAddress[0] }}
          </div>
        </div>
        <div class="str-item">
          <div class="str-name">主IPv4内网IP</div>
          <div class="str-value">
            {{ serverDetail.publicAddress && serverDetail.privateAddress[0] }}
          </div>
        </div>
        <div class="str-item">
          <div class="str-name">用作公网网关</div>
          <div class="str-value">
            {{ serverDetail.asVpcGateway ? "是" : "否" }}
          </div>
        </div>
      </div>
      <div class="basic-item">
        <h3>配置信息</h3>
        <div class="str-item">
          <div class="str-name">操作系统名称</div>
          <div class="str-value">{{ serverDetail.osName }}</div>
        </div>
        <div class="str-item">
          <div class="str-name">cpu</div>
          <div class="str-value" v-if="serverDetail.cpu">
            {{ serverDetail.cpu }}核
          </div>
          <div class="str-value" v-else>无</div>
        </div>
        <div class="str-item">
          <div class="str-name">内存</div>
          <div class="str-value" v-if="serverDetail.memory">
            {{ serverDetail.memory }}MB
          </div>
          <div class="str-value" v-else>无</div>
        </div>
        <div class="str-item">
          <div class="str-name">公网宽带</div>
          <div class="str-value" v-if="serverDetail.internetMaxBandwidthOut">
            {{ serverDetail.internetMaxBandwidthOut }}Mbps
          </div>
          <div class="str-value" v-else>无</div>
        </div>
      </div>
      <div class="basic-item">
        <h3>镜像信息</h3>
        <div class="str-item">
          <div class="str-name">镜像名称</div>
          <div class="str-value">{{ serverDetail.imageName }}</div>
        </div>
        <div class="str-item">
          <div class="str-name">镜像Id</div>
          <div class="str-value">{{ serverDetail.imageId }}</div>
        </div>
        <div class="str-item">
          <div class="str-name">镜像来源</div>
          <div class="str-value">{{ serverDetail.imageType }}</div>
        </div>
      </div>
      <div class="basic-item">
        <h3>计费信息</h3>
        <div class="str-item">
          <div class="str-name">实例计费模式</div>
          <div class="str-value">{{ serverDetail.instanceChargeType }}</div>
        </div>
        <div class="str-item">
          <div class="str-name">网络计费模式</div>
          <div class="str-value">{{ serverDetail.internetChargeType }}</div>
        </div>
        <div class="str-item">
          <div class="str-name">创建时间</div>
          <div class="str-value">{{ serverDetail.createdTime }}</div>
        </div>
        <div class="str-item">
          <div class="str-name">到期时间</div>
          <div class="str-value">{{ serverDetail.expiredTime }}</div>
        </div>
      </div>
    </div>
    <!-- <div v-else class="main">
            暂无数据
        </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      serverDetail: {},
      loading: false
    };
  },
  filters: {
    dataFormat(msg) {
      return msg + "xxxxx";
    }
  },
  created() {
    this.loading = true;
    this.$http
      .post(this.nozzle.instanceInfoList, {
        regionId: "ap-chengdu",
        instanceId: this.$route.query.instanceId
      })
      .then(res => {
        this.loading = false;
        if (res.data.code === 200) {
          if (res.data.data.length) {
            this.serverDetail = res.data.data[0];
          }
        }
      })
      .catch(e => {
        this.loading = false;
        console.log("接口异常:" + e);
      });
  }
};
</script>

<style scoped>
.main {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
  justify-content: flex-start;
  text-align: left;
}
.basic-item {
  width: 32%;
  box-sizing: border-box;
  padding: 10px;
  margin-left: 2%;
  /* margin: 10px; */
  /*  */
  background-color: var(--tablebody);
  /* box-shadow: rgba(54, 58, 80, 0.32) 0px 2px 4px 0px; */
  border: 1px solid var(--eldatebefore);
  border-radius: 0px;
  /* color: rgba(0, 0, 0, 0.9); */
  color: var(--white);
}
.main > div:nth-of-type(n + 4) {
  margin-top: 20px;
}
.main > div:nth-of-type(4n) {
  margin-left: initial;
}
.main > div:nth-of-type(1) {
  margin-left: initial;
}
/* .basic-item + .basic-item{
    margin-top: 20px;
} */
.basic-item h3 {
  text-align: left;
  font-size: 14px;
  margin-bottom: 20px;
}
.str-item {
  display: flex;
}
.str-item > div {
  /* vertical-align: baseline; */
  box-sizing: border-box;
  height: 40px;
  color: var(--white);
  padding: 6px 20px 6px 0;
  /* width: 1px; */
  font-size: 12px;
}
.str-name {
  min-width: 25%;
}
</style>