<template>
   
  <view class="page commonPage"
    ><public-module></public-module>

    <!-- 公共组件-每个页面必须引入 -->
    <view class="logo_bg"
      ><z-nav-bar title="" bgColor="none" fontColor="#fff"></z-nav-bar>
      <view class="title PM_font">忘记密码</view>
      <!-- <image
        src="@/static/icon/login_icon_1.png"
        mode="aspectFit"
        class="icon_hua_1"
      ></image>
      <image
        src="@/static/icon/login_icon_2.png"
        mode="aspectFit"
        class="icon_hua_2"
      ></image> -->
    </view>
    <!-- 验证码登录 -->
    <view class="register_page">
      <input type="password" style="width: 0; height: 0; min-height: 0" />
      <input
        type="text"
        autocomplete="off"
        style="width: 0; height: 0; min-height: 0"
      />
      <view class="flexbox" style="margin-top: 50rpx">
        <view
          class="input_tit emaPho"
          style="margin-top: 0; margin-right: 20rpx"
        >
          <view
            @click="handleChangeIsPassWordPhone"
            :class="{ active: isPassWordPhone }"
            >手机号</view
          >
          <span>/</span>
          <view
            @click="handleChangeIsPassWordPhone"
            :class="{ active: !isPassWordPhone }"
            >邮箱</view
          >
        </view>
      </view>
      <!-- 带区号手机号 -->
      <view
        class="flexbox"
        v-if="isPassWordPhone"
        style="margin: 36rpx 0; justify-content: space-between"
      >
        <view class="quhao">
          <uni-data-select
            class="myselect"
            placeholder="请选择区号"
            v-model="resetForm.quCode"
            :localdata="quCodeList"
            style="height: 30rpx !important"
            @change="quChange"
          ></uni-data-select>
        </view>
        <view
          class="triangle borderBottom phoneNumberInput"
          :clasfs="[type == 1000 ? 'left_triangle' : 'right_triangle']"
        >
          <u--input
            class="form_input_box"
            type="number"
            v-model="resetForm.phone"
            placeholder="请输入您的手机号"
            placeholder-class="grey"
          />
        </view>
      </view>

      <view class="input_box" v-else>
        <u--input
          class="form_input_box"
          v-model="resetForm.phone"
          placeholder="请输入您的邮箱"
          placeholder-class="grey"
        />
      </view>
      <view class="input_tit">验证码</view>
      <view class="input_box">
        <u--input
          type="number"
          class="form_input_box"
          v-model="resetForm.code"
          placeholder="请输入验证码"
          placeholder-class="grey"
          @input="onInput"
          maxlength="6"
        />
        <button class="sendCode" @click="getCode" size="mini">
          {{ codeText }}
        </button>
      </view>

      <view class="input_tit">密码</view>
      <view class="input_box">
        <u--input
          class="form_input_box"
          type="password"
          maxlength="8"
          v-model="resetForm.password"
          placeholder="请输入密码"
          @input="inputMethod(resetForm.password)"
        />
      </view>
      <view class="input_tit">确认密码</view>
      <view class="input_box">
        <u--input
          type="password"
          class="form_input_box"
          maxlength="8"
          v-model="resetForm.confirmPassword"
          placeholder="请确认密码"
        />
      </view>

      <view class="btn_box"
        ><button @click="onSubmit">提 交</button></view
      ></view
    >
    <!-- <view class="bg_box_shandow color_shandow forget_box">
      <input type="password" style="width: 0; height: 0; min-height: 0" />
      <input
        type="text"
        autocomplete="off"
        style="width: 0; height: 0; min-height: 0"
      />
      <view class="input_box">
        <text class="input_tit">{{ isPassWordPhone ? "手机号" : "邮箱" }}</text>
        <u--input
          type="text"
          class="form_input_box"
          v-model="resetForm.phone"
          :placeholder="`请输入${isPassWordPhone ? '手机号' : '邮箱'}`"
        >
          <template slot="suffix">
            <u-icon
              name="phone-fill"
              color="#3AB3AE"
              size="26"
              v-if="isPassWordPhone"
              @click="handleChangeIsPassWordPhone"
            ></u-icon>
            <u-icon
              size="26"
              name="email-fill"
              color="#3AB3AE"
              v-else
              @click="handleChangeIsPassWordPhone"
            ></u-icon> </template
        ></u--input>
      </view>
      <view class="input_box">
        <text class="input_tit">验证码</text>
        <u--input
          type="number"
          class="form_input_box"
          v-model="resetForm.code"
          placeholder="请输入验证码"
          placeholder-class="grey"
          @input="onInput"
          maxlength="6"
        />
        <button class="sendCode" @click="getCode" size="mini">
          {{ codeText }}
        </button>
      </view>
      <view class="input_box">
        <text class="input_tit">密码</text>

        <u--input
          class="form_input_box"
          type="password"
          maxlength="8"
          v-model="resetForm.password"
          placeholder="请输入密码"
          @input="inputMethod(resetForm.password)"
        />
      </view>
      <view class="" style="font-size: 28rpx; color: #999">
        <p v-if="note != ''">{{ note }}</p>
        <p v-html="str2" style="margin-top: 10rpx"></p>
      </view>
      <view class="input_box">
        <text class="input_tit">确认密码</text>
        <u--input
          type="password"
          class="form_input_box"
          maxlength="8"
          v-model="resetForm.confirmPassword"
          placeholder="请确认密码"
        />
      </view>
    </view> -->

    <music-play :playData="playData"></music-play>
  </view>
