<template>
  <div class="flex items-center justify-center w-full h-[80vh] pb-40">
    <div class="flex min-h-full flex-1 flex-col justify-center py-12 sm:px-6 lg:px-8">
      <div class="sm:mx-auto sm:w-full sm:max-w-md">
          <img alt="" class="w-48px h-48px mr-10px" src="@/assets/imgs/logo2.png" />
        <h2 class="mt-6 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">红狐客服人员登录</h2>
      </div>

      <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px]">
        <div class="bg-white px-6 py-12 shadow sm:rounded-lg sm:px-12">
          <form class="space-y-6" @submit.prevent="onSubmit">
            <div>
              <label for="username" class="block text-sm font-medium leading-6 text-gray-900">用户名</label>
              <div class="mt-2">
                <input
                  v-model="formData.username"
                  id="username"
                  name="username"
                  type="text"
                  autocomplete="username"
                  required="true"
                  class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
              </div>
            </div>

            <div>
              <label for="password" class="block text-sm font-medium leading-6 text-gray-900">密码</label>
              <div class="mt-2">
                <input
                  v-model="formData.password"
                  id="password"
                  name="password"
                  type="password"
                  autocomplete="current-password"
                  required="true"
                  class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
              </div>
            </div>

            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <input
                  id="remember-me"
                  name="remember-me"
                  type="checkbox"
                  class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600" />
                <label for="remember-me" class="ml-3 block text-sm leading-6 text-gray-900">Remember me</label>
              </div>
            </div>

            <div>
              <button
                type="submit" :disabled="loginDisable"
                class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                Sign in
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" width="30%" center align-center>
    <div class="flex flex-col items-center justify-center">
      <span>{{ message }}</span>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" color="rgb(99,102,241)" class="bg-indigo-500" @click="dialogVisible = false">
          <span>Confirm</span>
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { signIn } from '@/api/auth'
import SvgIcon from '@/components/SvgIcon.vue'
import * as AuthUtils from '@/utils/auth'
import { useRouter } from 'vue-router'

const dialogVisible = ref(false)
const loginDisable = ref(false)
const message = ref('')
const router = useRouter()

const formData = ref({
  username: '',
  password: '',
})

const onSubmit = async () => {
  loginDisable.value = true
  try {
    const res = await signIn(formData.value) as any
    if (res.code != '0') {
      message.value = res.msg
      dialogVisible.value = true
      return
    }else{
      const data = res.data
      AuthUtils.setToken(data)
    }
  } finally {
    loginDisable.value = false
  }
  router.push('/')
}
</script>
