<script>
import {mapMutations, mapState} from "vuex";
import request, {frontendLoginUser} from "@/utils/request.js";

export default {
  name: "ZooContainer",
  data() {
    return {
      // 登录表单数据
      form: {
        username: 'admin',
        password: '123',
      },
      picture: [
        'https://www4.bing.com//th?id=OHR.BambooPanda_ZH-CN8455481760_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp',
        'https://www4.bing.com//th?id=OHR.PolarBearCubs_ZH-CN2913942257_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp',
        'https://www4.bing.com//th?id=OHR.WhiteEyes_ZH-CN1130380430_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp',
        'https://www4.bing.com//th?id=OHR.ZebraCousins_ZH-CN8159888859_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp'
      ]
    }
  },
  computed: {
    ...mapState(['loginUser'])
  },
  methods: {
    ...mapMutations(['updateLoginUser']),
    // 登录
    login() {
      console.log('登录', this.form)
      //判断表单是否为空
      if (!this.form.username || !this.form.password) {
        //返回提示
        return ElMessage({
          message: '用户名和密码不能为空',
          type: 'warning',
        })
      }

      //此处接入后端登录接口验证登录用户名和密码，验证通过方可通行
      request.login(this.form).then(response => {
        if (response.data.code === 1) {
          // 登录成功
          this.updateLoginUser(frontendLoginUser(response.data.data, this.form.username))
          localStorage.setItem('username', this.form.username);//本地存储登录用户名
          // 跳转到面板首页
          this.$router.push('/panel/home')
          return ElMessage({
            message: '登录成功',
            type: 'success',
          })
        } else {
          return ElMessage({
            message: '用户名不存在或密码错误',
            type: 'error',
          })
        }
      })
    },
    //重置表单
    reset() {
      this.form = {}
    },
  },
  mounted() {
    //清空退出登录的用户
    this.updateLoginUser('');

    //自动填充历史登录的用户
    this.form.username = localStorage.getItem('username');
  }

}
</script>

<template>
  <div id="login-root">
    <!--    背景图片-->
    <div>
      <el-carousel motion-blur height="700px" style="width: auto;">
        <el-carousel-item v-for="(item,index) in picture" :key="index" style="text-align: center">
          <img :src="item" width="auto" height="100%"/>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!--    登录表单-->
    <div class="center">
      <el-card style="width: 350px" shadow="always">
        <template #header>
          <div style="text-align: center;font-size: 25px">登录</div>
        </template>
        <el-form :model="form" label-width="auto" style="width: 400px">
          <el-form-item label="用户名">
            <el-input v-model="form.username" style="width: 240px" placeholder="请输入用户名"/>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
                v-model="form.password"
                style="width: 240px"
                type="password"
                placeholder="请输入密码"
                show-password
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

  </div>
</template>

<style scoped>
#login-root {
  width: 100%;
  height: 700px;
  background-color: aliceblue;
}

.center {
  opacity: 0.95;
}
</style>