<template>
  <view class="login-container">
    <u-navbar :autoBack="true" :safeAreaInsetTop="true" :placeholder="true">
      <!-- <template slot="right">
        <view class="btn-register" @click="skipuRegister">开店</view>
      </template> -->
    </u-navbar>
    <view class="login-content">
      <view class="account-content">
        <view class="login-type">
          <view
            :class="['login-type-item', { active: loginType == 0 }]"
            @click="handleActiveLoginType(0)"
          >
            <view class="text">账号登录</view>
          </view>
          <view
            :class="['login-type-item', { active: loginType == 1 }]"
            @click="handleActiveLoginType(1)"
          >
            <view class="text">验证码登录</view>
          </view>
        </view>
        <view class="input-content">
          <view class="account-login">
            <u-input
              class="input-block"
              v-model="account"
              :type="isPHone ? 'number' : 'text'"
              :border="'false'"
              :color="'#555555'"
              :clearable="true"
              :maxlength="isPHone ? 11 : 99"
              :placeholder="placeholderArr[loginType]"
              :height="60"
              :auto-height="true"
              :placeholder-style="'color:#999999;'"
            >
              <template slot="prefix">
                <!-- <text class="input-label">
                  {{ isPHone ? "手机号" : "账号/手机号" }}
                </text> -->
                <u-icon
                  class="input_icon"
                  :name="isPHone ? 'phone' : 'account'"
                ></u-icon>
              </template>
            </u-input>
            <u-input
              class="input-block"
              v-model="password"
              :type="showPassWord()"
              :color="'#555555'"
              :border="'false'"
              :clearable="true"
              :placeholder="placeholderArr2[loginType]"
              :height="60"
              :auto-height="true"
              :placeholder-style="'color: #999999;'"
              :maxlength="showPassWord() == 'number' ? 4 : 99"
            >
              <template slot="prefix">
                <!-- <text class="input-label">
                  {{ loginType == 0 ? "密码" : "验证码" }}
                </text> -->
                <u-icon
                  class="input_icon"
                  :name="loginType == 0 ? 'lock' : 'email'"
                ></u-icon>
              </template>
              <template slot="suffix">
                <u-button
                  v-if="loginType == 1"
                  class="verify-btn"
                  :hair-line="false"
                  size="mini"
                  plain
                  @click="getSmsCode"
                >
                  {{ verifyText }}
                </u-button>
                <u-icon
                  name="eye"
                  v-if="[0, 2, 3].includes(loginType) && !showPwd"
                  :color="'#666'"
                  size="16"
                  @click="showPwd = !showPwd"
                ></u-icon>
                <u-icon
                  name="eye-fill"
                  v-if="[0, 2, 3].includes(loginType) && showPwd"
                  :color="'#666'"
                  size="16"
                  @click="showPwd = !showPwd"
                ></u-icon>
              </template>
            </u-input>
            <u-input
              v-if="loginType == 0"
              class="yan-zheng-ma-input-block"
              v-model="accountCode"
              :color="'#555555'"
              :border="'false'"
              :clearable="true"
              :placeholder="'请输入图形验证码'"
              :height="60"
              :auto-height="true"
              :placeholder-style="'color: #999999;'"
              style="margin-bottom: 20rpx"
              :maxlength="4"
            >
              <template slot="prefix">
                <u-icon class="input_icon" name="file-text"></u-icon>
              </template>
              <template slot="suffix">
                <u--image
                  :showLoading="true"
                  :src="verifyImgUrl"
                  width="120px"
                  height="40px"
                  @click="getVerifyCode"
                ></u--image>
              </template>
            </u-input>
          </view>
          <!-- <view class="tips-content">
            <view class="tips-item" @click="skipuRegister">立即注册</view>
            <view class="tips-item" @click="skipuForgetPwd">忘记密码？</view>
          </view> -->
        </view>

        <view class="btn-content">
          <view class="tool">
            <view v-if="loginType == 0" class="left" @click="skipuForgetPwd">
              忘记密码
            </view>
            <view class="right" @click="skipuRegister">
              没有店铺?
              <text>立即开店</text>
            </view>
          </view>
          <u-button
            class="btn-login"
            :ripple="true"
            :ripple-bg-color="'rgba(0, 0, 0, 0.15)'"
            :loading="isLoading"
            @click="handleLogin"
          >
            登录
          </u-button>
        </view>
        <!-- <view class="agreement-content">
          登录代表你已经同意
          <text @click="handerSkip()" class="agreement-item">《用户协议》</text>
        </view> -->
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { GetVerifyCode, GetSmsCode } from "@/api/login";
export default {
  name: "login",
  data() {
    return {
      account: "",
      password: "",
      isLoading: false,
      registerCode: "",
      loginType: 0,
      placeholderArr: [
        "请输入用户名",
        "请输入手机号",
        "请输入手机号",
        "请输入您的邮箱",
      ],
      placeholderArr2: [
        "请输入密码",
        "请输入验证码",
        "请输入密码",
        "请输入密码",
      ],
      verifyText: "获取验证码",
      time: 60,
      client_info: {},
      isPHone: false,
      isSMS: false,
      showPwd: false,
      verify_token: "",
      verifyImgUrl: "",
      accountCode: "",
    };
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  onShow() {
    if (this.userInfo && Object.keys(this.userInfo).length > 0) {
      console.log(this.userInfo);
      var _userinfo = JSON.parse(JSON.stringify(this.userInfo));
      let mobile = "";
      mobile = _userinfo.user_mobile.startsWith("+86")
        ? _userinfo.user_mobile.replace("+86", "")
        : _userinfo.user_mobile;

      this.checkAccountIsPass({ userInfo: _userinfo, mobile: mobile });

      return;
    }

    let time = uni.getStorageSync("loginSmsTime") || 0;
    if (time > 0) {
      this.verifyText = time;
      this.loadSmsTime();
    }
    this.getVerifyCode();
  },
  onHide() {},
  methods: {
    ...mapActions("user", [
      "GetLogin",
      "GetAccountLogin",
      "checkAccountIsPass",
    ]),
    loadSmsTime() {
      this.time = setInterval(() => {
        this.verifyText--;

        uni.setStorageSync("loginSmsTime", this.verifyText);

        if (this.verifyText == 0) {
          clearInterval(this.time);
          this.verifyText = "获取验证码";
          uni.removeStorageSync("loginSmsTime");
        }
      }, 1000);
    },
    skipuRegister() {
      uni.navigateTo({ url: "/pages/register/register" });
    },
    skipuForgetPwd() {
      uni.navigateTo({ url: "/pages/forgetPassword/forgetPassword" });
    },
    showPassWord() {
      if (this.loginType == 1) {
        return "number";
      }
      if ([0, 2, 3].includes(this.loginType) && !this.showPwd) {
        return "password";
      } else {
        return "text";
      }
    },
    handleActiveLoginType(index) {
      this.loginType = index;
      if ([1, 2].includes(this.loginType)) {
        this.isPHone = true;
      } else {
        this.isPHone = false;
      }
      this.account = "";
      this.password = "";
    },
    // 账号密码登录
    async accountLogin() {
      if (!this.account) {
        this.$refs["uToast"].show({
          message: "请输入手机号",
          type: "error",
          duration: 1000,
        });
        return;
      }
      if (!this.password) {
        this.$refs["uToast"].show({
          message: "请输入密码",
          type: "error",
          duration: 1000,
        });
        return;
      }
      if (!this.accountCode) {
        this.$refs["uToast"].show({
          message: "请输入验证码",
          type: "error",
          duration: 1000,
        });
        return;
      }

      let params = {
        user_account: this.account,
        user_password: this.password,
        verify_code: this.accountCode,
        verify_token: this.verify_token,
      };

      this.isLoading = true;
      await this.GetAccountLogin(params);
      this.isLoading = false;
    },
    // 验证码 登录 通用验证码为9999
    async smsLogin() {
      if (!this.account) {
        this.$refs["uToast"].show({
          message: "请输入手机号",
          type: "error",
          duration: 1000,
        });
        return;
      }
      if (!this.password) {
        this.$refs["uToast"].show({
          message: "请输入验证码",
          type: "error",
          duration: 1000,
        });
        return;
      }

      let params = {
        user_mobile: this.account,
        rand_key: this.account,
        verify_code: this.password,
      };
      this.isLoading = true;
      await this.GetLogin(params);
      this.isLoading = false;
    },
    async handleLogin() {
      switch (this.loginType) {
        case 0:
          await this.accountLogin();
          break;
        case 1:
          await this.smsLogin();
          break;
        case 2:
          await this.accountLogin();
          break;
        case 3:
          await this.accountLogin();
          break;
        default:
          break;
      }
    },
    async getSmsCode() {
      console.log(this.account);
      if (!this.account) {
        this.$refs["uToast"].show({
          message: "请输入手机号",
          type: "error",
          duration: 1000,
        });
        return;
      }
      if (!this.isValidPhoneNumber(this.account)) {
        this.$refs["uToast"].show({
          message: "请输入正确的手机号",
          type: "error",
          duration: 1000,
        });
        return;
      }

      let params = {
        number: this.account,
      };

      if (this.isSMS) return;

      this.verifyText = 60;
      this.isSMS = true;
      this.time = setInterval(() => {
        this.verifyText--;

        uni.setStorageSync("loginSmsTime", this.verifyText);

        if (this.verifyText == 0) {
          clearInterval(this.time);
          this.verifyText = "获取验证码";
          this.isSMS = false;
          uni.removeStorageSync("loginSmsTime");
        }
      }, 1000);

      await GetSmsCode(params);
    },
    async getVerifyCode() {
      this.verify_token = new Date().getTime();
      let res = await GetVerifyCode({ verify_token: this.verify_token });
      this.verifyImgUrl = `https://mall.gpxscs.cn/api/admin/shop/shop-base-config/image?verify_token=${this.verify_token}`;
    },
    handerSkip() {
      uni.navigateTo({
        url: "/pages/agreement/agreement",
      });
    },
    isValidPhoneNumber(phoneNumber) {
      // 定义正则表达式，校验中国大陆手机号码
      const phoneRegex = /^1[3-9]\d{9}$/;
      return phoneRegex.test(phoneNumber);
    },
    isValidEmail(email) {
      var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
      return emailRegex.test(email);
    },
  },
};
</script>

<style lang="scss">
.login-container {
  @import "@/styles/variables.scss";
  .btn-register {
    color: $base-color;
  }

  .login-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 88rpx);
    padding: 0 40rpx;

    .account-content {
      width: 100%;
      height: 450px;
    }

    .logo-block {
      width: 200rpx;
      height: 200rpx;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 auto;

      .logo-img {
        background-image: url("../../static/logo.jpg");
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
      }
    }

    .login-type {
      display: flex;
      align-items: center;
      margin-bottom: 36rpx;

      .login-type-item {
        position: relative;
        margin-right: 60rpx;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        font-weight: bold;
        font-size: 32rpx;
        color: #aaaaaa;
        .text {
          position: relative;
          z-index: 2;
        }
      }

      .login-type-line {
        border-left: 2px solid black; /* 左边框 */
        border-right: 0; /* 右边框 */
        border-top: 0; /* 上边框 */
        border-bottom: 0; /* 下边框 */
        height: 30px; /* 根据需要设置高度 */
      }

      .active {
        background: #fff;
        color: #000;
        font-size: 44rpx;

        &::before {
          position: absolute;
          content: "";
          left: 50%;
          transform: translateX(-50%);
          top: 70rpx;
          width: 40%;
          height: 10rpx;
          border-radius: 10px;
          background-color: $base-color;
          z-index: 1;
        }
      }
    }

    .input_icon {
     ::v-deep .u-icon__icon {
        font-size: 36rpx !important;
      }
    }

    .input-content {
      .u-input {
        height: 96rpx;
        border-bottom: 1px solid rgba(100, 100, 100, 0.1);
        border-radius: 0%;
        color: #555555;
        padding: 0 !important;
      }

      .yan-zheng-ma-input-block {
        padding-right: 0 !important;
      }

      .input-label {
        min-width: 100rpx;
        margin-right: 20px;
      }
    }

    .tips-content {
      display: flex;
      justify-content: space-between;
      margin: 0 48rpx;
      font-size: 28rpx;
      color: $base-color;
    }

    .btn-content {
      margin-top: 30rpx;

      .btn-login {
        width: 100%;
        height: 80rpx;
        border: none;
        letter-spacing: 10rpx;
        font-size: 28rpx;
        background: $base-color;
        color: #fff;
        border-radius: 10rpx;
        margin-top: 80rpx;
      }

      .tool {
        display: flex;
        justify-content: flex-end;
        font-size: 26rpx;
        color: #7f7f7f;
        .left {
          flex: 1;
        }
        .right {
          display: flex;
          text {
            color: $base-color;
            margin-left: 10rpx;
            display: inline-block;
          }
        }
      }
    }

    .agreement-content {
      position: fixed;
      bottom: 10%;
      width: 90%;
      text-align: center;
      font-size: 28rpx;
      color: #ccc;

      .agreement-item {
        color: $base-color;
      }
    }

    .third-party-content {
      margin: 40rpx 0;

      .title-block {
        display: flex;
        align-items: center;
        padding: 24rpx 20%;
        color: #949494;
        margin-bottom: 20px;

        .title-text {
          padding: 0 20rpx;
        }

        .title-line {
          flex-grow: 1;
          height: 1px;
          background-color: #949494;
        }
      }
    }

    .third-party-img-block {
      display: flex;
      justify-content: space-evenly;
    }

    .verify-btn {
      height: 64rpx;
      font-size: 28rpx;
      border: none;
      color: $base-color;

      &::after {
        border: none;
      }
    }
  }

  @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
    .login-content {
      padding: 10rpx 60rpx 0 60rpx;

      .account-content {
        margin-top: 40rpx !important;
        background: red;
      }
    }
  }
}
</style>
