<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

import SvgIcon from '@/components/SvgIcon.vue';
import { useRequest } from '@/hooks/request';
import { useUserInfoStore } from '@/stores/user-info';
import { t } from '@/i18n';
import { loginUser } from '@/api';

import { setToken } from '../../utils/auth';

import type { Rule } from 'ant-design-vue/es/form';
import type { LoginUser } from '@/types';

const router = useRouter();
const { saveToken } = useUserInfoStore();
const { handleRequest } = useRequest();
const loginForm = ref<LoginUser>({
  mobile: '',
  password: '',
});
const rules: Record<string, Rule[]> = {
  password: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  mobile: [
    {
      validator: (_rule: unknown, value: string) => {
        if (!isValidPhone(value)) {
          return Promise.reject('手机号格式错误');
        }
        return Promise.resolve();
      },
    },
  ],
};
// 手机号校验函数
const isValidPhone = (phone: string): boolean => {
  return /^1[3-9]\d{9}$/.test(phone);
};
const addLog = () => {
  handleRequest(async () => {
    const { access_token } = await loginUser({
      grant_type: 'mobile_password',
      ...loginForm.value,
    });
    if (access_token) {
      saveToken(access_token);
      setToken(access_token);
      router.push('/env-monitor/index');
    }
  });
};
</script>

<template>
  <div>
    <AFlex>
      <div class="login-bgc">
        <AButton type="text" @click="$router.go(-1)">
          <AFlex align="center"> <SvgIcon class="icon-left" name="left" /> 返回 </AFlex>
        </AButton>
      </div>

      <AFlex class="login-div" align="center">
        <div>
          <div class="login-title">暖通智控平台</div>
          <AForm
            ref="formRef"
            :colon="false"
            layout="vertical"
            :model="loginForm"
            :rules="rules"
            :hide-required-mark="true"
          >
            <AFormItem label="账号" name="mobile">
              <AInput class="input-width" v-model:value="loginForm.mobile" placeholder="请输入手机号">
                <template #prefix>
                  <SvgIcon name="calendar" class="icon-style" />
                </template>
              </AInput>
            </AFormItem>
            <AFormItem label="密码" name="password">
              <AInput class="input-width" v-model:value="loginForm.password" placeholder="请输入密码">
                <template #prefix>
                  <SvgIcon name="calendar" class="icon-style" />
                </template>
              </AInput>
            </AFormItem>
          </AForm>
          <AButton type="primary" class="button-style" @click="addLog">登陆</AButton>
        </div>
      </AFlex>
    </AFlex>
  </div>
</template>

<style lang="scss" scoped>
.icon-left {
  margin-right: 12px;
  font-size: 14px;
  color: #999;
}

.icon-style {
  margin-right: 10px;
}

.button-style {
  width: 422px;
  height: 56px;
  margin-top: 32px;
  border-radius: 28px;
}

.input-width {
  width: 422px;
  height: 56px;
}

.login-title {
  margin-bottom: 80px;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 44px;
  color: #333;
  text-align: left;
}

.login-bgc {
  width: 710px;
  height: 100vh;
  padding-top: 32px;
  padding-left: 30px;
  zoom: 1;
  background: url('../../assets/img/login-view.png') no-repeat center 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 0, 0;
  background-size: 710px 100vh;
}

.login-div {
  width: calc(100vw - 710px);
  height: 100vh;
  padding-left: 154px;
}
</style>
