<template>
  <div class="main">
    <div class="content">
      <div class="pageTitle">欢迎注册</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">
          <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">
          <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="handleRegister"
      >
        注册
      </div>

      <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 placeholder="请输入密码" v-model="password" />

          <input
            v-if="loginType === 2"
            type="number"
            placeholder="请输入验证码"
            v-model="code"
          />
          <span v-if="loginType === 2" @click="handleGetCode"
            >点击获取验证码</span
          >

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

        <div>
          <div @click="handleRegister">注册</div>
        </div>
      </div>
    </div>

    <!-- {{result}} -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      result: "",
      phone: "", //手机号码
      password: "", // 密码
      errorMessage: "", //手机号码校验
      code: "", // 验证码
      isRight: false, // 判断手机号码是否符合 是否可以发送验证码
      currentCode: "", // 当前验证码
      loginType: 2, // 1 密码注册  2 验证码注册
      pendCode: false, // 验证码的等待
      second: 60, // 剩余秒数
      isAgree: false, //协议是否同意
      isClick: true, // 判断当前是否变点击了
    };
  },
  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;
    //     }
    //   }
    // );
  },
  computed: {
    isAllRight() {
      return this.isRight && this.code && this.isAgree && this.password;
    },
  },
  methods: {
    handleChangeAgree() {
      this.isAgree = !this.isAgree;
    },
    //  切换注册方式
    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;
      }
    },
    // 得到验证码
    handleGetCode() {
      let _this = this;
      console.log("this.phone", this.phone);
      console.log("this.isRight", this.isRight);
      if (this.isRight && this.phone) {
        this.pendCode = true;
        this.handleSetInter();
        this.$api
          .getCoop({
            action_type: "GetSMSIdentityCode",
            action_data: this.phone,
          })
          .then(function (res) {
            console.log("res", res);
            let obj = res.ResultObject[0];
            _this.currentCode = obj.FirstParameter;
          });
      } else {
        uni.showToast({
          title: "请检查输入的手机号",
          duration: 2000,
          icon: "none",
        });
      }
    },
    // 计时器
    handleSetInter() {
      let timer;
      let _this = this;
      timer = setInterval(() => {
        if (_this.second === 1) {
          this.pendCode = false;
          setTimeout(timer);
          _this.second = 60;
        } else {
          _this.second = _this.second - 1;
        }
      }, 1000);
    },
    // 注册
    handleRegister() {
      if (!this.isAllRight) {
        return;
      }
      // 限制不能连续点击
      if (!this.isClick) {
        return;
      }

      if (this.currentCode !== this.code) {
        uni.showToast({
          title: "验证码错误！",
          duration: 2000,
          icon: "none",
        });
        return;
      }
      if (!this.isRight || !this.phone) {
        uni.showToast({
          title: "手机号错误！",
          duration: 2000,
          icon: "none",
        });
        return;
      }
      if (!this.password) {
        uni.showToast({
          title: "请输入密码！",
          duration: 2000,
          icon: "none",
        });
        return;
      }
      this.isClick = false;
      let _this =  this
      const req = {
        action_type: "Registe",
        APPGuid: "2693711a-72eb-48dc-b3dc-5122424e8fd4",
        login_type: this.loginType,
        userPassport: this.phone,
        SourcePlatform: "APP",
        userPassword: this.password,
        // userId: "",
        mobile: this.phone,
        code: this.code,
        // cId: "",
        ownerUnitId: 249,
        // provinceName: "",
        provinceCode: "340000",
      };
      this.$api.getCoop(req).then(function (res) {
        console.log("res", res);
        uni.showToast({
          title: res.ResultDesc,
          duration: 1000,
          icon: "none",
        });
        setTimeout(() => {
          _this.isClick = true;
          if (res.ResultCode === "100") {
            uni.navigateBack({
              delta: 1,
            });
          }
        }, 1000);
      });
    },
  },
};
</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;
    }
    .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;
    }
  }
}
</style>