<template>
  <div class="change_pwd">
    <i class="iconfont icon-back" @click="back"></i>
    <div class="title">修改密码</div>
    <!-- 修改密码内容 -->
    <div class="change_input" @keyup.enter="onChangePwd">
      <div class="change_username">
        <input
          class="change_input_username"
          type="password"
          placeholder="请输入原密码"
          oninput="value=value.replace(/[^\w\/]/ig,'');"
          v-model="currentPwd"
        />
      </div>
      <div class="change_password">
        <input
          class="change_input_password"
          type="password"
          maxlength="20"
          oninput="value=value.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]|\s+|[^\w\u4e00-\u9fa5\/\-]|[/|]/ig,'');"
          placeholder="输入新密码"
          v-model="newPwd"
        />
      </div>
      <div class="change_password_agin">
        <input
          class="change_input_password_agin"
          type="password"
          maxlength="20"
          oninput="value=value.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]|\s+|[^\w\u4e00-\u9fa5\/\-]|[/|]/ig,'');"
          placeholder="再次输入新密码"
          v-model="newPwdAgin"
        />
      </div>
    </div>
    <div v-if="canChange" class="change_btn" @click="onChangePwd">修改密码</div>
    <div v-else class="change_btn gray">修改中</div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "ChangePwd",
  components: {},
  inject: ["checkCode", "routeLink"],
  data() {
    return {
      currentPwd: "", // 原密码
      newPwd: "", // 新密码
      newPwdAgin: "", // 确认密码
      canChange: true, // 可以修改密码
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    ...mapActions(["userInfoAction"]),
    // 返回
    back() {
      this.showInnerControl("account");
    },

    // 显示哪个组件(工具函数)
    showInnerControl(name) {
      this.$emit("showInnerControl", name);
    },

    // 修改密码
    onChangePwd() {
      const { currentPwd, newPwd, newPwdAgin } = this;
      if (!currentPwd) {
        this.$toast.text("原密码不能为空");
        return;
      }
      if (!newPwd) {
        this.$toast.text("新密码不能为空");
        return;
      }
      if (newPwdAgin !== newPwd) {
        this.$toast.text("两次密码不一致");
        return;
      }
      // 修改密码接口
      if (!this.canChange) {
        return;
      }
      this.canChange = false;

      this.$api
        .changePwd({
          password: currentPwd,
          newPwd,
        })
        .then((res) => {
          this.checkCode(res);
          this.canChange = true;
          const { code } = res.data;
          // 错误
          if (code) {
            return;
          }
          // 成功
          this.$toast.text("修改密码成功, 请重新登录");
          //   localStorage.removeItem("userInfo");
          this.$utils.deleteStorage("", "userInfo");
          this.showInnerControl("");
          this.routeLink("Login");
        });
    },
  },
};
</script>

<style lang='less' scoped>
.change_pwd {
  width: 100%;
  height: 580 / @rem;
  margin-top: -580 / @rem;
  position: absolute;
  top: 100%;
  padding: 20 / @rem;
  border-radius: 30 / @rem 30 / @rem 0 0;
  box-sizing: border-box;
  background-color: #fff;

  i {
    float: right;
    font-size: 60 / @rem;
  }

  .icon-back {
    margin-right: 10 / @rem;
    font-size: 50 / @rem;
  }

  .title {
    height: 60 / @rem;
    line-height: 60 / @rem;
    margin-top: 10 / @rem;
    margin-left: 10 / @rem;
    padding-left: 20 / @rem;
    font-size: 36 / @rem;
    font-weight: bold;
    border-left: 4px solid #3faeed;
    text-align: left;
  }

  .change_input {
    width: 100%;
    margin-top: 40 / @rem;
    padding-top: 10 / @rem;
    border-top: 1px solid #e6e6e6;

    .change_username,
    .change_password,
    .change_password_agin {
      width: 100%;
      height: 80 / @rem;
      position: relative;
      margin-top: 25 / @rem;
    }

    .change_username {
      margin-top: 25 / @rem;
    }

    .change_input_username,
    .change_input_password,
    .change_input_password_agin {
      width: 100%;
      height: 80 / @rem;
      padding-left: 20 / @rem;
      font-size: 32 / @rem;
      box-sizing: border-box;
      border: 1 / @rem solid #d6d6d6;
    }

    input::-webkit-input-placeholder {
      color: #888;
    }
  }
  .change_btn {
    width: 60%;
    margin: 25 / @rem auto 0;
    height: 70 / @rem;
    line-height: 70 / @rem;
    border-radius: 10 / @rem;
    background-color: #3faeed;
    color: #fff;
    font-size: 32 / @rem;
  }
}

// 正常横屏样式
@media all and (orientation: landscape),
  /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  .change_pwd {
    width: 45%;
    height: 250 / @rem;
    left: 0;
    top: 50%;
    margin-top: -125 / @rem;
    padding: 0 10 / @rem;
    border-radius: 0 20 / @rem 20 / @rem 0;

    .icon-back {
      margin-top: 10 / @rem;
      margin-right: 5 / @rem;
      font-size: 25 / @rem;
    }

    .title {
      height: 30 / @rem;
      line-height: 30 / @rem;
      margin-top: 15 / @rem;
      margin-left: 5 / @rem;
      padding-left: 10 / @rem;
      font-size: 18 / @rem;
    }

    .change_input {
      margin-top: 10 / @rem;
      padding-top: 5 / @rem;

      .change_username,
      .change_password,
      .change_password_agin {
        height: 35 / @rem;
        margin-top: 10 / @rem;
      }

      .change_username {
        margin-top: 8 / @rem;
      }

      .change_input_username,
      .change_input_password,
      .change_input_password_agin {
        height: 35 / @rem;
        padding-left: 10 / @rem;
        font-size: 16 / @rem;
      }
    }
    .change_btn {
      margin: 12.5 / @rem auto 0;
      height: 35 / @rem;
      line-height: 35 / @rem;
      border-radius: 5 / @rem;
      font-size: 16 / @rem;
    }
  }
}
// ipad 横屏
@media /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px),
  /**ipad伪横屏 */ all and (orientation: landscape) and (min-width: 800px) and (min-height: 600px),
  all and (min-device-aspect-ratio: 3/4) and (max-device-aspect-ratio: 4/3),
  all and (device-aspect-ratio: 4/3) {
  .change_pwd {
    width: 350 / @rem;
    height: 250 / @rem;
    left: 50%;
    top: 50%;
    margin-top: -125 / @rem;
    margin-left: -175 / @rem;
    padding: 0 10 / @rem;
    border-radius: 20 / @rem;
  }
}

// ipad 竖屏
@media /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
}
</style>