<template>
  <div class="login">
    <div class="login-box">
      <img src="@/assets/login/login-l.png" alt="" />
      <div class="login-form">
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
          <div class="login-form-title">
            <div class="logo-box">
              <!-- 调整下面 width 和 height 的值到你想要的大小（单位 px） -->
              <img 
                src="@/assets/login/chef-logo.png" 
                style="width: 45px; height: 45px; object-fit: contain;" 
              />
              <div class="text-group">
                <div class="title-cn">小厨外卖</div>
                <div class="title-en">Little Chef Takeout</div>
              </div>
            </div>
          </div>

          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              type="text"
              auto-complete="off"
              placeholder="账号"
              prefix-icon="iconfont icon-user"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="密码"
              prefix-icon="iconfont icon-lock"
              @keyup.enter.native="handleLogin"
            />
          </el-form-item>
          <el-form-item style="width: 100%">
            <el-button
              :loading="loading"
              class="login-btn"
              size="medium"
              type="primary"
              style="width: 100%"
              @click.native.prevent="handleLogin"
            >
              <span v-if="!loading">登录</span>
              <span v-else>登录中...</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Form as ElForm } from 'element-ui'
import { UserModule } from '@/store/modules/user'

@Component({
  name: 'Login',
})
export default class extends Vue {
  private validateUsername = (rule: any, value: string, callback: Function) => {
    if (!value) {
      callback(new Error('请输入用户名'))
    } else {
      callback()
    }
  }
  private validatePassword = (rule: any, value: string, callback: Function) => {
    if (value.length < 6) {
      callback(new Error('密码必须在6位以上'))
    } else {
      callback()
    }
  }
  private loginForm = {
    username: 'admin',
    password: '123456',
  }

  loginRules = {
    username: [{ validator: this.validateUsername, trigger: 'blur' }],
    password: [{ validator: this.validatePassword, trigger: 'blur' }],
  }
  private loading = false

  private handleLogin() {
    ;(this.$refs.loginForm as ElForm).validate(async (valid: boolean) => {
      if (valid) {
        this.loading = true
        await UserModule.Login(this.loginForm as any)
          .then((res: any) => {
            if (String(res.code) === '1') {
              this.$router.push('/')
            } else {
              this.loading = false
            }
          })
          .catch(() => {
            this.loading = false
          })
      } else {
        return false
      }
    })
  }
}
</script>

<style lang="scss">
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: linear-gradient(135deg, #e64340 0%, #b32d2a 100%);
}

.login-box {
  width: 1000px;
  height: 474.38px;
  border-radius: 8px;
  display: flex;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  
  > img {
    width: 60%;
    height: auto;
    object-fit: cover;
    border-radius: 8px 0 0 8px;
  }
}

.login-form {
  background: #ffffff;
  width: 40%;
  border-radius: 0 8px 8px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .el-form {
    width: 240px;
  }
  
  .el-form-item {
    margin-bottom: 30px;
  }
  
  .el-input__inner {
    border: 0;
    border-bottom: 1px solid #e9e9e8;
    border-radius: 0;
    font-size: 12px;
    height: 32px;
    line-height: 32px;
  }
}

.logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 40px;
}

.text-group {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  flex-shrink: 0;
  text-align: center;
}

.title-cn {
  font-size: 24px;
  font-weight: bold;
  color: #e64340;
  white-space: nowrap;
  line-height: 1.2;
}

.title-en {
  font-size: 10px;
  color: #A87A62;
  white-space: nowrap;
  line-height: 1.2;
  font-weight: bold;
  margin-top: 4px;
}

.login-btn {
  border-radius: 17px;
  padding: 11px 20px !important;
  margin-top: 10px;
  font-size: 12px;
  border: 0;
  color: #fff;
  background-color: #e64340;
  
  &:hover {
    background-color: #c53030;
  }
}
</style>