</template>
<script>
import musicPlay from "@/components/music.vue";
import md5 from "@/plugins/md5";
// 密码验证的正则
//1、密码为八位及以上并且字母数字特殊字符三项都包括
var strongRegex = new RegExp(
  "^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$",
  "g",
);
//2、密码为八位及以上并且字母、数字、特殊字符三项中有两项，强度是中等
var mediumRegex = new RegExp(
  "^(?=.{8,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[a-z])(?=.*\\W))|((?=.*[0-9])(?=.*\\W))|((?=.*[A-Z])(?=.*\\W))).*$",
  "g",
);

var enoughRegex = new RegExp("(?=.{8,}).*", "g");
var clear;
export default {
  data() {
    return {
      quCodeList: [], // 国家区域码
      isPassWordPhone: true,
      resetForm: {},
      playData: {},

      codeText: "获取验证码",
      //验证码已发
      readonly: false,
      passwordOk: false,
      note: "",
      str2: "",
      urlList: {
        sendcode: "common/user/sms/sendcode", //密码登录
        sendEmailcode: "common/user/getMailCaptcha", //密码登录
        setPassword: "common/user/setPasswordByCode", //重置密码
      },
    };
  },
  //第一次加载
  onLoad(e) {
    this.getCountyCode();
  },
  //页面显示
  onShow() {},
  components: {
    musicPlay,
  },
  //方法
  methods: {
    // 获取国家区域编码
    getCountyCode() {
      console.log(111111);
      this.$http
        .request({
          url: "book/baseArea/getAllBaseArea",
          method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
          data: {},
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          if (res.code == 0 && res.baseAreas.length > 0) {
            this.quCodeList = res.baseAreas.map((item) => {
              let obj = {
                text: item.title + " (+" + item.code + ")",
                value: item.code,
              };
              return obj;
            });
            this.resetForm.quCode = this.quCodeList[0].value;
            this.$forceUpdate();
          } else {
            this.quCodeList = [];
          }
        })
        .catch((e) => {
          console.log(e, "e");
        });
    },
    handleChangeIsPassWordPhone() {
      this.resetForm = {};
      this.note = null;
      this.isPassWordPhone = !this.isPassWordPhone;

      this.resetForm.quCode = this.quCodeList[0].value;
      this.OpenClear();
    },
    // 密码验证
    inputMethod(value) {
      this.passwordOk = false;
      // console.log('输入的值为：', value)
      if (strongRegex.test(value)) {
        //console.log('强密码-----',value)
        this.str2 = "<span style='color:#18bc37'>密码强度很不错哦！</span>";
        // this.note = '请至少使用大小写字母、数字、符号两种类型组合的密码，长度至少为8位。'
        this.note = "";
        this.passwordOk = true;
      } else if (mediumRegex.test(value)) {
        // console.log('中等密码-----',value)
        this.note =
          "请至少使用大小写字母、数字、符号两种类型组合的密码，长度为8位。";
        this.str2 = "<span style='color:#117e4c'>密码强度中等!</span>";
        this.passwordOk = true;
      } else if (enoughRegex.test(value)) {
        // console.log('弱密码-----',value)
        // this.str2 = "<span style='color:#f3a73f'>密码强度太弱!</span>"
        this.note =
          "请至少使用大小写字母、数字、符号两种类型组合的密码，长度为8位。";
      } else {
        this.passwordOk = false;
        this.note =
          "请至少使用大小写字母、数字、符号两种类型组合的密码，长度为8位。";
        this.str2 = "";
        //console.log('密码-----',value)
      }
    },
    //获取验证码
    async getCode() {
      var data = {};
      if (this.readonly) {
        this.$commonJS.showToast("验证码已发送");

        return;
      }

      if (this.isPassWordPhone) {
        data.phone = this.resetForm.phone;
        if (!this.resetForm.phone) {
          this.$commonJS.showToast("请输入手机号");

          return;
        }

        if (!this.$base.phoneRegular.test(this.resetForm.phone)) {
          this.$commonJS.showToast("手机号格式不正确");

          return;
        }
      } else {
        data.email = this.resetForm.phone;

        if (!this.resetForm.phone) {
          this.$commonJS.showToast("请输入邮箱");

          return;
        }

        if (!this.$base.mailRegular.test(this.resetForm.phone)) {
          this.$commonJS.showToast("邮箱格式不正确");

          return;
        }
      }

      await this.$http
        .post(
          this.isPassWordPhone
            ? this.urlList.sendcode
            : this.urlList.sendEmailcode,
          data,
        )
        .then((res) => {
          this.getCodeState();
        });
    },
    //验证码按钮文字状态
    getCodeState() {
      const _this = this;
      this.readonly = true;
      this.codeText = "60S后重新获取";
      var s = 60;
      clear = setInterval(() => {
        s--;
        _this.codeText = s + "S后重新获取";
        if (s <= 0) {
          clearInterval(clear);
          _this.codeText = "获取验证码";
          _this.readonly = false;
        }
      }, 1000);
    },
    // 清除验证码
    OpenClear() {
      clearInterval(clear);
      this.codeText = "获取验证码";
      this.readonly = false;
    },
    onSubmit() {
      var data = {};
      if (this.isPassWordPhone) {
        data.phone = this.resetForm.phone;
        if (!this.resetForm.phone) {
          this.$commonJS.showToast("请输入手机号");

          return;
        }
        // this.resetForm
        console.log("this.resetForm at line 402:", this.resetForm);
        if (this.loginForm.quCode == null || this.loginForm.quCode == 86) {
          if (!this.$base.phoneRegular.test(this.resetForm.phone)) {
            this.$commonJS.showToast("手机号格式不正确");

            return;
          }
        }
      } else {
        data.email = this.resetForm.phone;

        if (!this.resetForm.phone) {
          this.$commonJS.showToast("请输入邮箱");

          return;
        }

        if (!this.$base.mailRegular.test(this.resetForm.phone)) {
          this.$commonJS.showToast("邮箱格式不正确");

          return;
        }
      }

      if (!this.resetForm.code) {
        this.$commonJS.showToast("请输入验证码");

        return;
      }
      if (!this.resetForm.password) {
        this.$commonJS.showToast("请输入密码");

        return;
      }
      if (!this.resetForm.confirmPassword) {
        this.$commonJS.showToast("请输入确认密码");

        return;
      }
      if (this.resetForm.confirmPassword != this.resetForm.password) {
        this.$commonJS.showToast("两次密码不一致");

        return;
      }
      if (!this.$base.passwordRegular.test(this.resetForm.password)) {
        this.$commonJS.showToast("请输入不少于6位且包含数字和字母的密码");

        return;
      }

      if (!this.passwordOk) {
        console.log("不满足密码格式", this.note);
        this.$commonJS.showToast(this.note);
        return;
      }

      this.$http
        .post(this.urlList.setPassword, {
          phone: this.resetForm.phone,
          code: this.resetForm.code,
          password: this.resetForm.password,
        })
        .then((res) => {
          if (res.code == 0) {
            this.$commonJS.showToast("密码修改成功！");
            setTimeout(() => {
              uni.navigateBack();
            }, 1000);
          }
        });
    },
  },
  //页面隐藏
  onHide() {},
  //页面卸载
  onUnload() {},
  //页面下来刷新
  onPullDownRefresh() {},
  //页面上拉触底
  onReachBottom() {},
  //用户点击分享
  onShareAppMessage(e) {
    return this.wxShare();
  },
};
</script>
<style lang="scss" scoped>
@import "@/style/mixin.scss";

