<template>
  <div class="login-page">
    <div class="login-form">
      <div class="system-name">
        <span>XX地质灾害管理平台</span>
      </div>
      <div class="login-form-wrapper">
        <a-tabs v-model:activeKey="activeKey">
          <a-tab-pane key="1" tab="账号登录">
            <Form
              class="p-4 enter-x"
              :model="formData"
              :rules="getFormRules"
              ref="formRef"
              v-show="getShow"
              @keypress.enter="handleLogin"
            >
              <FormItem name="account" class="enter-x">
                <Input
                  size="large"
                  v-model:value="formData.account"
                  :placeholder="t('sys.login.userName')"
                  class="fix-auto-fill"
                />
              </FormItem>
              <FormItem name="password" class="enter-x">
                <InputPassword
                  size="large"
                  visibilityToggle
                  v-model:value="formData.password"
                  :placeholder="t('sys.login.password')"
                />
              </FormItem>

              <ARow class="enter-x">
                <ACol :span="12">
                  <FormItem>
                    <Checkbox v-model:checked="rememberMe" size="small">
                      {{ t('sys.login.rememberMe') }}
                    </Checkbox>
                  </FormItem>
                </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>

              <FormItem class="enter-x">
                <Button type="primary" size="large" block @click="handleLogin" :loading="loading">
                  {{ t('sys.login.loginButton') }}
                </Button>
              </FormItem>
              <ARow class="enter-x flex justify-between">
                <ACol :md="11" :xs="24">
                  <Button block @click="setLoginState(LoginStateEnum.LOGIN)">
                    {{ t('sys.login.userNameInFormTitle') }}
                  </Button>
                </ACol>
                <ACol :md="11" :xs="24">
                  <Button block @click="setLoginState(LoginStateEnum.MOBILE)">
                    {{ t('sys.login.mobileSignInFormTitle') }}
                  </Button>
                </ACol>
              </ARow>
            </Form>
          </a-tab-pane>
          <a-tab-pane key="2" tab="验证码登录" force-render>Content of Tab Pane 2</a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, unref } from 'vue';
  import { Checkbox, Form, Input, Row, Col, Button } from 'ant-design-vue';
  import Flexible from '/@/views/lifeline/bigscreen/common/flexible';
  import { onMounted } from 'vue';
  import { onUnmounted } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { createLocalStorage, createSessionStorage } from '/@/utils/cache';
  import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useUserStore } from '/@/store/modules/user';
  import { getPlatForm } from '/@/api/oem';

  const { t } = useI18n();
  const { notification, createMessage } = useMessage();
  const { getFormRules } = useFormRules();

  const userName = ref<String>(null as any);
  const keywords = ref<String>(null as any);
  const flexibleObject = ref(null as any);
  const activeKey = ref('1');
  const storage = createLocalStorage();
  const sStorage = createSessionStorage();
  const formRef = ref();
  const loading = ref(false);
  const rememberMe = ref(false);
  const userInfo = storage.get('userInfo') || sStorage.get('userInfo');
  const formData = reactive({
    account: userInfo?.account ?? 'sysadmin',
    password: userInfo?.password ?? 'Sysadmin@123',
  });
  const userStore = useUserStore();
  const ACol = Col;
  const ARow = Row;
  const FormItem = Form.Item;
  const InputPassword = Input.Password;

  onMounted(() => {
    flexibleObject.value = new Flexible();
  });
  onUnmounted(() => {
    flexibleObject.value.removeflexible();
    flexibleObject.value = null;
  });

  const { validForm } = useFormValid(formRef);

  async function handleLogin() {
    const data = await validForm();
    if (!data) return;
    if (unref(rememberMe)) {
      storage.set('userInfo', formData);
      sStorage.set('userInfo', formData);
    } else {
      storage.set('userInfo', null);
      sStorage.set('userInfo', null);
    }
    loading.value = true;
    const userInfo = await userStore
      .login({
        password: data.password,
        username: data.account,
        mode: 'modal', //不要默认的错误提示
      })
      .catch((data) => {
        //登录失败如果是502，返回的html,那么提示框什么都没有
        if (data.message == 'Invalid username or password' && typeof data.message == 'string') {
          createMessage.error(data.message);
        } else if (data.message == '账号已过期,请联系管理员') {
          createMessage.error(data.message);
        } else {
          createMessage.error(data.message);
        }
      });
    if (userInfo) {
      notification.success({
        message: t('sys.login.loginSuccessTitle'),
        description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realName}`,
        duration: 3,
      });
      const res = await getPlatForm();
      storage.set('platformInfo', res);
      userStore.setPlatInfo(res);
      // 设置icon
      let link = (document.querySelector("link[rel*='icon']") ||
        document.createElement('link')) as HTMLLinkElement;
      link.type = 'image/x-icon';
      link.rel = 'shortcut icon';
      link.href = res.icon ?? '/favicon.ico';
      document.getElementsByTagName('head')[0].appendChild(link);

      var _hmt = _hmt || [];
      (function () {
        var hm = document.createElement('script');
        hm.src = 'https://hm.baidu.com/hm.js?909f8e22a361b08e4f5ea3918500aede';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(hm, s);
      })();
    }
    loading.value = false;
  }
</script>
<style lang="less" scoped>
  :deep(.ant-tabs-nav) .ant-tabs-tab-active {
    color: #ffe076 !important;
    font-size: 24px;
    background: linear-gradient(0deg, #ffe076 0%, #ffffff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }
  :deep(.ant-tabs-tab) {
    font-size: 24px !important;
  }
  :deep(.ant-tabs-ink-bar) {
    background: #ffe076;
    width: 130px !important;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #c6ecff;
  }
  .login-form-wrapper {
    width: 470px;
    height: 492px;
    // padding: 48px 58px 0px 90px;
    background: ~"url('/@/views/lifeline/bigscreen/images/loginPage/login-form-wrapper.png')" no-repeat;
    .ant-tabs-line {
      :deep(.ant-tabs-bar) {
        border-bottom: 0px solid #f0f0f0;
      }
    }
    .ant-tabs-nav {
      :deep(.ant-tabs-nav) {
        color: #ffe076 !important;
      }
    }
  }
  .login-page {
    width: 100%;
    height: 100%;
    background: ~"url('/@/views/lifeline/bigscreen/images/loginPage/bg.png')" no-repeat;
    background-size: 100% 100%;
    color: #fff;
    .login-form {
      display: flex;
      position: fixed;
      width: 2.3438rem;
      flex-flow: column;
      right: 10%;
      top: 30%;

      .system-name {
        font: bold 0.125rem AlimamaShuHeiTi-Bold;
        background: linear-gradient(0deg, #fff 0%, #96ffcf 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        padding-left: 133px;
        margin-bottom: 20px;
      }

      .input-item {
        width: 320px;
        margin-top: 0.2604rem;
        background: transparent;
        border: none;
        line-height: 0.2083rem;
        color: #fff;
        box-shadow: inset 0px 0px 6px 2px #16c0ff;
        border-radius: 2px;

        :deep(.ant-input) {
          background: transparent;
          color: #fff;
        }

        :deep(.ant-input-suffx) {
          color: #fff;
        }

        :deep(input:-webkit-autofill) {
          -webkit-text-fill-color: #fff;
          -webkit-box-shadow: 0 0 0 10000px rgba(0, 0, 0, 0) inset !important;
        }

        :deep(.ant-input-password-icon) {
          color: #fff;
        }
      }

      .submit-button {
        margin-top: 0.3646rem;
        justify-items: center;
        width: 340px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: linear-gradient(-90deg, #00bbff, #01d8eb);
        box-shadow: 0px 12px 8px 0px rgba(3, 30, 55, 0.1);
        border-radius: 2px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #ffffff;
        cursor: pointer;
      }
    }
  }
</style>
