<template>
  <div class="login-container">
    <div class="login-form">
      <img :src="exitIcon" alt="关闭" class="exit-icon" @click="emit('close')" />
      <header class="login-form__header">
        <span>{{ type !== 'modifyPassword' ? '登录' : '修改密码' }}</span>
      </header>
      <main class="login-form__main">
        <el-form ref="formRef" :model="login" label-width="auto" class="login-form__form">
          <el-form-item
            prop="username"
            :rules="[{ required: true, message: '账号不能为空' }]"
            v-if="type !== 'modifyPassword'"
          >
            <el-input
              placeholder="请输入您的账号"
              v-model="login.username"
              type="text"
              autocomplete="off"
              clearable
              class="el-input--default"
            />
          </el-form-item>
          <el-form-item
            prop="password"
            :rules="[{ required: true, message: type === 'modifyPassword' ? '原密码不能为空' : '密码不能为空' }]"
          >
            <el-input
              :placeholder="type !== 'modifyPassword' ? '请输入您的密码' : '请输入原密码'"
              v-model="login.password"
              type="password"
              autocomplete="off"
              show-password
              clearable
              class="el-input--default"
            />
          </el-form-item>
          <el-form-item
            prop="newPassword"
            v-if="type === 'modifyPassword'"
            :rules="[
              { required: true, message: '新密码不能为空' },
              { min: 6, message: '新密码至少6位' },
            ]"
          >
            <el-input
              placeholder="请输入新密码(至少6位)"
              v-model="login.newPassword"
              type="password"
              autocomplete="off"
              show-password
              clearable
              class="el-input--default"
            />
          </el-form-item>
          <el-form-item
            prop="confirmPassword"
            v-if="type === 'modifyPassword'"
            :rules="[
              { required: true, message: '确认密码不能为空' },
              { validator: validatePassword, trigger: 'blur' },
            ]"
          >
            <el-input
              placeholder="请确认密码"
              v-model="login.confirmPassword"
              type="password"
              autocomplete="off"
              show-password
              clearable
              class="el-input--default"
            />
          </el-form-item>
          <el-form-item
            prop="code"
            :rules="[{ required: true, message: '验证码不能为空' }]"
            v-if="type !== 'modifyPassword'"
          >
            <el-input placeholder="验证码" v-model="login.code" clearable class="el-input--default" />
          </el-form-item>
        </el-form>
      </main>
      <footer class="login-form__footer">
        <el-button class="login-form__button" @click="handleLogin">
          {{ type !== 'modifyPassword' ? '登录' : '修改密码' }}
        </el-button>
      </footer>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import exitIcon from 'assets/svg/exit.svg';
  import type { FormInstance } from 'element-plus';
  import { ElMessage } from 'element-plus';
  import useMockUserStore from '@/store/modules/mockUser';
  import { storeToRefs } from 'pinia';
  const mockUserStore = useMockUserStore();
  const { userInfo } = storeToRefs(mockUserStore);
  const props = defineProps<{
    type: 'login' | 'switchAccount' | 'modifyPassword';
  }>();
  const login = reactive({
    username: '',
    password: '',
    code: '',
    newPassword: '',
    confirmPassword: '',
  });
  const emit = defineEmits(['close']);
  const validatePassword = (rule: any, value: string, callback: any) => {
    if (value !== login.newPassword) {
      callback(new Error('两次输入密码不一致'));
    } else {
      callback();
    }
  };
  const formRef = ref<FormInstance>();
  const handleLogin = () => {
    if (!formRef.value) return;
    formRef.value.validate((valid: boolean) => {
      if (valid) {
        userInfo.value = login.username;
        const message =
          props.type === 'login' ? '登录成功' : props.type === 'switchAccount' ? '切换账号成功' : '修改密码成功';
        ElMessage.success(message);
        emit('close');
      }
    });
  };
</script>

<style lang="scss" scoped>
  .login-container {
    @include flex-center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.42);
    z-index: 1000;
  }
  .login-form {
    position: relative;
    width: 700cpx;
    padding: 0 33cpx;
    background: $white-color;
    border-radius: 24cpx;
    &__header {
      width: 100%;
      height: 100cpx;
      font-size: 28cpx;
      font-weight: 550;
      color: #333;
      text-align: center;
      line-height: 100cpx;
      letter-spacing: 5cpx;
    }
    &__main {
      @include flex-center;
      flex-direction: column;
      gap: 20cpx;
    }
    &__code {
      @include flex-center;
      justify-content: space-between;
      width: 100%;
      height: 72cpx;
      .el-input--default {
        width: 50%;
      }
    }
    &__footer {
      width: 100%;
      height: 100cpx;
      margin-top: 18cpx;
      .login-form__button {
        width: 100%;
        height: 74cpx;
        font-size: 24cpx;
        color: $white-color;
        background-color: $primary-color;
        border-radius: 8cpx;
        cursor: pointer;
      }
    }
    .exit-icon {
      position: absolute;
      top: 15cpx;
      right: 16cpx;
      width: 40cpx;
      height: 40cpx;
      cursor: pointer;
    }
  }
  .login-form__form {
    display: flex;
    flex-direction: column;
    gap: 2cpx;
    width: 100%;
  }
  .el-input--default {
    width: 100%;
    height: 72cpx;
    :deep(.el-input__inner) {
      font-size: 20cpx;
      color: #999;
    }
  }
</style>