.page {
  .title {
    padding: 60rpx 0 80rpx 0;
    font-size: 80rpx;
    // color: #018f89;
    color: #fff;
    // color: #333333;
  }

  .input_box {
    display: flex;
    justify-content: space-between;
    height: 100rpx;
    padding-top: 0rpx;
    border-bottom: 1rpx solid #eeeeee;
    align-items: center;

    text {
      font-size: 30rpx;
      width: 180rpx;
    }

    input {
      flex: 1;
      height: 70rpx;
      line-height: 70rpx;
      font-size: 30rpx;
    }

    button {
      height: 78rpx;
      line-height: 78rpx;
      font-size: 30rpx;
      color: $themeColor;

      &:active {
        background-color: transparent;
      }
    }
  }

  .btn_box {
    width: calc(100% - 100rpx);
    left: 50rpx;
    position: absolute;
    bottom: 8vh;
    // margin-top: 150rpx;

    button {
      font-size: 32rpx;
      @include theme("btn_bg") color: #fff;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 50rpx;
    }
  }

  .protocol {
    font-size: 24rpx;
    color: #999999;
    text-align: center;
    margin-top: 20rpx;

    text {
      color: $themeColor;
    }
  }
}

.commonPage {
  padding: 0;
  background: #fff;
}

.forget_box {
  padding: 0 40rpx;
  background: #fff;

  padding-bottom: 40rpx;
}

