<template>
  <div class="loginpsw-container">
    <div class="contenttitle">
      <span>设置新的密码</span>
    </div>
    <div class="contentbody">
      <div class="username">
        <div>用户名</div>
        <input type="text" :value="username" disabled="disabled" />
      </div>
      <div class="password">
        <div>密码</div>
        <input type="password" v-model.trim="password" />
      </div>
      <button @click="submit">确定</button>
    </div>
  </div>
</template>

<script>
import { setUserPswApi } from "../../../../api/userinfo";
export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {
    userinfo: {
      require: true,
    },
  },
  // 组件状态值
  data() {
    return {
      username: "",
      password: null,
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {
    userinfo() {
      this.$nextTick(() => {
        console.log(this.userinfo.tel);

        this.username = this.userinfo.tel;
        console.log(this.username);
      });
    },
  },
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.username = this.userinfo.tel;
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    async submit() {
      if (this.password === null || this.password.length === 0) {
        this.$message.warning("请输入密码");
      } else {
        try {
          const { data } = await setUserPswApi({ password: this.password });
          console.log(data);
          if (data.status === 200) {
            this.$message.success("密码修改成功");
          }
        } catch (error) {
          console.log(error);
        }
      }
      console.log(this.password);
    },
  },
};
</script>

<style scoped lang="less">
.loginpsw-container {
  .contentbody {
    .username,
    .password {
      margin-top: 16px;
      div {
        font-size: 16px;
        line-height: 16px;
        margin-bottom: 8px;
      }
      input {
        outline: none;
        width: 430px;
        height: 40px;
        text-indent: 10px;
        font-size: 16px;
        background: #eeeeee;
        border: 1px solid #dddddd;
        border-radius: 4px;
      }
    }
    .password {
      input {
        background-color: #fff;
      }
    }
    button {
      width: 64px;
      height: 32px;
      margin-top: 21px;
      background: #ff6a00;
      border-radius: 4px;
      border: none;
      font-size: 14px;
      color: #fff;
      &:hover {
        background-color: #fe8034;
      }
    }
  }
}
</style>
