<template>
    <div class="container">
        <div class="searchBox">
            <div class="search">
                <span class="search-icon"></span>
                <input
                    placeholder="请输入地点、活动名称等关键字"
                    v-model="keyword"
                />
            </div>
        </div>

        <div class="body">
            <van-list
                :loading="loading"
                :finished="true"
                finished-text="没有更多了"
            >
                <ActItem
                    v-for="item in filteredActList"
                    :key="item.id"
                    :data="item"
                    @goDetails="goDetails"
                />
            </van-list>
        </div>

        <button class="fBtn" @click="goMyApply">我的报名</button>
    </div>
</template>

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

export default {
    components: {
        ActItem,
    },
    data() {
        return {
            allActList: [], // 用于存储所有活动数据
            loading: false,
            keyword: "",
        };
    },
    computed: {
        // 创建一个计算属性来根据关键字筛选活动列表
        filteredActList() {
            if (!this.keyword.trim()) {
                return this.allActList; // 如果关键字为空，返回所有活动
            }
            const searchTerm = this.keyword.trim().toLowerCase();
            return this.allActList.filter(item => {
                const title = (item.title || '').toLowerCase();
                const place = (item.place || '').toLowerCase();
                return title.includes(searchTerm) || place.includes(searchTerm);
            });
        }
    },
    methods: {
        // 获取完整的活动列表
        fetchActList() {
            this.loading = true;
            axios
                .get("/api/actList")
                .then(response => {
                    const { error, data = {} } = response.data;
                    if (error === 0) {
                        this.allActList = data.list || [];
                    }
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        goMyApply() {
            this.$router.push("/myApply");
        },
        goDetails(id) {
            this.$router.push("/actDetails?id=" + id);
        },
    },
    mounted() {
        // 组件加载时获取所有数据
        this.fetchActList();
    },
};
</script>

<style scoped>
.searchBox {
    padding: 15px;
    background: white;
}

.search input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    margin-left: 10px;
    color: #333;
    font-size: 14px;
}

.search input::placeholder {
    color: #999;
}

.body {
    padding: 10px;
}

.fBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 24px;
    background: #ff5d23;
    color: white;
    border: none;
    border-radius: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}
</style>