<script setup>
import { ref, computed, watch } from "vue"
import { Request, Storage } from "../libs/utils"
import ModalTransition from "./ModalTransition.vue"
import Agreement from "./Agreement.vue"
defineProps({
  show: false
})
const emit = defineEmits(['loginSuccess'])
const phone = ref('')
const code = ref('')
const timedown = ref(60)
const codeText = ref('获取验证码')
const selected = ref(false)
const agreementShow = ref(false)
const subloading = ref(false)
const codeStyleDisable = ref(false)

watch(phone, (newPhone) => {
  phone.value = newPhone.replace(/\D/g, '').slice(0, 11).replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3')
})
const codelock = computed(() => { return !/^\d{11}$/.test(phone.value.replace(/\s+/g, '')) })
const selectChange = () => { selected.value = !selected.value }
const loginBtnClass = computed(() => ({
  disable: codelock.value || code.value === '' || !selected.value, subloading: subloading.value
}))
const checkData = () => {
  if (codelock.value) {
    weui.alert("请输入正确的手机号码")
    return false
  } else if (code.value === '') {
    weui.alert("请输入验证码")
    return false
  } else if (!selected.value) {
    weui.alert("请阅读并同意协议")
    return false
  } else if (subloading.value) {
    return false
  } else {
    return true
  }
}

const countDown = () => {
  const timer = setTimeout(() => {
    if (timedown.value <= 0) {
      timedown.value = 60
      codeText.value = '获取验证码'
      codeStyleDisable.value = false
    } else {
      timedown.value = timedown.value - 1
      codeText.value = `${timedown.value}秒后重新获取`
      countDown()
    }
    clearTimeout(timer)
  }, 1000)
}
const handleCode = async () => {
  if (codelock.value) {
    weui.alert("请输入正确的手机号码")
    return
  }
  if (codeStyleDisable.value) {
    return
  }

  codeStyleDisable.value = true

  const result = await Request("sms/sendCode", { phone: phone.value.replace(/\s+/g, '') })

  if (result.res.status === 200) {
    timedown.value = 60
    codeText.value = `${timedown.value}秒后重新获取`
    countDown()
  } else {
    codeStyleDisable.value = false
  }
}

const emitAgreementClose = () => {
  agreementShow.value = false
}

const loginSubmit = async () => {
  if (!checkData()) {
    return
  }
  subloading.value = true

  const result = await Request("sms/authPhone", { code: code.value, phone: phone.value.replace(/\s+/g, ''), agree: 1 })
  if (result.res.status === 200) {
    const userData = Object.assign({}, Storage.get("userinfos"), { ...result.json })
    Storage.set("userinfos", userData)
    emit("loginSuccess", userData)
  } else {
    subloading.value = false
  }
}
</script>

<template>
  <ModalTransition class="login" :show="show">
    <div class="login-modal-content">
      <div class="login-wrapper">
        <div class="login-title">泸州老窖会员登录</div>
        <div class="login-content">
          <div class="login-item">
            <input type="tel" class="i-phone" v-model="phone" placeholder="请输入手机号">
          </div>
          <div class="login-item login-code">
            <input type="tel" class="i-code" v-model="code" placeholder="请输入验证码" />
            <div class="login-code-send" :class="{ lock: codelock, disable: codeStyleDisable }" @click="handleCode">
              {{
                codeText }}</div>
          </div>
          <div class="login-agreement">
            <div class="login-agreement-select" :class="{ selected: selected }" @click="selectChange"></div>
            <div class="login-agreement-text">我已查看并同意<span class="login-agreement-link"
                @click="() => agreementShow = true">《泸州老窖会员中心隐私协议》</span></div>
          </div>
        </div>
        <div class="btn-login" :class="loginBtnClass" @click="loginSubmit">点击登录</div>
      </div>
    </div>
  </ModalTransition>

  <Agreement v-if="agreementShow" @close="emitAgreementClose"></Agreement>
</template>

<style scoped>
.login-modal-content {
  width: 100%;
  background-color: #f2f3f8;
  border-radius: 2vw 2vw 0 0;
  animation: transitionIn ease 0.3s forwards;
  position: relative;
}

.login-wrapper {
  width: calc(100% - 8vw);
  margin-left: 4vw;
  padding-bottom: 14vw;
}

.login-item {
  display: flex;
}