.logo_bg {
  background-image: url("@/static/icon/login_bg.png");
  // background-position: center center;
  padding: 0 40rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 25vh;
  position: relative;

  text {
    font-size: 45upx;
    line-height: 65rpx;
    position: absolute;
    bottom: 110rpx;
    left: 60rpx;
    color: #fff;
    letter-spacing: 6rpx;
  }

  .icon_hua_1 {
    position: absolute;
    bottom: 60rpx;
    left: 245rpx;
    width: 150rpx;
    height: 150rpx;
    opacity: 0.08;
  }

  .icon_hua_2 {
    position: absolute;
    bottom: 10rpx;
    right: 30rpx;
    width: 250rpx;
    height: 250rpx;
    opacity: 0.15;
  }
}
.phoneNumberInput {
  width: calc(100% - 160rpx);
  // width: 100%;
  height: 67rpx;

  input {
    font-size: 28rpx;
    margin: 20rpx 0;
  }
}

.borderBottom {
  border-bottom: 1px solid #efeef4;
}

.flexbox {
  display: flex;
}

.quhao {
  height: 50rpx;
  width: 290rpx;
  margin: 12rpx 15rpx 0 0;
}

.myselect {
  width: 240rpx;
  height: 50rpx !important;

  /deep/.uni-select {
    font-size: 24rpx;
  }

  /deep/.uni-select__selector-item {
    font-size: 24rpx;
    // padding: 0 10rpx;
  }
}

.highlight {
  color: $themeColor;
}

.tanchu {
  padding: 40rpx 30rpx 40rpx 30rpx;
  position: relative;
}

.logo_bg {
  background-image: url("@/static/icon/login_bg.png");
  // background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 25vh;
  position: relative;

  text {
    font-size: 45upx;
    line-height: 65rpx;
    position: absolute;
    bottom: 110rpx;
    left: 60rpx;
    color: #fff;
    letter-spacing: 6rpx;
  }

  .icon_hua_1 {
    position: absolute;
    bottom: 60rpx;
    left: 245rpx;
    width: 150rpx;
    height: 150rpx;
    opacity: 0.08;
  }

  .icon_hua_2 {
    position: absolute;
    bottom: 10rpx;
    right: 30rpx;
    width: 250rpx;
    height: 250rpx;
    opacity: 0.15;
  }
}

