<template>
  <div>
    <h1>{{ title }}</h1>
    <el-input
      placeholder="请输入手机号"
      class="input-box"
      v-model="phone"
      v-if="getType === 0 || getType === 1"
      maxlength="11"
      @input="phone = phone.replace(/[^\d]/g, '')"
    />
    <el-input
      v-if="getType === 2 || getType === 3"
      placeholder="请输入邮箱地址"
      class="input-box"
      v-model.trim="email"
      @blur="cheack"
      @input="email = email.replace(/[\u4e00-\u9fa5]/gi, '')"
    />
    <!-- code输入框 -->
    <div
      class="el-input input-box input-box__code"
      v-if="getType === 0 || getType === 1"
    >
      <input
        type="text"
        maxlength="9"
        autocomplete="off"
        v-model="code"
        @input="code = code.replace(/[^\d]/g, '')"
        class="el-input__inner"
        placeholder="请输入短信验证码"
      />
      <div
        :class="{ btn: true, 'btn-js__active': curIntervalSeconds === 0 }"
        @click="getCode"
      >
        {{
          curIntervalSeconds === 0
            ? "发送验证码"
            : curIntervalSeconds + "秒后重新发送"
        }}
      </div>
    </div>
    <div
      class="el-input input-box input-box__code"
      v-if="getType === 2 || getType === 3"
    >
      <input
        type="text"
        maxlength="9"
        autocomplete="off"
        v-model.trim="code"
        @input="code = code.replace(/[^\d]/g, '')"
        class="el-input__inner"
        placeholder="请输入邮箱验证码"
      />
      <div
        :class="{ btn: true, 'btn-js__active': curIntervalSeconds === 0 }"
        @click="getEmailCode"
      >
        {{
          curIntervalSeconds === 0
            ? "发送验证码"
            : curIntervalSeconds + "秒后重新发送"
        }}
      </div>
    </div>
    <!-- 密码输入框 -->
    <div class="el-input input-box input-password">
      <input
        :type="[openOrClose1 ? 'password' : 'text']"
        maxlength="30"
        autocomplete="off"
        v-model.trim="passwordOne"
        @input="passwordOne = passwordOne.replace(/[\u4e00-\u9fa5]/gi, '')"
        class="el-input__inner"
        placeholder="请输入密码"
      />
      <div class="icon" @click="changeOpen1">
        <i class="iconfont" :class="[openOrClose1 ? 'iconYJ' : 'iconYC']"></i>
      </div>
    </div>
    <div class="el-input input-box input-password">
      <input
        :type="[openOrClose2 ? 'password' : 'text']"
        maxlength="30"
        autocomplete="off"
        v-model.trim="passwordTwo"
        @input="passwordTwo = passwordTwo.replace(/[\u4e00-\u9fa5]/gi, '')"
        class="el-input__inner"
        placeholder="请再次确认密码"
      />
      <div class="icon" @click="changeOpen2">
        <i class="iconfont" :class="[openOrClose2 ? 'iconYJ' : 'iconYC']"></i>
      </div>
    </div>
    <div class="sign-in-btn" @click="setPassword">{{ title }}</div>
    <div class="sign-in-btn--bgw" @click="goback">返回登录</div>
  </div>
