<template>
  <div>
    <p class="title">
      自主解锁
      <i class="el-icon-close close" @click="$router.go(-1)"></i>
    </p>
    <div class="stepWrapper">
      <el-steps :active="active" align-center finish-status="success" style="margin-bottom: 30px">
        <el-step title="解锁"></el-step>
        <el-step title="解锁成功"></el-step>
      </el-steps>
      <div v-show="active1" class="stepBox">
        <el-form label-width="110px" :model="queryParams" ref="queryParams">
          <el-row>
            <el-col :span="24">
              <el-form-item label="验证方式：">
                <ak-select
                  v-model="queryParams.loginType"
                  style="width:100%"
                  @change="changeValidWay"
                >
                  <el-option
                    v-for="item in validWays"
                    :label="item.label"
                    :key="item.value"
                    :value="item.value"
                  ></el-option>
                </ak-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" v-if="userPhone">
              <el-form-item
                label="手机号码："
                prop="mobilePhone"
                :rules="[ { required: userPhone, message: '请输入手机号码',trigger: 'change'},{validator: this.$validata.validatePhoneNum,trigger: 'blur'}]"
              >
                <el-input v-model="queryParams.mobilePhone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="!userPhone">
              <el-form-item
                label="用户名："
                prop="loginId"
                :rules="[ { required: !userPhone, message: '请输入用户名',trigger: 'change'}]"
              >
                <el-input v-model="queryParams.loginId"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 
              <el-form-item   label="密码：" prop="password"  :rules="[ { required: true , message: '请输入密码',trigger: 'change'}]">
                <el-input v-model="queryParams.password" type="password" ></el-input>
          </el-form-item>-->

          <el-row>
            <el-col :span="12">
              <el-form-item
                label="验证码："
                prop="checkCode"
                :rules="[ { required: true, message: '验证码不能为空',trigger: 'change'}]"
              >
                <el-input v-model="queryParams.checkCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10" :offset="1" style="margin-top: 8px">
              <el-button size="small" @click="getValid" :disabled="disabled">{{activeText}}</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div v-show="active2" class="stepBox">
      </div>

      <el-button @click="unlock" type="primary" size="large" v-show="unlockBtn" class="nextBtn">解锁</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "unlock",
  data() {
    return {
      active: 0,
      active1: true,
      active2: false,
      unlockBtn: true,
      disabled: false,
      second: 60,
      activeText: "获取验证码",
      second2: 10,
      activeText2: "",
      queryName: "",
      queryPhone: "",
      userPhone: true,
      validWays: [
        {
          label: "使用手机验证",
          value: "3"
        },
        {
          label: "使用用户名验证",
          value: "2"
        }
      ],
      queryParams: {
        loginId: null,
        loginType: "3", //1用户名+密码+图片验证码登录, 2用户名+密码+手机验证码登录, 3手机号码+手机验证码
        mobilePhone: null,
        checkCode: null,
        password: null
      },
      zhejiang:false,
      msgTime:null,
    };
  },
  methods: {
    //获取登录方式
    getLoginWay:function(){
      this.$fetch.getLoginTypes().then((resp) => {
        if (resp.data.returnCode == '0') {
          if(resp.data.data.province){
            if(resp.data.data.province == 'zhejiang'){
              this.zhejiang = true;
              this.msgTime = resp.data.data.msgTime;
              this.second=resp.data.data.msgTime;
            }
          }
      }
    },(error) => {
        this.$message.error("登录类型获取失败：" + error);
      });
    },
    changeValidWay: function(label) {
      if (label == 3) {
        this.userPhone = true;
      } else {
        this.userPhone = false;
      }
      this.$refs.queryParams.resetFields();
    },

    validatePhone(rule, value, callback) {
      if (!/^1[345789]\d{9}$/.test(value)) {
        callback(new Error("手机号码格式错误"));
      } else {
        callback();
      }
    },
    //获取手机验证码前的参数为空判断
    getValid: function() {
      if (this.userPhone) {
        if (!this.queryParams.mobilePhone) {
          this.$message.warning("请先输入手机号码");
          return;
        } else if (!/^1[345789]\d{9}$/.test(this.queryParams.mobilePhone)) {
          this.$message.warning("手机号码格式错误");
          return;
        }
      } else {
        if (
          !this.queryParams.loginId ||
          this.queryParams.loginId.trim() == ""
        ) {
          this.$message.warning("请先输入用户名");
          return;
        }
      }
      this.getUnlockingCode();
    },
    //获取手机验证码
    getUnlockingCode: function() {
      this.updateCountDown();
      this.$fetch.getUnlockingMobileCode(this.queryParams).then(
        resp => {
          if (resp.data.returnCode != "0") {
            // this.$message.error(resp.data.returnMsg + "");
            this.second = 0;
          }
        }
      );
    },
    updateCountDown: function() {
      if (this.second == 0) {
        this.activeText = "获取验证码";
        this.disabled = false;
        if(this.zhejiang){
          this.second =this.msgTime;
        }else{
          this.second = 60;
        }
      } else {
        this.second--;
        this.activeText = this.second + "秒后重新获取";
        this.disabled = true;
        setTimeout(() => {
          this.updateCountDown();
        }, 1000);
      }
    },
    loginContent: function() {
      var clone = JSON.parse(JSON.stringify(this.queryParams));
      this.$fetch
        .getPublicKey()
        .then(resp => {
          if (resp.data.returnCode == "0") {
            setMaxDigits(130);
            let { e, modulus } = resp.data.data;
            let key = new RSAKeyPair(e, "", modulus);
            // clone.password = encryptedString(key,this.queryParams.password);
          }
        })
        .then(() => {
          this.$fetch.doPost("system/userSelf/lock", clone).then(resp => {
            if (resp.data.returnCode == "0") {
              this.active += 1;
              this.active1 = false;
              this.active2 = true;
              setTimeout(() => {
                this.$router.push({ path: "/" });
              }, 1000);
            }
          });
        });
    },
    unlock: function() {
      this.$refs["queryParams"].validate(valid => {
        if (valid) {
          this.loginContent();
        }
      });
    }
  },
  created: function() {
    this.getLoginWay();
    this.queryName = this.$route.query.name;
    this.queryPhone = this.$route.query.phone;
    if (this.queryName) {
      this.userPhone = false;
      this.queryParams.loginId = this.queryName;
      this.queryParams.loginType = "2";
    } else if (this.queryPhone) {
      this.userPhone = true;
      this.queryParams.mobilePhone = this.queryPhone;
    }
  }
};
</script>
<style scoped>
.title {
  height: 70px;
  line-height: 70px;
  padding-left: 20px;
  border-bottom: 1px solid #e7e7e7;
  background-color: #fbfbf8;
}
.stepWrapper {
  padding: 50px 100px;
  margin-left: 160px;
}

.nextBtn {
  width: 200px;
  margin-left: 110px;
  margin-top: 20px;
}
.successIcon {
  border: 2px solid #13ce66;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #13ce66;
  margin-right: 50px;
}
.enterLoginPage a {
  color: #1d90e6;
  font-size: 14px;
}
</style>
