<template>
  <div class="main_root">
    <div class="tip_bg">
      <div class="require">输入设备号后，系统自动计算设备密码。</div>
      <div class="require">密码为动态密码，每隔1小时变化一次。</div>
    </div>
    <div class="pwd_main">
      <div class="pwd_main_input">
        <Input
          v-model="searchInfo.sn"
          placeholder="请输入设备号"
          @on-enter="getSnPwd()"
          @on-change="searchInfo.data = ''"
          style="width: 380px"
          clearable
        />
        <Button type="primary" class="primary_btn" @click="getSnPwd()"
          >查询</Button
        >
      </div>
      <div class="pwd_main_info" v-if="searchInfo.data">
        <div>查询结果</div>
        <div class="pwd_main_data">{{ searchInfo.data }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { password_detail_sn } from "@/api/setting";
export default {
  data() {
    return {
      searchInfo: {
        sn: "",
        data: ""
      }
    };
  },
  computed: {
    powerParams() {
      return this.$store.getters.powerParams;
    }
  },
  methods: {
    getSnPwd() {
      if (!this.searchInfo.sn) {
        this.$Message.error("请输入设备号");
        return;
      }
      password_detail_sn({
        sn: this.searchInfo.sn
      }).then((data) => {
        if (data.code === 0) {
          this.searchInfo.data = data.obj;
        } else {
          this.$Message.error(data.msg);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.tip_bg {
  margin: 50px 100px;
  border-radius: 8px;
  border: 1px dashed #ced9f2;
  background: #f1f6fc;
  .require {
    margin: 10px 20px;
    font-size: 16px;
    line-height: 1.6;
    &::before {
      content: "*" !important;
      display: inline-block;
      margin-right: 4px;
      line-height: 1;
      font-family: SimSun;
      font-size: 14px;
      color: #ed4014;
    }
  }
}
.pwd_main {
  margin: 0 auto;
  width: 480px;
  .pwd_main_input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .primary_btn {
      width: 84px;
    }
  }
  .pwd_main_info {
    margin-top: 40px;
    font-weight: bold;
    font-size: 16px;
    .pwd_main_data {
      margin-top: 10px;
      height: 36px;
      line-height: 36px;
      font-size: 18px;
      text-align: center;
      color: #339dff;
      border-radius: 8px;
      border: 0 solid #979797;
      background: #ebf3ff;
    }
  }
}
</style>
