<template>
  <LoginFormTitle
    class="login_title"
    :style="{
      fontSize: `${22 * props.bi}px`,
      height: `${68 * props.bi}px`,
    }"
  />
  <a-form
    class="p-4 enter-x"
    :model="formData"
    :rules="getFormRules"
    ref="formRef"
    v-show="getShow"
    @keypress.enter="handleLogin"
  >
    <FormItem name="account">
      <Input
        size="large"
        v-model:value="formData.account"
        placeholder="请输入账户名"
        class="fix-auto-fill"
        :style="{
          height: `${38.5 * props.bi}px`,
          fontSize: `${15 * props.bi}px`,
        }"
      >
        <template #prefix>
          <img
            src="/login/account.png"
            :style="{
              height: `${22 * props.bi}px`,
            }"
          />
        </template>
      </Input>
    </FormItem>
    <FormItem name="password">
      <InputPassword
        size="large"
        visibilityToggle
        v-model:value="formData.password"
        placeholder="密码"
        :style="{
          height: `${38.5 * props.bi}px`,
          fontSize: `${15 * props.bi}px`,
        }"
      >
        <template #prefix>
          <img
            src="/login/password.png"
            :style="{
              height: `${15 * props.bi}px`,
            }"
          />
        </template>
      </InputPassword>
    </FormItem>

    <ARow>
      <ACol :span="12">
        <a-form-item
          :style="{
            'text-align': 'left',
            fontSize: `${15 * props.bi}px`,
          }"
        >
          <Checkbox
            v-model:checked="rememberMe"
            size="small"
            :style="{
              height: `${23.5 * props.bi}px`,
              fontSize: `${15 * props.bi}px`,
            }"
          >
            {{ t('sys.login.rememberMe') }}
          </Checkbox>
        </a-form-item>
      </ACol>
      <!-- <ACol :span="12">
        <FormItem
          :style="{
            'text-align': 'right',
          }"
        >
          <Button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">
            {{ t('sys.login.forgetPassword') }}
          </Button>
        </FormItem>
      </ACol> -->
    </ARow>

    <a-form-item>
      <a-button
        size="large"
        block
        @click="handleLogin"
        :loading="loading"
        class="logon"
        :style="{
          fontSize: `${20 * props.bi}px`,
          height: `${40 * props.bi}px`,
        }"
      >
        立即登录
      </a-button>
    </a-form-item>
  </a-form>
  <div
    class="bottom"
    v-if="getShow"
    :style="{
      fontSize: `${20 * props.bi}px`,
      height: `${50 * props.bi}px`,
    }"
  >
    <!-- <Button type="link" block size="small" @click="setLoginState(LoginStateEnum.REGISTER)">
      <template #icon>
        <img
          src="/login/register.png"
          :style="{
            height: `${29 * props.bi}px`,
          }"
        />
      </template>
      <span
        :style="{
          fontSize: `${14 * props.bi}px`,
        }"
      >
        &nbsp;&nbsp; 用户注册
      </span>
    </Button>
    <span>|</span> -->
    <a-popover v-model:open="visible" trigger="click">
      <template #content>
        <a-qrcode error-level="H" :value="qrcodeValue" />
      </template>
      <Button
        type="link"
        block
        size="small"
        :style="{
          fontSize: `${14 * props.bi}px`,
        }"
      >
        <template #icon>
          <img
            src="/login/download.png"
            :style="{
              height: `${20 * props.bi}px`,
            }"
          />
        </template>
        <span
          :style="{
            fontSize: `${14 * props.bi}px`,
          }"
        >
          &nbsp;&nbsp; 下载APP
        </span>
      </Button>
    </a-popover>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref, unref, computed, onMounted } from 'vue';
  import { Checkbox, Form, Input, Row, Col, Button, Divider } from 'ant-design-vue';
  // import {
  //   GithubFilled,
  //   WechatFilled,
  //   AlipayCircleFilled,
  //   GoogleCircleFilled,
  //   TwitterCircleFilled,
  // } from '@ant-design/icons-vue';
  import LoginFormTitle from './LoginFormTitle.vue';
  import { useI18n } from '@/hooks/web/useI18n';
  import { useMessage } from '@/hooks/web/useMessage';
  import { useUserStore } from '@/store/modules/user';
  import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin';
  import { useDesign } from '@/hooks/web/useDesign';
  import { fun_GetUpdateFiles } from '@/api/demo/version';
  import { getAppEnvConfig } from '@/utils/env';
  //import { onKeyStroke } from '@vueuse/core';

  const props = defineProps(['bi']);

  function computedFormItem() {
    const elements = document.querySelectorAll('.ant-form-item');
    elements.forEach((element) => {
      element.style.marginBottom = `${24 * props.bi}px`; // 修改 margin-bottom
    });
  }

  const ACol = Col;
  const ARow = Row;
  const FormItem = Form.Item;
  const InputPassword = Input.Password;
  const { t } = useI18n();
  const { notification, createErrorModal } = useMessage();
  const { prefixCls } = useDesign('login');
  const userStore = useUserStore();

  const { setLoginState, getLoginState } = useLoginState();
  const { getFormRules } = useFormRules();

  const formRef = ref();
  const loading = ref(false);
  const rememberMe = ref(false);
  const visible = ref(false);
  const qrcodeValue = ref();

  const formData = reactive({
    // account: 'vben',
    // password: '123456',
    account: '',
    password: '',
  });

  const { validForm } = useFormValid(formRef);

  //onKeyStroke('Enter', handleLogin);

  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN);

  async function handleLogin() {
    const data = await validForm();
    if (!data) return;
    try {
      loading.value = true;
      const userInfo = await userStore.login({
        password: data.password,
        account: data.account,
        mode: 'none', //不要默认的错误提示
      });
      console.log(userInfo);
      localStorage.setItem('fireUserLoginName', userInfo.name);
      if (userInfo) {
        localStorage.setItem('userid', userInfo.id);
        notification.success({
          message: t('sys.login.loginSuccessTitle'),
          description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.name}`,

          duration: 3,
        });
      }
    } catch (error) {
      createErrorModal({
        title: t('sys.api.errorTip'),
        content: (error as unknown as Error).message || t('sys.api.networkExceptionMsg'),
        getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body,
      });
    } finally {
      loading.value = false;
    }
  }
  onMounted(() => {
    fun_GetUpdateFiles({ project: 'drone_enforcement' }).then((res) => {
      const { VITE_GLOB_UPLOAD_URL } = getAppEnvConfig();
      console.log(res);
      qrcodeValue.value = `${VITE_GLOB_UPLOAD_URL}/${res.filepath}`;
    });
    computedFormItem();
  });
</script>
<style lang="less" scoped>
  .login_title {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;

    // height: 68px;
    font-family: Alibaba PuHuiTi;
    font-weight: 900;
    // font-size: 22px;
    color: #131313;
  }
  .logon {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;

    background: #2f80c5;
    border-radius: 6px;

    font-family: Alibaba PuHuiTi;
    font-weight: 500;
    // font-size: 15px;
    color: #ffffff;

    &:hover {
      color: #ffffff !important;
    }
  }

  .bottom {
    position: absolute;
    bottom: 0px;
    left: 0px;
    // height: 50px;
    width: 100%;
    background: #eaf2f9;
    align-items: center;
    text-align: center;
    justify-content: center;

    Button {
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      font-size: 14px;
      color: #999999;
    }

    span {
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #999999;
    }
  }
</style>