.register_page {
  padding: calc(var(--status-bar-height)) 50rpx 40rpx;
  background-color: #fff;
  min-height: 75vh;

  .login_method {
    // display: flex;
    justify-content: space-between;
    padding: 0 96rpx;
    // padding-bottom: 5rpx;
    text-align: center;

    .title {
      margin: 0 auto;
      font-size: 40rpx;
      letter-spacing: 3rpx;
      color: #666;

      &.active {
        position: relative;
        color: $themeColor;
        padding-bottom: 35rpx;
        font-weight: bold;
      }

      &.active::after {
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        position: absolute;
        content: "";
        width: 150rpx;
        height: 6rpx;
        background-color: $themeColor;
      }
    }
  }

  .left_triangle {
    &::before {
      left: 140rpx;
    }

    &::after {
      left: 140rpx;
    }
  }

  .right_triangle {
    &::before {
      left: 470rpx;
    }

    &::after {
      left: 470rpx;
    }
  }

  .input_tit {
    margin-top: 40rpx;
    font-size: 34rpx;
    font-weight: bold;
    color: $themeColor;
  }

  .emaPho {
  }

  .emaPho > view {
    display: inline-block;
    padding: 10rpx 0;
    color: #888;
  }

  .emaPho > view.active {
    color: $themeColor;
    padding: 10rpx 10rpx;
    border-bottom: 2px solid $themeColor;
    font-weight: bold;
  }

  .emaPho > span {
    display: inline-block;
    margin: 0 30rpx;
    color: #ccc;
  }

  .input_box {
    display: flex;
    align-items: center;
    border-radius: 8rpx;
    border-bottom: solid 2rpx #efeef4;
    // margin: 30rpx 0;

    image {
      width: 36rpx;
      height: 24rpx;
    }

    input {
      flex: 1;
      font-size: 28rpx;
      color: #333;
      height: 70rpx;
    }

    .input_item {
      font-size: 28rpx;
      border: 0px;
      flex: 1;
      // background-color: #f8f9fb;
      height: 70rpx;
      width: 100%;
      outline: none;
      //margin-left: 32rpx;
    }

    button {
      height: 60rpx;
      background-color: #f8f9fb;
      font-size: 28rpx;
      padding: 0 14rpx;
      color: $themeColor;
      line-height: 60rpx;
      margin-left: 20rpx;
      //margin-right: 40rpx;
    }

    .grey {
      color: #999999;
    }
  }

  .btn_box {
    // margin-top: 150rpx;

    button {
      font-size: 32rpx;
      background-color: #e5e5e5;
      color: #fff;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 50rpx;

      &.active {
        @include theme("btn_bg") color: #fff;
      }
    }
  }

  .password_register {
    margin-top: 40rpx;
    display: flex;
    justify-content: space-between;
    //text-align: center;

    text {
      font-size: 28rpx;
      color: #333333;
      //text-decoration: underline;
    }
  }

  .protocol_box {
    margin-top: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 28rpx;
    color: #333333;

    .select {
      width: 36rpx;
      height: 36rpx;
      background-image: url("@/static/icon/ic_gender_unselected.png");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100% auto;
      margin-right: 15rpx;

      &.active {
        background-image: url("@/static/icon/ic_agreed.png");
      }
    }

    > text {
      color: $themeColor;
    }
  }
}

.station {
  height: 230rpx;
}

.third_party_login_box {
  position: fixed;
  bottom: 60rpx;
  width: 100%;
  left: 0;
  padding: 0 30rpx;

  .third_party_title {
    display: flex;
    align-items: center;

    &:before,
    &:after {
      content: "";
      flex: 1;
      height: 2rpx;
      background-color: #f5f5f5;
    }

    text {
      font-size: 24rpx;
      color: #999999;
      flex-shrink: 0;
      padding: 0 20rpx;
    }
  }

  .third_party_content {
    margin-top: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    image {
      width: 80upx;
      height: 80upx;
      margin: 0 20rpx;
    }
  }
}

.popup_box {
  width: 600upx;
  border-radius: 10rpx;

  .popup_title {
    display: flex;
    justify-content: center;
    height: 88upx;
    line-height: 88upx;

    view {
      align-items: center;
      font-size: 30upx;
      display: flex;

      image {
        width: 50upx;
        height: 50upx;
        margin: 0 20rpx 0 0;
      }
    }
  }

  .popup_content {
    padding: 30rpx 40rpx;
  }

  .popup_footer {
    display: flex;
    justify-content: center;

    view {
      width: 45%;
      flex-shrink: 0;
      text-align: center;
      font-size: 28upx;
      color: #999;
      line-height: 70upx;
      margin: 0 0 30rpx 0;
    }

    view:last-child {
      background-color: $themeColor;
      color: #fff;
      border-radius: 50rpx;
    }
  }
}

.dp_title {
  font-size: 36rpx;
  margin-bottom: 50rpx;
  color: #555;
  text-align: center;
  font-weight: bold;
}

.dp_content {
  max-height: 1000rpx;
  overflow-y: scroll;
  font-size: 28rpx;
  color: #555;
  line-height: 45rpx;

  .dp_con1 {
    font-weight: bold;
    font-size: 32rpx;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
  }

  // 	.dp_con2 {
  // 		font-size: 30rpx;
  // 		margin-top: 10rpx;
  // 		margin-bottom: 10rpx;
  // 	}
}

.qie_huan {
  font-size: 26rpx;
  margin: 20rpx 0 0 0;
  text-align: center;
}

.comTy {
  font-size: 28rpx;
  line-height: 46rpx;
  text-align: left;
}

.youKeL {
  display: flex;
  justify-content: center;
  margin: 30rpx 0 0 0;
  font-size: 26rpx;
  color: $themeColor;

  view {
    font-weight: bold;
    border: 1px solid $themeColor;
    border-radius: 10rpx;
    padding: 5rpx 15rpx;
  }
}
</style>
