<template>
  <div class="product-details-info">
    <div class="group-list-info">
      <div class="top">
        <div class="top-label">
          <svg-icon icon-class="A_product1" style="margin-right: 2px; height: 20px; width: 20px;" />设备信息
          <span
            v-if="updateState === false"
            style="margin: 0px 15px 0 10px; font-weight: 200; font-size: 14px;"
          >设备名称：{{infoData.deviceName}}</span>
        </div>
      </div>
    </div>
    <div class="group-list-table">
      <div class="table-row">
        <div class="table-row-col">
          <div class="title">设备ID</div>
          <div class="content">
            <span class="name">{{infoData.deviceKey}}</span>
            <el-button type="text" size="small" @click="copyText(infoData.deviceKey)">复制</el-button>
          </div>
        </div>
        <div class="table-row-col">
          <div class="title">型号</div>
          <div class="content">
            <span class="group-id">{{infoData.modelName}}</span>
          </div>
        </div>
        <div class="table-row-col">
          <div class="title">设备密码</div>
          <div class="content">
            <span v-show="!showDevicePassword" class="centent">********</span>
            <span
              v-show="showDevicePassword"
              class="centent secret"
              :title="infoData.devicePassword"
            >{{infoData.devicePassword}}</span>
            <el-button
              v-show="!showDevicePassword"
              type="text"
              size="small"
              @click.stop="showDevicePassword = true"
            >显示</el-button>
            <el-button
              v-show="showDevicePassword"
              type="text"
              size="small"
              @click="copyText(infoData.devicePassword)"
            >复制</el-button>
            <el-button
              v-show="showDevicePassword"
              type="text"
              size="small"
              @click.stop="showDevicePassword = false"
            >隐藏</el-button>
          </div>
        </div>
      </div>
      <div class="table-row">
        <div class="table-row-col">
          <div class="title">父设备</div>
          <div class="content">{{infoData.parentName}}</div>
        </div>

        <div class="table-row-col">
          <div class="title">设备KEY</div>
          <div class="content">{{infoData.deviceKey }}</div>
        </div>
        <div class="table-row-col">
          <div class="title">devSecret</div>
          <div class="content">
            <span v-show="!showProdSecret" class="centent">********</span>
            <span
              v-show="showProdSecret"
              class="centent secret"
              :title="infoData.deviceSecret"
            >{{infoData.deviceSecret}}</span>
            <el-button
              v-show="!showProdSecret"
              type="text"
              size="small"
              @click.stop="showProdSecret = true"
            >显示</el-button>
            <el-button
              v-show="showProdSecret"
              type="text"
              size="small"
              @click="copyText(infoData.deviceSecret)"
            >复制</el-button>
            <el-button
              v-show="showProdSecret"
              type="text"
              size="small"
              @click.stop="showProdSecret = false"
            >隐藏</el-button>
          </div>
        </div>
      </div>

      <div class="table-row">
        <div class="table-row-col">
          <div class="title">设备类型</div>
          <div class="content">{{infoData.deviceTypeName}}</div>
        </div>
        <div class="table-row-col">
          <div class="title">当前状态</div>
          <div class="content" v-if="infoData.deviceState === 'ONLINE'">在线</div>
          <div class="content" v-else-if="infoData.deviceState === 'OFFLINE'">离线</div>
          <div class="content" v-else-if="infoData.deviceState === 'OUTLINE'">脱线</div>
          <div class="content" v-else-if="infoData.deviceState === 'UNACTIVE'">未激活</div>
        </div>

        <div class="table-row-col">
          <div class="title">创建时间</div>
          <div class="content">{{infoData.createTime || '--'}}</div>
        </div>
      </div>

      <div class="table-row">
        <div class="table-row-col" style="flex: 3 1 0%;">
          <div class="title">设备图片</div>
          <div class="content">--</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { updateDevice } from "@/api/iot/device";