</template>
<script>
import { GO_URLS } from "@/config/URLS";
export default {
  data() {
    return {
      phone: "",
      code: "",
      maxIntervalSeconds: 60,
      curIntervalSeconds: 0,
      openOrClose1: true,
      openOrClose2: true,
      passwordOne: "",
      passwordTwo: "",
      Nolanding: false,
      title: "",
      email: "",
    };
  },
  watch: {
    // 电话号码的变化
    phone: function (val) {
      if (val.length === 11) {
        if (!this.checkPhone()) return;
        this.checkisSetPwd();
      }
    },
  },
  computed: {
    getType: function () {
      return this.$store.state.businessType;
    },
  },
  created() {
    if (this.getType === 0 || this.getType === 2) {
      this.title = "设置密码";
    } else if (this.getType === 1 || this.getType === 3) {
      this.title = "重置密码";
    }
  },
  methods: {
    cheack() {
      if (!this.email) return;
      if (!this.checkEmail()) {
        return false;
      }
      this.checkisSetEPwd();
    },
    async checkisSetEPwd() {
      const res = await this.$ajax({
        url: GO_URLS.isSetPwd,
        type: "post",
        params: {
          email: this.email,
        },
      });
      if (res) {
        if (res.data && res.data.is_set_pwd === 1 && this.getType === 2) {
          this.Nolanding = true;
          this.$message("您已经设置过密码，请勿重复设置密码");
        } else if (
          res.data &&
          res.data.is_set_pwd === 0 &&
          this.getType === 3
        ) {
          this.Nolanding = true;
          this.$message("您还未设置过密码，无需重置密码");
        } else {
          this.Nolanding = false;
        }
        // 0 未设置密码， 1有密码
      }
    },
    // 获取emailcode
    async getEmailCode() {
      if (!this.checkEmail()) return;
      //  if (!this.checkPhone()) return;
      if (this.Nolanding && this.getType === 2) {
        this.$message("您已经设置过密码，请勿重复设置密码");
        return false;
      }
      if (this.Nolanding && this.getType === 3) {
        this.$message("您还未设置过密码，无需重置密码");
        return false;
      }
      if (this.curIntervalSeconds > 0) return;
      const res = await this.$ajax({
        type: "post",
        url: GO_URLS.sendEmail,
        params: {
          email: this.email,
          template_id: 1,
        },
      });
      if (res) {
        this.$message({
          message: "验证码已发送，请注意查看邮箱",
          type: "success",
        });
        this.curIntervalSeconds = this.maxIntervalSeconds;
        this.intervalHandle = setInterval(() => {
          if (this.curIntervalSeconds > 0) {
            this.curIntervalSeconds--;
          } else {
            clearInterval(this.intervalHandle);
          }
        }, 1000);
      }
    },
    // 检查是否设置过密码
    async checkisSetPwd() {
      const res = await this.$ajax({
        url: GO_URLS.isSetPwd,
        type: "post",
        params: {
          phone: this.phone,
        },
      });
      if (res) {
        if (res.data && res.data.is_set_pwd === 1 && this.getType === 0) {
          this.Nolanding = true;
          this.$message("您已经设置过密码，请勿重复设置密码");
        } else if (
          res.data &&
          res.data.is_set_pwd === 0 &&
          this.getType === 1
        ) {
          this.Nolanding = true;
          this.$message("您还未设置过密码，无需重置密码");
        } else {
          this.Nolanding = false;
        }
        // 0 未设置密码， 1有密码
      }
    },
    // 是否显示密码1
    changeOpen1() {
      this.openOrClose1 = !this.openOrClose1;
    },
    // 是否显示密码2
    changeOpen2() {
      this.openOrClose2 = !this.openOrClose2;
    },
    // 电话检测
    checkPhone() {
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$message.error("手机号码有误，请重填");
        return false;
      } else {
        return true;
      }
    },
    // Email检测
    checkEmail() {
      if (
        !/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(
          this.email
        )
      ) {
        this.$message.error("邮箱地址有误，请重填");
        return false;
      } else {
        return true;
      }
    },
    // 获取验证码
    async getCode() {
      if (!this.checkPhone()) return;
      if (this.Nolanding && this.getType === 0) {
        this.$message("您已经设置过密码，请勿重复设置密码");
        return false;
      }
      if (this.Nolanding && this.getType === 1) {
        this.$message("您还未设置过密码，无需重置密码");
        return false;
      }
      if (this.curIntervalSeconds > 0) return;
      const res = await this.$ajax({
        type: "post",
        url: GO_URLS.sendSms,
        params: {
          phone: this.phone,
          template_id: this.getType === 0 ? 1 : 1,
        },
      });
      if (res) {
        this.$message({
          message: "短信已发送",
          type: "success",
        });
        this.curIntervalSeconds = this.maxIntervalSeconds;
        this.intervalHandle = setInterval(() => {
          if (this.curIntervalSeconds > 0) {
            this.curIntervalSeconds--;
          } else {
            clearInterval(this.intervalHandle);
          }
        }, 1000);
      }
    },
    // 检测密码
    checkPassword() {
      if (
        this.passwordOne &&
        this.passwordTwo &&
        this.passwordOne === this.passwordTwo
      ) {
        return true;
      } else {
        this.$message.error("两次密码不一致，请检查密码");
        return false;
      }
    },
    //   设置密码
    async setPassword() {
      if (this.Nolanding && (this.getType === 0 || this.getType === 2)) {
        this.$message("您已经设置过密码，请勿重复设置密码");
        return false;
      }
      if (this.Nolanding && (this.getType === 1 || this.getType === 3)) {
        this.$message("您还未设置过密码，无需重置密码");
        return false;
      }
      if ((this.getType === 1 || this.getType === 0) && !this.checkPhone()) {
        return false;
      }
      if ((this.getType === 2 || this.getType === 3) && !this.checkEmail()) {
        return false;
      }
      if (this.code.length < 1) {
        this.$message.error("请输入验证码");
        return;
      }
      if (!this.checkPassword()) return;
      var data = {};
      if (this.getType === 2 || this.getType === 3) {
        data = {
          email: this.email,
          pwd: this.$md5(
            String(this.passwordTwo) +
              this.$md5(String(this.passwordTwo.length))
          ),
          code: this.code,
          code_type: 1,
        };
      } else if (this.getType === 1 || this.getType === 0) {
        data = {
          phone: this.phone,
          code_type: 0,
          pwd: this.$md5(
            String(this.passwordTwo) +
              this.$md5(String(this.passwordTwo.length))
          ),
          code: this.code,
        };
      }
      const res = await this.$ajax({
        type: "post",
        url: GO_URLS.setPwd,
        params: data,
      });
      if (res) {
        var message = "";
        if (this.getType === 0 || this.getType === 2) {
          message = "密码设置成功";
        } else if (this.getType === 1 || this.getType === 3) {
          message = "密码重置成功";
        }
        this.$message({
          message: message,
          type: "success",
        });
        this.goback();
      }
    },
    // 返回登录
    goback() {
      this.$emit("showLogin");
    },
  },
};
</script>
<style lang="less" scoped>
h1 {
  font-size: 30px;
  font-weight: 400;
  color: rgba(53, 53, 53, 1);
  line-height: 42px;
  text-align: center;
  margin: 0;
  margin-top: 96px;
  margin-bottom: 36px;
}
.input-password {
  position: relative;
  .icon {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 0;
    width: 18px;
    line-height: 2.8;
    height: 100%;
  }
}
.input-box {
  margin-bottom: 16px;
  /deep/ .el-input__inner {
    height: 44px !important;
    &::-webkit-input-placeholder {
      /* WebKit browsers */
      color: #797d84;
    }
    &:-moz-placeholder {
      color: #797d84;
    }
    &::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: #797d84;
    }

    &:-ms-input-placeholder {
      /* Internet Explorer 10+ */
      color: #797d84;
    }
  }
}
.input-box__code {
  position: relative;
  .btn {
    width: 104px;
    position: absolute;
    right: 10px;
    top: 10px;
    text-align: center;
    color: #989fa5;
    line-height: 25px;
    font-size: 12px;
    cursor: pointer;
    height: 25px;
    background: rgba(244, 244, 244, 1);
    border-radius: 3px;
  }
  .btn-js__active {
    color: #3f79fe;
  }
}
.sign-in-btn {
  width: 441px;
  height: 44px;
  background: rgba(63, 121, 254, 1);
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  line-height: 44px;
  color: white;
  text-align: center;
  &:hover {
    box-shadow: 0px 2px 6px 0px #4a90e2;
  }
}
.sign-in-btn--bgw {
  width: 441px;
  height: 44px;
  color: rgba(63, 121, 254, 1);
  line-height: 44px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
}
</style>