<!--
 * @Description:
 * @Author: ZCY
 * @Date:
-->
<template>
  <div class="login" :style="{ height, width }">
    <div class="login-bg">
      <div class="login-bg-title">
        <img :src="logo" alt="" width="220">
        <span>{{ title }}</span>
      </div>
      <!--      <div class="login-bg-tips"></div> -->
      <slot name="slogan">
        <div class="login-bg-slogan">
          上善若<span>水 &nbsp;&nbsp;&nbsp;“关”</span>住点滴
        </div>
      </slot>
    </div>
    <div class="login-box">
      <p><img :src="logo" width="66" alt=""></p>
      <u-form
        ref="loginFormRef"
        v-model:value="loginForm"
        :config="config"
        label-align="left"
        :label-col="{ style: { width: '80px' } }"
      >
        <template v-if="!props.config" #button>
          <a-button type="primary" :loading="loading" style="width: 100%" @click="onLogin">
            登录
          </a-button>
        </template>
        <template v-for="(slot, name) in slots" :key="name" #[name]="slotProps">
          <slot :name="name" v-bind="slotProps" />
        </template>
      </u-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, useSlots, watch } from 'vue';
import UForm from './UForm.vue';
import type { FormConfig } from './types';

const props = withDefaults(
  defineProps<{
    value?: LoginForm;
    config?: FormConfig;
    width?: string;
    height?: string;
    isValidate?: boolean;
    logo: string;
    title: string;
    subTitle: string;
    loading?: boolean;
  }>(),
  {
    value: () => ({
      username: '',
      password: ''
    }),
    width: '100vw',
    height: '100vh',
    isValidate: true,
    title: 'Github',
    subTitle: '全球最大的代码托管平台',
    loading: false
  }
);
const emits = defineEmits<{
  (e: 'submit', value: any): void;
  (e: 'update:value', value: any): void;
}>();

const slots = useSlots();
interface LoginForm {
  username: string;
  password: string;
}

const loginForm = ref<LoginForm>(props.value);
const loginFormRef = ref();

const onKeydown = (event: KeyboardEvent) => {
  if (event.key.toLowerCase() === 'enter') onLogin();
};

const config = computed<FormConfig[]>(() => [
  {
    tag: 'input',
    label: '用户名',
    field: 'username',
    rules: [{ required: props.isValidate, type: 'string', message: '请输入用户名' }],
    component: {
      allowClear: true,
      onKeydown
    }
  },
  {
    tag: 'input',
    label: '密码',
    field: 'password',
    rules: [{ required: props.isValidate, message: '请输入密码' }],
    component: {
      type: 'password',
      allowClear: true,
      onKeydown
    }
  },
  {
    slotName: 'button'
  }
]);

const onLogin = async () => {
  const validated = await loginFormRef.value?.validate();
  if (!validated) return;
  emits('submit', loginForm.value);
};

watch(
  () => loginForm.value,
  () => {
    emits('update:value', loginForm.value);
  },
  {
    deep: true
  }
);
</script>

<style scoped>
#canvas {
  background: #d6f8ff;
}

.login {
  position: relative;
}
.login-bg {
  position: relative;
  width: 45%;
  height: 100%;
  background-color: #f3f3f3;
  /*background-image: url('../../assets/img/Pipeline_Isometric.svg');*/
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
}
.login-bg-title {
  position: relative;
  top: 20%;
  left: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #409eff;
  font-weight: bold;
  font-size: 1.2rem;
  transform: translateX(-50%);
}
.login-bg-title span {
  margin-top: 0.375rem;
}
.login-bg-title label {
  background-color: white;
  font-size: 0.8rem;
}
.login-bg-slogan {
  position: relative;
  top: 25%;
  font-size: 1.5rem;
  font-weight: bold;
  left: 50%;
  transform: translateX(-50%);
}
.login-bg-slogan span {
  color: #409eff;
}
.login-box {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 375px;
  left: 75%;
  top: 50%;
  padding: 24px;
  transform: translate(-50%, -50%);
}
.login-box span {
  position: relative;
  display: inline-flex;
  width: 355px;
  justify-content: space-between;
  align-items: center;
}
.login-box span input {
  width: 280px;
}
.login-box span label {
  display: inline-block;
  text-align: left;
  width: 66px;
}
.login-box button {
  width: 355px;
}
.login-box p {
  color: #409eff;
  font-weight: bold;
  font-size: 1.3rem;
  margin: 24px 0;
  display: flex;
  align-items: center;
}
.login input {
  height: 32px;
  margin: 12px 0;
  border-color: transparent;
  outline: #d4d7de 1px solid;
  padding: 6px 12px;
}
.login button {
  background-color: #409eff;
  height: 32px;
  color: white;
  border-radius: 5px;
}

@media (max-width: 768px) {
  .login-bg {
    display: none;
  }
  .login-box {
    left: 50%;
  }
}
@media (max-width: 1024px) {
  .login-box {
    max-width: 300px;
  }
}
</style>
