<template>
  <div class="login-page">
    <div class="login-bg">
      <div class="login-particles"></div>
    </div>
    <div class="login-container">
      <div class="login-header">
        <h1>实验室安全智慧化管控中心</h1>
        <p>贵州大学</p>
      </div>
      <div class="login-form-wrapper">
        <h2>用户登录</h2>
        <el-form ref="loginForm" :model="form" :rules="rules" class="login-form">
          <el-form-item prop="username">
            <el-input
              v-model="form.username"
              prefix-icon="el-icon-user"
              placeholder="请输入用户名/手机号"
              clearable
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="form.password"
              prefix-icon="el-icon-lock"
              type="password"
              placeholder="请输入密码"
              show-password
              @keyup.enter.native="handleLogin"
            />
          </el-form-item>
          <el-form-item prop="captcha">
            <div class="captcha-row">
              <el-input
                v-model="form.captcha"
                prefix-icon="el-icon-key"
                placeholder="请输入验证码"
                clearable
              />
              <img
                v-if="captchaImage"
                :src="captchaImage"
                class="captcha-img"
                title="点击刷新验证码"
                @click="refreshCaptcha"
              />
              <div v-else class="captcha-img captcha-loading" @click="refreshCaptcha">加载中...</div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :loading="loading"
              class="login-btn"
              @click="handleLogin"
            >
              登 录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import md5 from 'js-md5'
import { loginApi, getCaptcha } from '@/api'

export default {
  name: 'Login',
  data() {
    return {
      form: {
        username: '',
        password: '',
        captcha: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      loading: false,
      captchaImage: '',
      captchaUuid: '',
      needCaptcha: true
    }
  },
  mounted() {
    this.refreshCaptcha()
  },
  methods: {
    async refreshCaptcha() {
      this.captchaImage = ''
      try {
        const data = await getCaptcha()
        this.needCaptcha = data.captcha
        if (data.captcha) {
          this.captchaImage = 'data:image/jpeg;base64,' + data.image
          this.captchaUuid = data.uuid
        }
      } catch (e) {
        this.$message.error('获取验证码失败')
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(async (valid) => {
        if (!valid) return

        this.loading = true
        try {
          const params = {
            account: this.form.username,
            password: md5(this.form.password)
          }
          if (this.needCaptcha) {
            params.code = this.form.captcha
            params.uuid = this.captchaUuid
          }
          const res = await loginApi(params)
          this.$store.dispatch('login', { token: res.data.token, userInfo: {} })
          this.$message.success('登录成功')
          this.$router.push('/lab-status')
        } catch (err) {
          this.$message.error(err.message || '登录失败，请重试')
          this.refreshCaptcha()
          this.form.captcha = ''
        } finally {
          this.loading = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  width: 1920px;
  height: 1080px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(135deg, #0a1628 0%, #0d2247 50%, #0a1a3a 100%);
  overflow: hidden;
}

.login-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 50%, rgba(30, 144, 255, 0.08) 0%, transparent 60%);
}

.login-container {
  position: relative;
  z-index: 1;
  text-align: center;
}

.login-header {
  margin-bottom: 50px;

  h1 {
    font-size: 36px;
    color: #fff;
    letter-spacing: 6px;
    text-shadow: 0 0 20px rgba(30, 144, 255, 0.5);
  }

  p {
    font-size: 16px;
    color: $text-secondary;
    margin-top: 12px;
    letter-spacing: 4px;
  }
}
.login-form-wrapper {
  width: 420px;
  padding: 40px;
  margin:40px;
  background: rgba(13, 34, 71, 0.85);
  border: 1px solid rgba(30, 144, 255, 0.3);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 40px rgba(30, 144, 255, 0.1);

  h2 {
    font-size: 22px;
    color: #fff;
    margin-bottom: 30px;
    letter-spacing: 2px;
  }
}

.login-form {
  .el-input__inner {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    height: 44px;

    &::placeholder {
      color: rgba(255, 255, 255, 0.3);
    }

    &:focus {
      border-color: $accent-blue;
    }
  }

  .el-input__prefix {
    color: $text-secondary;
  }
}

.captcha-row {
  display: flex;
  gap: 12px;

  .el-input {
    flex: 1;
  }

  .captcha-img {
    width: 120px;
    height: 44px;
    border: 1px solid rgba(30, 144, 255, 0.3);
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    object-fit: cover;
    display: block;
    flex-shrink: 0;

    &:hover {
      border-color: rgba(30, 144, 255, 0.6);
    }
  }

  .captcha-loading {
    line-height: 44px;
    text-align: center;
    background: rgba(30, 144, 255, 0.15);
    color: $text-secondary;
    font-size: 13px;
  }
}

.login-btn {
  width: 100%;
  height: 44px;
  font-size: 16px;
  letter-spacing: 6px;
  background: linear-gradient(90deg, #1565c0, #1e88e5);
  border: none;

  &:hover {
    background: linear-gradient(90deg, #1e88e5, #42a5f5);
  }
}
</style>
