<template>
  <v-app class="login">
    <v-app-bar app elevation="0" style="background: none" class="d-sm-none">
      <v-avatar class="mr-2"><img :src="logoImg" :alt="env.VITE_APP_HEAD" /></v-avatar>
      <v-toolbar-title class="text-white text-h5 font-weight-bold">{{ env.VITE_APP_HEAD }}</v-toolbar-title>
    </v-app-bar>
    <v-main class="accent_bg text-center pt-sm-0">
      <v-form ref="usersForm" v-model="valid" class="mt-12 text-center m-t-sm-0 pt-12">
        <v-card width="1200" elevation="0" class="py-6 d-inline-block mt-12 m-t-sm-0">
          <v-row>
            <v-col cols="12" sm="6" md="6" class="left_bg rounded-s-lg d-sm-none" style="min-height: 500px"></v-col>
            <v-col cols="12" sm="6" md="6" class="g_px-20 p-lr-sm-6 py-12 rounded-e-lg" style="min-height: 500px">
              <v-tabs v-model="tabsidx">
                <v-tab class="px-0 mr-6 g_size-16">短信登录</v-tab>
                <v-tab class="px-0 mr-6 g_size-16">扫码登录</v-tab>
                <v-tab v-if="isAdmin" class="px-0 mr-6 g_size-16">账号登录</v-tab>
              </v-tabs>
              <v-window v-model="tabsidx">
                <v-window-item class="pt-8">
                  <v-text-field
                    v-model="users.telephone"
                    placeholder="手机号"
                    prepend-inner-icon="mdi-cellphone-android"
                    variant="outlined"
                    :rules="rules.mobile"
                  ></v-text-field>
                  <v-text-field
                    v-model="users.mcode"
                    placeholder="验证码"
                    prepend-inner-icon="mdi-numeric"
                    variant="outlined"
                    :rules="rules.code"
                  >
                    <template v-slot:append-inner>
                      <a @click="mcode()" style="margin-top: 3px" :class="canClick ? '' : 'text-grey'">{{ content }}</a>
                    </template>
                  </v-text-field>
                  <v-card-actions class="px-0 d-block">
                    <v-btn color="primary" variant="flat" block size="large" :loading="loading" @click="submit('sms')">登录</v-btn>
                  </v-card-actions>
                </v-window-item>

                <v-window-item class="pt-8">
                  <iframe scrolling="no" src="/disable-mis-acis/unia/dingwork/link/scan" class="rounded" style="border: 0; min-height: 300px; width: 100%" title="扫码登录"></iframe>
                </v-window-item>

                <v-window-item class="pt-8">
                  <v-text-field
                    v-model="users.username"
                    placeholder="身份证号/手机号码"
                    prepend-inner-icon="mdi-account-outline"
                    variant="outlined"
                    :rules="rules.idCard"
                  ></v-text-field>
                  <v-text-field
                    @keyup.enter="submit('mis')"
                    v-model="users.password"
                    placeholder="密码"
                    prepend-inner-icon="mdi-lock-outline"
                    variant="outlined"
                    :type="showpass ? 'text' : 'password'"
                    :append-inner-icon="showpass ? 'mdi-eye' : 'mdi-eye-off'"
                    @click:append-inner="showpass = !showpass"
                    :rules="rules.password"
                  ></v-text-field>
                  <v-card-actions class="px-0">
                    <v-btn color="primary" variant="flat" block size="large" :loading="loading" @click="submit('mis')">登录</v-btn>
                  </v-card-actions>
                </v-window-item>
              </v-window>
            </v-col>
          </v-row>
          <p class="text-h6 text-primary d-md-none d-sm-block">{{ env.VITE_APP_HEAD }}</p>
        </v-card>
      </v-form>
    </v-main>
    <v-footer class="copyright d-inline-block text-center pb-12 pt-4 d-sm-none">
      {{ env.VITE_APP_FOOT }}
      <a href="https://pc.qq.com/category/c3.html" class="text-right pr-6">
        我们推荐您使用Chrome,获得最佳体验
        <p class="text-h6 mb-0"><v-icon size="40" class="mr-1" color="primary">mdi-google-chrome</v-icon>Chrome 浏览器</p>
      </a>
    </v-footer>
    <vtk-message></vtk-message>
  </v-app>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useTheme } from 'vuetify'