.login-title {
  font-size: 3.703704vw;
  font-weight: 700;
  padding: 4vw 0;
}

.login-item {
  margin-top: 3vw;
  position: relative;
}

.login-content input {
  border-radius: 1vw;
  background-color: #fff;
  font-size: 5.555556vw;
  padding: 3vw;
  font-weight: 700;
  color: #000;
}

.login-content input::placeholder {
  color: #9e9e9e;
  font-size: 3.703704vw;
  line-height: 1;
  transform: translateY(-.5vw);
}

.login-code-send {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 3vw;
  font-size: 3.703704vw;
  line-height: 1;
}

.login-code-send.lock,
.login-code-send.disable {
  color: #9e9e9e;
}

.login-agreement {
  display: flex;
  flex-direction: row;
  font-size: 2.777778vw;
  margin-top: 4vw;
  color: #9e9e9e;
  align-items: center;
}

.login-agreement-select {
  width: 8vw;
  height: 8vw;
  position: relative;
}

.login-agreement-select::after {
  content: "";
  position: absolute;
  width: 4vw;
  height: 4vw;
  border-radius: 50%;
  border: 1px solid #000;
  top: 50%;
  transform: translate3d(0, -50%, 0);
}

.login-agreement-select::before {
  content: "";
  position: absolute;
  width: 4vw;
  height: 4vw;
  top: 50%;
  transform: translate3d(0, -50%, 0) scale(0);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNTAgNTAiIHdpZHRoPSI1MHB4IiBoZWlnaHQ9IjUwcHgiPjxwYXRoIGQ9Ik0gNDEuOTM3NSA4LjYyNSBDIDQxLjI3MzQzOCA4LjY0ODQzOCA0MC42NjQwNjMgOSA0MC4zMTI1IDkuNTYyNSBMIDIxLjUgMzguMzQzNzUgTCA5LjMxMjUgMjcuODEyNSBDIDguNzg5MDYzIDI3LjI2OTUzMSA4LjAwMzkwNiAyNy4wNjY0MDYgNy4yODEyNSAyNy4yOTI5NjkgQyA2LjU2MjUgMjcuNTE1NjI1IDYuMDI3MzQ0IDI4LjEyNSA1LjkwMjM0NCAyOC44NjcxODggQyA1Ljc3NzM0NCAyOS42MTMyODEgNi4wNzgxMjUgMzAuMzYzMjgxIDYuNjg3NSAzMC44MTI1IEwgMjAuNjI1IDQyLjg3NSBDIDIxLjA2MjUgNDMuMjQ2MDk0IDIxLjY0MDYyNSA0My40MTAxNTYgMjIuMjA3MDMxIDQzLjMyODEyNSBDIDIyLjc3NzM0NCA0My4yNDIxODggMjMuMjgxMjUgNDIuOTE3OTY5IDIzLjU5Mzc1IDQyLjQzNzUgTCA0My42ODc1IDExLjc1IEMgNDQuMTE3MTg4IDExLjEyMTA5NCA0NC4xNTIzNDQgMTAuMzA4NTk0IDQzLjc4MTI1IDkuNjQ0NTMxIEMgNDMuNDEwMTU2IDguOTg0Mzc1IDQyLjY5NTMxMyA4LjU4OTg0NCA0MS45Mzc1IDguNjI1IFoiLz48L3N2Zz4=");
  background-size: 80%;
  background-position: 60% center;
  transition: transform .3s;
}

.login-agreement-select.selected::before {
  transform: translate3d(0, -50%, 0) scale(1);
  transition: transform .3s ease-in;
}

.login-agreement-link {
  color: #000;
  border-bottom: 1px solid #000;
}

.btn-login {
  text-align: center;
  border-radius: 1vw;
  background-color: #70b2e2;
  margin-top: 4vw;
  padding: 3vw;
  color: #fff;
  position: relative;
}

.btn-login.disable {
  opacity: .6;
}

.btn-login.subloading {
  opacity: .6;
}

.btn-login.subloading::before {
  content: "";
  position: absolute;
  border: .5vw solid #fff;
  border-color: rgba(255, 255, 255, .8) transparent transparent transparent;
  border-radius: 50%;
  width: 3vw;
  height: 3vw;
  top: 30%;
  left: calc(50% - 14vw);
  animation: loginloading 1s linear infinite;
}

@keyframes loginloading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>