<!--  -->
<template>
  <div class="modification_box" :style="'height:' + fullHeight + 'px'">
    <!-- 头部 -->
    <div class="modification_head">
      <div class="modification_head_returnA" @click="FanHui()">
        <img src="../../assets/image/left.png" alt class="modification_head_returnA_img" />
      </div>

      <!-- 标题 -->
      <div class="head_title">
        <span class="head_title_text">修改密码</span>
      </div>

      <!-- 保存 -->
      <div class="head_btn" @click="baocun()">保存</div>
    </div>

    <!-- list列表 -->
    <ul class="modification_box_ul">
      <!-- 旧密码 -->
      <li class="modification_box_li">
        <input
          maxlength="8"
          @focus="focusA()"
          @blur="someMethodA()"
          type="password"
          class="li_ipt"
          :placeholder="jiuPad"
          v-model="input1"
        />
      </li>

      <!-- 第一次新密码 -->
      <li class="modification_box_li">
        <input
          maxlength="8"
          @focus="focusB()"
          @blur="someMethodB()"
          type="password"
          class="li_ipt"
          :placeholder="xinPad"
          v-model="input2"
        />
      </li>

      <!-- 第二次密码 -->
      <li class="modification_box_li">
        <input
          maxlength="8"
          @focus="focusC()"
          @blur="someMethodC()"
          type="password"
          class="li_ipt"
          :placeholder="xinPad2"
          v-model="input3"
        />
      </li>
    </ul>
  </div>
</template>

<script>
function filterInput(val) {
  // 这里过滤的是除了英文字母和数字的其他字符
  return val.replace(/[^A-z0-9]/, "");
}
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      fullHeight: document.documentElement.clientHeight,
      input1: "", //旧密码
      input2: "", // 第一次新密码
      input3: "", //第二次新密码
      jiuPad: "填写旧密码",
      xinPad: "填写新密码不能小于6位",
      xinPad2: "再次填写新密码不能小于6位的",
      loading: true //加载
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    },
    //旧密码
    input1(val) {
      this.$nextTick(() => {
        this.input1 = filterInput(val);
      });
    },
    //第一次新密码
     input2(val) {
      this.$nextTick(() => {
        this.input2 = filterInput(val);
      });
    },
    //第二次新密码
     input3(val) {
      this.$nextTick(() => {
        this.input3 = filterInput(val);
      });
    },
  },
  //方法集合
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    //点击返回到home页面
    FanHui() {
      let _this = this;
      // _this.$router.push("/mine");
      _this.$router.replace("/mine");
    },

    //判断是否填写全部
    baocun() {
      var _this = this;
      if (_this.input1 == "") {
        this.$message({
          message: "请填写旧密码",
          type: "warning",
          duration: 1000
        });
      } else if (_this.input2 == "") {
        this.$message({
          message: "请填写新密码",
          type: "warning",
          duration: 1000
        });
      } else if (_this.input3 == "") {
        this.$message({
          message: "请再次填写新密码",
          type: "warning",
          duration: 1000
        });
      } else if (
        _this.input1 !== "" &&
        _this.input2 !== "" &&
        _this.input3 !== ""
      ) {
        _this.save();
      }
    },

    //保存
    save() {
      let _this = this;
      let postData = _this.$qs.parse({
        password: _this.input1,
        password2: _this.input2,
        password3: _this.input3
      });
      _this
        .$axios({
          method: "post",
          url: "bigservers/alter_password",
          data: postData,
          headers: {
            "Content-Type": "multipart/form-data"
          }
        })
        .then(res => {
          if (res.data === 1) {
            this.$message({
              message: "两次输入的密码不一致",
              type: "warning",
              duration: 1000
            });
          } else if (res.data === 2) {
            this.$message({
              message: "新旧密码重复",
              type: "warning",
              duration: 1000
            });
          } else if (res.data === 3) {
            this.$message({
              message: "旧密码输入不正确",
              type: "warning",
              duration: 1000
            });
          } else if (res.data === 0) {
            this.$message({
              message: "修改成功",
              type: "success",
              duration: 1000
            });
            _this.$router.replace("/");
          }
          _this.loading = false;
        })
        .catch(error => {
          alert("失败");
        });
    },

    focusA() {
      this.jiuPad = "";
    },
    focusB() {
      this.xinPad = "";
    },
    focusC() {
      this.xinPad2 = "";
    },

    someMethodA() {
      this.jiuPad = "填写旧密码";
    },
    someMethodB() {
      this.xinPad = "填写新密码";
    },
    someMethodC() {
      this.xinPad2 = "再次填写新密码";
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
};
</script>
<style lang='scss' scoped>
@import "../../assets/scss/bus.scss";
@import "../../assets/scss/modification.scss";
</style>