import Request from "@/commons/request"
import Storage from "@/commons/storage"
import Message from "@/components/message"
import Validation from "@/commons/validation"
import logoImg from '@/assets/logo.png'

const router = useRouter()
const route = useRoute()
const theme = useTheme()

const usersForm = ref(null)
const users = reactive({})
const tabsidx = ref(0)
const loading = ref(false)
const showpass = ref(false)
const content = ref("获取验证码")
const totalTime = ref(120)
const canClick = ref(true)
const valid = ref(true)

const rules = {
  idCard: [(val) => !!val || "请填写身份证号码/手机号"],
  password: [(val) => !!val || "请填写密码"],
  mobile: [(val) => Validation.isMobile(val) || "请填写正确的手机号码格式"],
  code: [(val) => (!!val && val.length == "6") || "请填写六位数验证码"],
}

const isAdmin = ref(false)
const env = process.env

onMounted(() => {
  Storage.clear()
  isAdmin.value = route.path == "/login/admin"
  window.sessionStorage.setItem("_mis_acis_route", window.location.href)

  addEventListener("message", (e) => {
    if (typeof e.data === "string" && e.data.startsWith("http")) {
      Message.loading.show()
      document.location.href = e.data
    }
  })

  theme.global.name.value = 'light'
})

const mcode = () => {
  if (!users.telephone || !Validation.isMobile(users.telephone)) {
    Message.toast("手机号码格式错误！", { color: "error" })
    return
  }
  if (!canClick.value) return

  canClick.value = false
  content.value = totalTime.value + "秒后重试"

  let clock = window.setInterval(() => {
    totalTime.value--
    content.value = totalTime.value + "秒后重试"
    if (totalTime.value < 0) {
      window.clearInterval(clock)
      content.value = "重新获取验证码"
      totalTime.value = 120
      canClick.value = true
    }
  }, 1000)

  Message.loading.show()
  Request.postForm("/unia/admin/mcode", { mobile: users.telephone }).then(
    (res) => {
      Message.loading.hide()
      if (res.meta.success) {
        users.ticket = res.data.ticket
        Message.toast("短信验证码发送成功,请注意查收！")
      } else {
        Message.toast(res.meta.message, { color: "red" })
      }
    },
    (err) => {
      console.log(err)
      Message.loading.hide()
    }
  )
}

const submit = (type) => {
  loading.value = true
  Message.loading.show()
  Request.postJson(`/unia/admin/login/${type}`, users).then(
    (res) => {
      loading.value = false
      Message.loading.hide()
      if (res.meta.success) {
        Storage.set("_mis_acis_token", res.data.token)
        router.push("/home")
      } else {
        Message.toast(res.meta.message, { color: "error" })
      }
    },
    (err) => {
      Message.loading.hide()
      console.log(err)
    }
  )
}
</script>

<style>
.login .accent_bg {
  background-size: cover;
}
.login .left_bg {
  background-size: contain;
  background-position-x: 50%;
}
.login .copyright {
  position: fixed;
  bottom: 0;
  width: 100%;
}
.login .copyright > a {
  position: absolute;
  right: 0;
}
.login .d-md-none {
  display: none;
}
input:-webkit-autofill {
  -webkit-text-fill-color: #000 !important;
}
@media screen and (max-width: 500px) {
  .login .accent_bg {
    background: #fff !important;
  }
  .login .d-sm-block {
    display: block;
  }
  .login .d-sm-none {
    display: none !important;
  }
  .login .p-lr-sm-6 {
    padding-right: 24px !important;
    padding-left: 24px !important;
  }
  .login .m-t-sm-0 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .login .pt-sm-0 {
    padding-top: 0 !important;
  }
}
</style>
