<template>
  <div class="p_all_20">
     <!-- <el-tabs v-model="activeName">
        <el-tab-pane label="密码管理" name="first"></el-tab-pane>
      </el-tabs> -->
      <!--下面是用户手机验证码验证模式-->
      <div class="inputWrapper" v-if="!isVertify">
        <div class="inputBox">
          <span class="sameLength">用户账户：</span>
          <el-input class="userName" :placeholder="userData.comName" disabled></el-input>
        </div>
        <div class="inputBox">
          <span class="sameLength">手机号码：</span>
          <el-input class="userName" :placeholder="userData.phone" maxlength="11" disabled></el-input>
        </div>
        <div class="inputBox">
          <span class="sameLength">验证码：</span>
          <el-input placeholder="请输入验证码" v-model="vertifyCode" maxlength="6" class="userName">
            <el-button
              class="countingBox"
              slot="append"
              @click="getCode(userData.merCode,userData.phone)"
              v-if="!isReSend"
            >点击发送验证码</el-button>
            <el-button class="countingBox" slot="append" v-else>{{countingTime}}秒后重新发送验证码</el-button>
          </el-input>
        </div>
        <el-button class="submitPassword" type="primary" @click="nextStep(userData.merCode)">下一步</el-button>
      </div>

      <!--下面是用户通过手机验证码验证后的修改页面模式-->
      <div class="inputWrapper" v-if="isVertify">
        <div class="inputBox">
          <span class="sameLength">用户账户：</span>
          <el-input class="userName" :placeholder="userData.comName" disabled></el-input>
        </div>
        <div class="inputBox">
          <span class="sameLength">旧密码：</span>
          <el-input class="userName" placeholder="请输入密码" v-model="oldPassword" type="password"></el-input>
        </div>
        <div class="inputBox">
          <span class="sameLength">新密码：</span>
          <el-input class="userName" placeholder="请输入密码" v-model="newPassword1" type="password"></el-input>
        </div>
        <div class="inputBox">
          <span class="sameLength">确认新密码：</span>
          <el-input class="userName" placeholder="请输入密码" v-model="newPassword2" type="password"></el-input>
        </div>
        <el-button class="submitPassword" type="primary" @click="handlePasswordMatch">提交</el-button>
      </div>
  </div>
</template>

<script>
import { _getStorage,_removeStorage } from '@/utils/utils'
export default {
  name: 'setpwd',
  data () {
    return {
      breadcrumb: [],
      activeName: "first",
      comName: "",
      phone: "",
      vertifyCode: "",
      oldPassword: "",
      newPassword1: "",
      newPassword2: "",
      isVertify: false,
      isReSend: false,
      countingTime: 60,
      merCode:''//账号
    }
  },
  mounted() {
    // 时间钩子
      // this.init()
  },
    computed: {
    userData() {
      let info = _getStorage("info");
      let data = {
        comName: info.merCompany ? info.merCompany : this.comName,
        phone: info.merMobile1 ? info.merMobile1 : this.phone,
        merCode: info.merCode ? info.merCode : this.merCode,
      };
      return data;
    }
  },
  methods:{
      nextStep(merCode) {
      //注释掉，因为没有接口，逻辑和代码都是正确的
   
      if (this.vertifyCode != "") {
         
        this.$axios
          .post("/account/resetPwd/verify",{
            "account": merCode,
            "code": this.vertifyCode
          })
          .then(res => {
            if (res.data.code === 200) {
              this.$message({
                message: res.data.message,
                type: "success"
              });
              this.isVertify = true;
              // this.vertifyCode = res.data.vertifyCode;
            }else{
              this.$message.error(res.data.message);
            }
          })
          .catch(err => {
            consol.log(err);
          });
      } else {
         this.$message.error('短信验证码不能为空');
            return false
      }
    },
    //  handleCountinDown() {
     
    //   this.isReSend = true;
    //   this.time();
    // },
    getCode(account,phone){
        if(account && phone){
          this.$axios.post('/account/resetPwd/verifyCode',{
            account:account
          }).then((res)=>{
            if(res.data.code==200){
              this.$message.success('发送成功');
              // this.send();
                 this.isReSend = true;
                  this.time();
            }
          })
        }else{
          this.$message.error('用户账号不正确或账号无绑定手机号');
        }
      },
    time() {
      var hello = setInterval(() => {
        this.countingTime = this.countingTime - 1;
        // console.log(this.countingTime);
        if (this.countingTime === 0) {
          this.isReSend = false;
          this.countingTime = 60;
          clearInterval(hello);
          return;
        }
      }, 1000);
    },
    handlePasswordMatch() {
      if((this.oldPassword && this.newPassword1 && this.newPassword2) === ''){
         this.$message.error("输入不能为空");
      }
      else if (this.oldPassword === this.newPassword1 && this.newPassword2) {
        this.$message.error("旧密码不能等于新密码");
      } else if (this.newPassword1 !== this.newPassword2) {
        this.$message.error("新密码必须一致");
      } else if (
        (this.oldPassword.length ||
          this.newPassword1.length ||
          this.newPassword2.length ||
          this.userName.length) === 0
      ) {
        this.$message.error("不能为空");
      } else {
        this.$axios
          .post("/account/resetPwd", {
            // oldPsw: this.oldPassword,
            // newPsw: this.newPassword2
            "code": this.vertifyCode,
            "newPwd": this.newPassword1,
            "reNewPwd": this.newPassword2,
            "oldPwd": this.oldPassword
          })
          .then(res => {
            if (res.data.code == 200) {
              this.$message.success("修改成功");
              this.$router.push("/")
            } else {
              this.$message.error(res.data.message);
            }
          });
      }
    }
  },
  components:{
    // 传入组件
  // codeAlert
  }
}
</script>

<style lang="scss" scoped>
.containerWidth{
  background-color: #fff;
}
.inputWrapper {
  // margin-left: 100px;
  margin: 30px auto 0;
  text-align: center;
  .inputBox {
    display: block;
    box-sizing: border-box;
    padding: 8px 0;
    .sameLength {
      display: inline-block;
      width: 100px;
      text-align: right;
    }
    .userName {
      width: 400px;
      margin-left: 22px;
      outline: unset;
      .countingBox {
        width: 170px;
        // background: white;
        color: #4482ff;
        padding: 1vw;
      }
    }
  }
  .submitPassword {
    // margin-left: 190px;
    width: 100px;
    margin-top: 15px;
  }
}
</style>
