<template>
  <view>
    <custom-nav-bar left-text="登陆" left-arrow />

    <view
      class="container"
      style="
        background-image: url(https://jiexiu.xuqidata.com:8083/jiexiujumin/3ee992d1442bb8285c37f93a9ee1f93ed6e086131fc514d7b697b2cae00d753b.png);
      "
    >
      <view class="title">介休网格通</view>
      <view class="reg-bg">
        <image
          src="https://jiexiu.xuqidata.com:8083/jiexiujumin/5064115c2e62589da9486151d5bced709ccef7a11063c0f17eddc9654a816d80.png"
        />
      </view>

      <view class="add-commutnity wx-authorize">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field
              v-model="phone"
              name="手机号"
              label="手机号"
              placeholder="请填写手机号"
            />
          </van-cell-group>
          <van-cell-group inset style="margin-top: 20rpx">
            <van-field
              v-model="sms"
              center
              clearable
              label="短信验证码"
              placeholder="请输入短信验证码"
            >
              <template #button>
                <van-button
                  size="small"
                  type="primary"
                  color="#f01b4e"
                  @click="headerCode('codeTitle', 'timer')"
                  v-if="codeTitle === '发送验证码' || codeTitle === '重新获取'"
                  >{{ codeTitle }}</van-button
                >
                <van-button size="small" type="primary" color="#f01b4e" v-else
                  >{{ codeTitle }}秒</van-button
                >
              </template>
            </van-field>
          </van-cell-group>
          <div style="margin: 16px">
            <van-button
              round
              block
              type="primary"
              native-type="submit"
              color="#f01b4e"
            >
              提交
            </van-button>
          </div>
        </van-form>
      </view>
      <view class="user-agreement">
        <checkbox
          color="#F01B4E"
          :checked="isAgreementBox"
          @tap="onAgreementSelect"
        />
        <view class="checbox-text flex">
          <text>已阅读并同意《</text>
          <text @tap="onAgreement">用户服务协议</text>
          <text>》</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
//授权页
// const { loginApi } = app.api;
import * as myApi from "@/api/myApi"; // 我的
export default {
  components: {},
  data() {
    return {
      // env: app.globalData.env,
      isAgreement: false,
      isAgreementChecked: false,

      //是否勾选的了用户协议
      userInfo: null,

      code: "",
      isAgreementBox: false,
      codeTitle: "发送验证码",
      phone: "",
      sms: "",
      timer: null,
    };
  },
  onLoad() {},
  methods: {
    headerCode(codeTitle, time) {
      const vm = this;
      let reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

      if (vm.phone !== "") {
        if (vm.phone.length !== 11) {
          uni.showToast({
            title: "你输入的手机格式不正确",
            icon: "none",
          });
        } else {
          let TIME_COUNT = 60;
          if (!this[time]) {
            this[codeTitle] = TIME_COUNT;
            this[time] = setInterval(async () => {
              if (this[codeTitle] > 0 && this[codeTitle] <= TIME_COUNT) {
                this[codeTitle]--;

                if (this[codeTitle] == 59) {
                  const res = await myApi.sendSmSCodeApi({
                    mobile: vm.phone,
                    scene: 4,
                  });

                  console.log(res);
                }
              } else {
                clearInterval(this[time]);
                TIME_COUNT = 60;
                this[time] = null;
                this[codeTitle] = "重新获取";
              }
            }, 1000);
          } else {
            uni.showToast({
              title: "请勿重复点击",
              icon: "none",
            });
          }
        }
      } else {
        uni.showToast({
          title: "手机号不能为空",
          icon: "none",
        });
      }
    },
    onAgreementSelect() {
      this.isAgreementChecked = !this.isAgreementChecked;
      this.isAgreement = !this.isAgreement;
    },

    onAgreement() {
      uni.navigateTo({
        url: "/pages/agreement/user-agreement",
      });
    },
    async onSubmit() {
      if (this.phone === "" || this.sms === "") {
        uni.showToast({
          title:
            this.phone === ""
              ? "请输入手机号"
              : this.sms === ""
              ? "请输入验证码"
              : "",
          icon: "none",
        });
        return false;
      }

      if (!this.isAgreement) {
        uni.showToast({
          title: "请勾选用户协议",
          icon: "error",
          mask: true,
          duration: 1000,
        });
        return false;
      }
      const res = await myApi.systemAuthSmsLogin({
        mobile: this.phone,
        code: this.sms,
        scene: 4,
      });

      if (res.code === 0) {
        uni.showToast({
          title: '登录成功',
          icon:'none'
        })
        uni.setStorageSync("userId", res.data.userId);
        uni.setStorageSync("token", res.data.accessToken);
        uni.setStorageSync("isLogin", true);
        uni.switchTab({
          url: "/pages/my/my",
        });
      }else{
        uni.showToast({
          title: res.data.msg,
          icon:'none'
        })
      }
    },
    onAddCommunity() {
      const { isAgreement } = this;
      if (!isAgreement) {
        uni.showToast({
          title: "请勾选用户协议",
          icon: "error",
          mask: true,
          duration: 1000,
        });
      }
    },

    async getPhoneNumber(e) {
      const { errMsg, iv, encryptedData } = e.detail;
      if (errMsg.indexOf("ok") === -1) {
        return;
      }
      this.setData({
        numberChecked: true,
      });
      const res = await app.globalData.register({
        avatar: this.userInfo.avatarUrl,
        nickName: this.userInfo.nickName,
        iv,
        encryptedData,
        code: this.code,
      });
      // 判断注册成功后，返回到我的页面
      if (res) {
        uni.reLaunch({
          url: "/pages/people/people",
        });
      }
    },
  },
};
</script>
<style lang="less">
/* pages/authorize/index.wxss */
.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.title {
  font-size: 52rpx;
  font-weight: 400;
  color: #ffffff;
  line-height: 60rpx;
  letter-spacing: 1rpx;
  margin-bottom: 20rpx;
}

.reg-bg {
  width: 628rpx;
  height: 816rpx;
}

.reg-bg image {
  width: 100%;
  height: 100%;
}

.user-agreement {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 100rpx;

  .checbox-text {
    font-size: 28rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 28rpx;
  }
}

.user-agreement checkbox {
  transform: scale(0.6, 0.6);
}

.user-agreement view {
  font-size: 28rpx;

  font-weight: 400;
  color: #ffffff;
  line-height: 28rpx;
}

.wx-authorize {
  width: 100%;
  padding: 0 30rpx;
  // margin-top: 40rpx;
  margin-bottom: 38rpx;
}

.add-commutnity {
  position: absolute;
  top: 45%;
  left: 0;
}

.add-commutnity-btn,
.wx-authorize-btn {
  // width: 648rpx;

  padding: 33rpx 0;
  background: linear-gradient(90deg, #fddf23 0%, #ffa2a2 100%);
  border-radius: 42rpx;
  color: #f01b4e;
  line-height: 32rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: 500;
}

.wx-authorize-btn {
  background: linear-gradient(180deg, #029b4d 0%, #108644 100%);
}

.number-alert-container {
  margin-top: 108rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.number-alert-icon {
  width: 144rpx;
  height: 144rpx;
  display: inline-block;
  border: none;
  border-radius: 50%;
}

.number-alert-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #293341;
  line-height: 32rpx;
  margin-top: 38rpx;
  margin-bottom: 92rpx;
}

.number-alert-btn {
  background: #19ba50;
  border-radius: 42px;
  color: #fff;
}

.phone-popup {
  padding-bottom: 108rpx;
}
</style>
