<template>
  <div class="login-container">
    <div class="form-container">
      <img src="@/assets/img/login/right.svg" alt="" class="right-img" />
      <div class="login-form">
        <div class="title">Hi,welcome back</div>
        <div class="sumary-title">Cashier account</div>
        <el-form ref="formRef" :model="loginForm">
          <el-form-item prop="username" :rules="[]">
            <el-input v-model="loginForm.username" />
          </el-form-item>
          <el-form-item prop="password" :rules="[]">
            <el-input v-model="loginForm.password" :type="inputType">
              <template #suffix>
                <img
                  v-if="inputType === 'password'"
                  src="@/assets/img/login/close-one.svg"
                  @click="inputType = ''"
                />
                <img @click="inputType = 'password'" v-else src="@/assets/img/login/open-one.svg" />
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <div class="remember-password">
          <el-switch v-model="isRremember" />
          <div class="remember-text">remember password</div>
        </div>
        <el-button class="login-btn" @click="loginHandler" type="primary">log on</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useUserStore } from '@/store/user'
  import { reactive, ref, useTemplateRef } from 'vue'
  const loginFormRef = useTemplateRef('formRef')

  const inputType = ref('password')
  const isRremember = ref(false)

  const loginForm = reactive({
    username: 'cheshidp',
    password: '123456',
    loginFrom: 'cashier',
  })

  const { login } = useUserStore()
  const loginHandler = async () => {
    await login(loginForm)
  }
</script>

<style scoped lang="scss">
  @use '@/assets/main.scss' as *;

  .login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background: url('@/assets/img/login/bg.svg') no-repeat center center;
    background-size: cover;
    box-sizing: border-box;

    .form-container {
      width: pxToVW(1600);
      height: pxToVW(900);
      flex-shrink: 0;
      border-radius: 20px;
      background: #fff;
      overflow: hidden;
      display: flex;
      box-sizing: border-box;
      padding: 0 pxToVW(102);
      justify-content: space-between;

      .login-form {
        width: pxToVW(544);
        box-sizing: border-box;
        padding-top: pxToVH(229);

        .title {
          color: #000;
          font-family: 'PingFang SC';
          font-size: 40px;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
          text-transform: capitalize;
          margin-bottom: pxToVH(50);
        }

        .sumary-title {
          color: #333;
          font-family: 'PingFang SC';
          font-size: 20px;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
          text-transform: capitalize;
          margin-bottom: pxToVH(8);
        }

        :deep(.el-form-item) {
          --el-fill-color-blank: #f6f4f4;
          .el-input {
            height: pxToVH(64);
          }

          &:first-child {
            margin-bottom: pxToVH(30);
          }
        }

        .remember-password {
          display: flex;
          align-items: center;
          margin-bottom: pxToVH(24);

          .remember-text {
            display: block;
            color: #1a1a1a;
            font-feature-settings: 'liga' off, 'clig' off;
            font-family: 'PingFang SC';
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 22px; /* 157.143% */
            letter-spacing: 0.3px;
            text-transform: capitalize;
            margin-left: pxToVW(8);
          }
        }

        .login-btn {
          display: flex;
          width: 100%;
          height: 54px;
          padding: 10px;
          justify-content: center;
          align-items: center;
          gap: 10px;
          flex-shrink: 0;
          border-radius: 8px;
          background: #f67f20;
          color: #fff;
          font-family: 'PingFang SC';
          font-size: 20px;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
        }

        img {
          cursor: pointer;
          width: 30px;
        }
      }

      .right-img {
        width: calc(100% - pxToVW(763));
        flex-shrink: 0;
      }
    }
  }
</style>
