<template>
  <div class="main">
    <div class="content">
      <div class="pageTitle">欢迎登录</div>

      <div class="loginTypeTab">
        <div :class="loginType === 2 ? 'typeTab selectTab' : 'typeTab'" @click="handleChangeLoginType(2)">
          手机号登录
        </div>
        <div :class="loginType === 1 ? 'typeTab selectTab' : 'typeTab'" @click="handleChangeLoginType(1)">
          密码登录
        </div>
      </div>

      <div class="messageBox">
        <div class="phoneBox">
          <image class="phoneIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/detailPhone.png" />
          <input class="phoneText" placeholder="请输入手机号" style="font-size: 32rpx" v-model="phone"
            @input="validatePhone" />
        </div>
        <div class="phoneError">{{ errorMessage }}</div>
        <div class="codeBox" v-if="loginType === 1">
          <image class="codeIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/passwordICon.svg" />
          <input v-model="password" class="passwordText" placeholder="请输入密码" style="font-size: 32rpx" />
        </div>
        <div class="codeBox" v-if="loginType === 2">
          <image class="codeIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/codeIcon.svg" />
          <input v-model="code" class="codeText" placeholder="请输入验证码" style="font-size: 32rpx" />
          <div :style="{ color: isRight ? '#130F05' : '#b8b7b4' }" class="haveCode" @click="handleGetCode"
            v-if="!pendCode">
            获取验证码
          </div>
          <div v-if="pendCode">{{ second ? second + "s" : "" }}</div>
        </div>
      </div>

      <div class="agreementBox">
        <radio class="radioBox" :value="isAgree" :checked="isAgree" color="#BA922F" :size="16"
          @click="handleChangeAgree" />
        <span class="normal">我已阅读并同意</span>
        <span class="light">服务协议</span>
        <span class="normal">和</span>
        <span class="light">隐私协议</span>
      </div>

      <div class="loginBox" :style="{
        background:
          isAllRight && isClick
            ? 'rgba(186, 146, 47, 1)'
            : 'rgba(186, 146, 47, 0.5)',
      }" @click="handleLogin">
        登录
      </div>

      <div class="goRegister">
        <span class="normal">还没账号？</span>
        <span class="light" @click="handleGoRegister">立即注册</span>
      </div>


      <!-- {{ errorText }} -->

      <div v-if="false">
        <div>
          <div>手机号码：</div>
          <div class="inputBG">
            <input type="number" maxlength="11" placeholder="请输入手机号码" v-model="phone" @input="validatePhone" />
          </div>
          <div>
            {{ errorMessage }}
          </div>
        </div>
        <div>
          <input v-if="loginType === 2" type="number" placeholder="请输入验证码" v-model="code" />
          <input v-if="loginType === 1" placeholder="请输入密码" v-model="password" />

          <span v-if="loginType === 2" @click="handleGetCode">点击获取验证码</span>

          <span style="margin-left: 8px" @click="handleSelectLoginType">{{
            loginType === 1 ? "验证码登录" : "密码登录"
          }}</span>
        </div>

        <div>
          <div @click="handleLogin">登录</div>
        </div>
      </div>
    </div>

    <!-- {{result}} -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      result: "",
      phone: "", //手机号码
      password: "", // 密码
      errorMessage: "", //手机号码校验
      code: "", // 验证码
      isRight: false,
      loginType: 2, // 1 密码登录  2 验证码登录 3 微信登录
      isAgree: false, //协议是否同意
      // isAllRight: false, // 判断登录条件是否都正确
      pendCode: false, // 验证码的等待
      second: 60, // 剩余秒数
      isClick: true, // 判断当前是否变点击了
      timer: null,// 定时器
      errorText: "",// 验证码的报错信息
    };
  },
  onload() {
    // const myPlugin = uni.requireNativePlugin('YourPluginName');
    // myPlugin.someMethod({
    // 	appId: '__UNI__1654740',
    // 	appKey: 'value2'
    // }, (result) => {
    // 	if (result.success) {
    // 		console.log('操作成功:', result);
    // 		this.result = result
    // 	} else {
    // 		console.error('操作失败:', result.error);
    // 		this.result = result
    // 	}
    // });
    this.$utils.addUserBehaviorNew();
  },
  computed: {
    isAllRight() {
      return this.loginType === 2
        ? this.isRight && this.code && this.isAgree
        : this.loginType === 1
          ? this.isRight && this.password && this.isAgree
          : false;
    },
  },
  onUnLoad() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    // 去注册
    handleGoRegister() {
      uni.navigateTo({ url: "/pages/login/register" });
    },
    handleChangeAgree() {
      this.isAgree = !this.isAgree;
    },
    handleChangeLoginType(value) {
      this.loginType = value;
    },
    //  切换登录方式
    handleSelectLoginType() {
      if (this.loginType === 1) {
        this.loginType = 2;
      } else {
        this.loginType = 1;
      }
    },
    validatePhone() {
      const phonePattern = /^1[3-9]\d{9}$/; // 中国大陆手机号校验规则
      if (!phonePattern.test(this.phone)) {
        this.errorMessage = "手机号格式不正确";
        this.isRight = false;
      } else {
        this.errorMessage = "";
        this.isRight = true;
      }
    },
    // 得到验证码
    async handleGetCode() {
      let _this = this;
      console.log("this.phone", this.phone);
      console.log("this.isRight", this.isRight);
      console.log("pendCode:", this.pendCode)
      if (this.isRight && this.phone) {
        const req = {
          action_type: "GetSMSIdentityCode",
          action_data: _this.phone,
          time: Date.now()
        }
        console.log("reqreqreqreq", req);
        const res = await this.$api.$getLogin(req)
        console.log("resresresresres", res);
        let obj = res.ResultObject[0];
        if (obj.ResultCode === '100') {
          _this.pendCode = true;
          // 计时器
          _this.handleSetInter();
          _this.currentCode = obj.FirstParameter;
        } else {
          uni.showToast({
            title: obj.ResultDesc,
            icon: 'none'
          })
        }
      } else {
        uni.showToast({
          title: "请检查输入的手机号",
          duration: 2000,
          icon: "none",
        });
      }
    },
    // 计时器
    handleSetInter() {
      let _this = this;
      if (this.timer) {
        clearInterval(this.timer);
      }
      _this.second = 60;
      _this.timer = setInterval(() => {
        if (_this.second === 1) {
          _this.pendCode = false;
          // setTimeout(timer);
          _this.second = 60;
          clearInterval(this.timer);
        } else {
          _this.second = _this.second - 1;
        }
      }, 1000);
    },
    // 登录
    handleLogin() {
      if (!this.isAllRight) {
        return;
      }
      // 限制不能连续点击
      if (!this.isClick) {
        return;
      }
      this.isClick = false;
      let _this = this;
      const req = {
        action_type: "Login",
        APPGuid: "2693711a-72eb-48dc-b3dc-5122424e8fd4",
        login_type: this.loginType,
        mobile: this.phone,
        SourcePlatform: "APP",
        password: this.loginType === 1 ? this.password : "",
        code: this.loginType === 2 ? this.code : "",
        ownerUnitId: 249,
        provinceCode: "340000",
      };

      // getCoop
      this.$api.getCoop(req).then(function (res) {
        console.log("res", res);
        // uni.showModal({
        //   title: res.ResultObject.ResultDesc
        // })
        // _this.errorText = JSON.stringify(res)

        _this.$store.commit("setUser", res.Data);
        if (res.ResultCode === "100") {
          _this.$api
            .getCoop({
              action_type: "GetMembershipInfo",
              WechatUserId: res.Data.MemberShipID,
              MembershipId: res.Data.MemberShipID,
              Membership_Id: res.Data.MemberShipID,
            })
            .then(function (result) {
              uni.showToast({
                title: "登录成功",
                duration: 1000,
                icon: "none",
              });
              _this.$store.commit("setUser", result.Data);
              uni.setStorageSync("userInfo", result.Data);

              console.log("resultresultresultresult", result);

              setTimeout(() => {
                _this.isClick = true;
                if (result.ResultCode === "100") {
                  // uni.switchTab({
                  //   url: "/pages/home/index",
                  // });
                  uni.navigateBack({
                    delta: 1,
                  });
                }
              }, 1000);
            });
        } else {
          uni.showToast({
            title: res.ResultDesc,
            icon: 'none'
          })
          _this.isClick = true;
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.main {
  width: 100vw;
  height: 100vh;

  .content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 16rpx 48rpx;

    .pageTitle {
      width: 100%;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 48rpx;
      color: #130f05;
      line-height: 64rpx;
      text-align: left;
      font-style: normal;
    }

    .loginTypeTab {
      width: 100%;
      margin-top: 48rpx;
      display: flex;
      align-items: center;

      .typeTab {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #716f69;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
        margin-right: 64rpx;
        height: 60rpx;
      }

      .selectTab {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #130f05;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
        position: relative;
      }

      .selectTab::after {
        content: "";
        width: 2rem;
        height: 6rpx;
        background: #ba922f;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .messageBox {
      margin-top: 24rpx;

      .phoneBox {
        padding: 32rpx 0;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f5f6f7;

        .phoneIcon {
          width: 32rpx;
          height: 32rpx;
          margin-right: 16rpx;
        }

        .phoneText {
          width: calc(100% - 48rpx);
          color: #130f05;
        }
      }

      .phoneError {
        color: red;
        font-size: 24rpx;
      }

      .codeBox {
        padding: 32rpx 0;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f5f6f7;

        .codeIcon {
          width: 32rpx;
          height: 32rpx;
          margin-right: 16rpx;
        }

        .codeText {
          width: calc(100% - 200rpx);
        }

        .passwordText {
          width: calc(100% - 48rpx);
        }

        .haveCode {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #b8b7b4;
          line-height: 40rpx;
          text-align: right;
          font-style: normal;
        }
      }
    }

    .agreementBox {
      margin-top: 40rpx;
      margin-bottom: 24rpx;
      width: 100%;

      .radioBox {
        transform: scale(0.7);
      }

      .normal {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #716f69;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
      }

      .light {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #ba922f;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
        margin: 0 8rpx;
      }
    }

    .loginBox {
      width: 100%;
      border-radius: 6rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #ffffff;
      line-height: 44rpx;
      text-align: center;
      font-style: normal;
      padding: 22rpx 0;
    }

    .goRegister {
      margin-top: 40rpx;
      width: 100%;
      display: flex;
      justify-content: center;

      .normal {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #716f69;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
      }

      .light {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #ba922f;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
      }
    }
  }
}
</style>