<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>
          <span
            v-if="updateState === true"
            style="margin: 0px 5px 0 10px; font-weight: 200; font-size: 14px;"
          >设备名称：</span>
          <el-input v-if="updateState === true" v-model="temp.deviceName" />
          <el-button
            v-if="updateState === false"
            type="text"
            @click.stop="handleUpdate(infoData)"
          >编辑</el-button>
          <el-button v-if="updateState === true" type="text" @click.stop="submit">确定</el-button>
        </div>
        <!-- <div class="top-button">
          <el-button type="primary" @click="download" size="small">下载本地模拟器</el-button>
        </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.deviceId}}</span>
            <el-button type="text" size="small" @click.stop="copyTexts(infoData.deviceId)">复制</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
              class="centent secret"
              :title="infoData.devicePassword"
            >{{infoData.devicePassword}}</span>
            <el-button type="text" size="small" @click.stop="upldatePassword">修改密码</el-button>
            <!-- <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.stop="copyTexts(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">产品PK</div>
          <div class="content">
            <span class="name">{{infoData.prodKey}}</span>
            <el-button type="text" size="small" @click.stop="copyTexts(infoData.prodKey)">复制</el-button>
          </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.stop="copyTexts(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.parentName || '--'}}</div>
        </div>
        <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>

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

        <div class="table-row-col" style="flex: 2 1 0%;">
          <div class="title">设备图片</div>
          <div class="content">--</div>
        </div>
      </div>
    </div>
    <!-- 添加或修改设备对话框 -->
    <dialog-template
      class="eldialog-wrap"
      :title="title"
      :visible="open"
      width="500px"
      @close="open = false"
    >
      <el-form ref="form" slot="dialog-center" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="设备密码：" prop="devicePassword">
          <el-input v-model="form.devicePassword" @input="inputI" placeholder="选填--设备密码" clearable />
        </el-form-item>
      </el-form>
      <div slot="dialog-footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
        <el-button size="mini" @click="open = false">取 消</el-button>
      </div>
    </dialog-template>
  </div>
</template>
<script>
import { updateDevice, resetPssword } from "@/api/iot/device";
import DialogTemplate from "@/components/DialogTemplate";
export default {
  name: "DeviceInfo",
  props: ["infoData"],
  components: {DialogTemplate},
  data() {
    const validatorNull = (rule, value, callback) => {
      callback();
    };
    return {
      updateState: false,
      prodtreeOptions: [],
      modelList: [],
      showProdSecret: false,
      showDevicePassword: false,
      temp: {
        deviceName: "",
        deviceId: undefined
      },
      rules: {
        devicePassword: [
          {
            required: false,
            validator: this.devicePassword,
            trigger: "blur"
          }
        ]
      },
      form: {
        devicePassword: ""
      },
      title: "",
      open: false
    };
  },
  methods: {
    devicePassword(rule, value, callback) {
      const isExp = /^[A-Z a-z 0-9 _ - $]{0,36}$/;
      if (this.form.devicePassword && !isExp.test(this.form.devicePassword)) {
        callback(new Error("格式不正确(数字，英文字母大小写，36个字符)！"));
      } else {
        callback();
      }
    },
    inputI() {
      this.$forceUpdate();
    },
    // 修改设备密码 弹窗打开
    upldatePassword() {
      this.form.devicePassword = this.infoData.devicePassword;
      this.form.deviceId = this.infoData.deviceId;
      this.title = `修改设备--${this.infoData.deviceName} 密码：`;
      this.open = true;
    },
    // 修改设备密码 提交
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          resetPssword(this.form).then(response => {
            this.open = false;
            if (response.code === 200) {
              this.msgSuccess("修改成功");
            }
            this.$emit("updateInfo", {
              deviceId: this.infoData.deviceId
            });
          });
        }
      });
    },
    copyTexts(val) {
      this.copeFu(val, this);
    },
    // 设备修改只能修改名称
    handleUpdate(row) {
      this.newTemp();
      this.temp = Object.assign({}, row);
      this.updateState = true;
    },
    newTemp() {
      this.temp = {
        deviceName: "",
        deviceId: undefined
      };
    },
    // 下载本地模拟器 -- 暂未开放
    download() {},
    submit() {
      if (this.temp.deviceName && this.temp.deviceId) {
        updateDevice(this.temp).then(response => {
          this.updateState = false;
          if (response.code === 200) {
            this.msgSuccess("修改成功");
          }
          this.$emit("updateInfo", {
            deviceId: this.infoData.deviceId,
            deviceName: this.infoData.deviceName
          });
        });
      } else {
        this.msgError("设备名称不能为空！");
      }
    }
  }
};
</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>
