<template>  
    <div class="login-container">  
      <h2 class="login-title">管理后台</h2>  
      <el-form :model="loginForm" ref="loginForm" :rules="rules" label-width="80px" class="login-form">  
        <el-form-item label="用户名" prop="username">  
          <el-input v-model="loginForm.username"></el-input>  
        </el-form-item>  
        <el-form-item label="密码" prop="password">  
          <el-input type="password" v-model="loginForm.password"></el-input>  
        </el-form-item>  
        <el-form-item label="验证码" prop="captcha">  
          <div class="codeDiv">
          <el-input v-model="loginForm.captcha" class="code"></el-input>  
          <img class="captcha-img" :src="imgUrl" alt="点击验证码" @click="getCaptcha" />  
          </div>
        </el-form-item>  
        <el-form-item>  
          <el-button type="primary" @click="handleSubmit">登录</el-button>  
        </el-form-item>  
      </el-form>  
    </div>  
  </template>  
    
  <script>  
  import utils from  '@/static/js/utils'
  export default {  
    data() {  
      return {  
        imgUrl:'',
        loginForm: {  
          username: '',  
          password: '',  
          captcha: '1234'  
        },  
        rules: {  
          username: [  
            { required: true, message: '请输入用户名', trigger: 'blur' }  
          ],  
          password: [  
            { required: true, message: '请输入密码', trigger: 'blur' }  
          ],  
          captcha: [  
            { required: true, message: '请输入验证码', trigger: 'blur' }  
          ]  
        }  
      }  
    },  

    methods: {  
      handleSubmit() {  
        this.$refs.loginForm.validate(valid => {  
          if (valid) {  
            let parames={
                username:this.loginForm.username,
                password:this.loginForm.password,
                captcha:this.loginForm.captcha,
                type:1,
            }
            this.$api.login.loginApi(parames).then(res=>{
                console.log(res)
                if(res.code==200){
                 
                  document.setCookie("token",res.data.token,86400)
              
                  this.$message.success('登录成功')
                   this.$router.push("/left/complaintList")
                }else{
                    this.$message.error(res.message)
                }
            })
            // 这里可以添加登录逻辑，例如发送请求到后端进行验证  
            // alert('登录成功！');  
          } else {  
            console.log('验证失败！');  
            return false;  
          }  
        });  
      },  
      getCaptcha() {  
        // 这里添加获取新验证码的逻辑，通常会调用后端API来获取新验证码图片并更新img的src  
        // 例如: this.captchaImgSrc = 'your-new-captcha-api-url';  
        // 注意：为了简单起见，这里没有直接实现这个逻辑  

        this.$api.pub.verifyCode().then(res=>{
            this.imgUrl = res.data
        })
      }  
    },
    created () {
      this.getCaptcha()
    } 
  }  
  </script>  
    
  <style scoped>  
  .login-container {  
    width: 300px;  
    padding: 20px;  
    border: 1px solid #ccc;  
    border-radius: 5px;  
    margin: 100px auto;  
    text-align: center;  
  }  
    
  .login-title {  
    margin-bottom: 20px;  
  }  
  .codeDiv {
    display: flex;
  }

  .login-form {  
    margin-bottom: 20px;  
  }  
  .login-form .code{
    width: 100px;
  }
  .captcha-img {  
    cursor: pointer;  
    margin-left: 10px;  
    width: 96px;
    height: 40px;;
  }  
  </style>