<template>
  <div class="home">
    <div class="header">
      <User :user="userInfo" />
    </div>
    <Navs />
    <div class="list">
      <div class="list-header">
        <span>志愿活动</span>
        <div class="list-more" @click="goMoreActs">
          查看更多
          <img src="../assets/rArrow.png" />
        </div>
      </div>
      <div class="actList">
        <ActItem 
          v-for="item in list" 
          :key="item.id" 
          :data="item"
          @goDetails="goDetails"
        />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import User from "../components/Home/User.vue";
import Navs from "../components/Home/Navs.vue";
import ActItem from "../components/Home/ActItem.vue";

export default {
  components: {
    User,
    Navs,
    ActItem,
  },
  data() {
    return {
      userInfo: {
        avatar: "",
        name: "",
      },
      list: [],
    };
  },
  methods: {
    fetchUserInfo() {
      const that = this;
      axios.get("/api/userInfo").then(function (response) {
        const { error, data = {} } = response.data;
        if (error === 0) {
          that.userInfo = {
            avatar: data.avatar,
            name: data.name,
          };
        }
      });
    },
    fetchActList() {
      const that = this;
      axios.get("/api/actList").then(function (response) {
        const { error, data = {} } = response.data;
        if (error === 0) {
          that.list = data.list;
        }
      });
    },
    goDetails(id) {
      this.$router.push("/actDetails?id=" + id);
    },
    goMoreActs() {
      this.$router.push("/loveActs");
    },
  },
  mounted() {
    this.fetchUserInfo();
    this.fetchActList();
  },
};
</script>

<style scoped>
.home {
  min-height: 100vh;
  background: #f5f5f5;
}

.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px 0;
}

.header h1 {
  text-align: center;
  margin-bottom: 15px;
}

.list {
  padding: 15px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-weight: bold;
}

.list-more {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #666;
  font-size: 14px;
  cursor: pointer;
}

.list-more img {
  width: 16px;
  height: 16px;
}
</style>