export default {
  name: "DeviceInfo",
  props: ["infoData"],
  data() {
    return {
      updateState: false,
      prodtreeOptions: [],
      modelList: [],
      showProdSecret: false,
      showDevicePassword: false,
      temp: {
        deviceName: "",
        deviceId: undefined
      },
      rules: {}
    };
  },
  methods: {
    copyText(val) {
      this.copeFu(val, this);
    }
  }
};
</script>

<style lang="scss">
.product-details-info {
  .group-list-info {
    .top {
      text-align: left;
      width: 100%;
      float: left;
      height: 40px;
      .top-label {
        float: left;
        width: calc(100% - 200px);
        font-size: 16px;
        font-weight: 700;
        color: #373d41;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .el-input--medium {
          width: 150px;
        }
        .el-button--text {
          padding: 8px 12px;
          color: #333;
        }
        .el-button--text:hover {
          background-color: #d1dbe6;
          border-radius: 0;
          color: #1890ff;
        }
      }
      .top-button {
        float: left;
        text-align: right;
        width: 200px;
      }
    }
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    flex: 1;
    .title {
      line-height: 30px;
      font-size: 16px;
      font-weight: 700;
      color: #373d41;
      display: flex;
      align-items: center;
      flex: 1;
    }
  }
  .group-list-table {
    border-top: 1px solid #d4d4d4;
    border-left: 1px solid #d4d4d4;
    .table-row {
      display: flex;
      width: 100%;
      .table-row-col {
        display: flex;
        flex: 1 1 0%;
        overflow: hidden;
        font-size: 14px;
        .title {
          width: 180px;
          height: 48px;
          color: rgb(116, 119, 122);
          display: flex;
          align-items: center;
          background: rgb(250, 250, 252);
          border-bottom: 1px solid #d4d4d4;
          border-right: 1px solid #d4d4d4;
          padding: 0px 12px;
          margin-bottom: 0px;
          font-size: 15px;
          font-weight: 100;
        }
        .content {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex: 1 1 0%;
          overflow: hidden;
          color: #666;
          border-bottom: 1px solid #d4d4d4;
          border-right: 1px solid #d4d4d4;
          padding: 0px 12px;
          .name {
            display: inline-block;
            max-width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            cursor: pointer;
            overflow: hidden;
          }
          .group-id {
            margin-right: 8px;
          }
          .notice-item {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 6px;
            background: #d3d5d5;
            margin-right: 3px;
          }
          .n {
            background: #0fc18a;
          }
          .secret {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
  .eldaialog-wrap {
    .el-dialog__header {
      border-bottom: 1px solid #747373;
    }
    .el-radio {
      width: 90px;
    }
    .el-dialog__body {
      padding: 0px;
    }
    .cus-itme.el-form-item--mini .el-form-item__content {
      margin-left: 0px !important;
    }
    .select {
      // width: 92%;
      display: inline-block;
      width: calc(92% - 50px);
      display: inline-block;
      float: left;
      margin-right: 4px;
      .el-input {
        width: 100%;
      }
    }
    .el-textarea {
      width: 92%;
      width: calc(92% - 50px);
      width: 100%;
    }
    .el-input {
      width: 92%;
      width: calc(92% - 50px);
      width: 100%;
    }
    .info {
      width: 100%;
      float: left;
      margin-bottom: 15px;
      /* margin-top: 13px; */
      margin-left: -10px;
      font-size: 16px;
      font-weight: 600;
    }
    .span {
      width: calc(100% - 91px);
      display: block;
      content: "";
      height: 1px;
      /* width: 100%; */
      border-top: 1px dashed #ecedee;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      margin-left: 80px;
      margin-top: -10px;
    }
    .form-buttons-div {
      height: 45px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-right: 10px;
      border-top: 1px solid #747373;
    }
  }

  .group-dialog {
    .el-dialog__header {
      border-bottom: 1px solid #ccc;
    }
    .el-dialog__body {
      padding: 28px;
      .el-form-item {
        margin-bottom: 0;
        .el-form-item__label {
          line-height: 30px;
        }
      }
    }
  }
}
</style>
