<template>
    <van-pull-refresh v-model="refreshing" @refresh="handleRefresh">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" :offset="50" @load="getList"
            v-if="dataList.length">
            <div class="list">
                <div class="item" v-for="(item, index) in dataList" :key="index">
                    <img :src="fileDomain + item.coverpicture"
                        @click="router.push({ name: 'home-content', params: { id: item.materialId } })">
                    <div class="desc">
                        <span class="title">
                            <van-text-ellipsis :content="item.materialTitle" />
                        </span>
                        <div class="tag">
                            <span v-for="(tagName, index) in item.tagName.split(',')" :key="index">{{
                                tagName }}</span>
                        </div>
                        <div class="info">
                            <van-button type="primary" size="mini" block @click="handlePublishPicture(item)"
                                v-if="active == 0">立即发布</van-button>
                            <div class="user" v-else>
                                <div class="user-box">
                                    <img src="@/static/image/avatar.png">
                                    <span>{{ item.author }}</span>
                                </div>
                                <!-- <div v-if="active == 1">
                                    <van-icon name="ellipsis" size="26" color="#545454" @click="handleMore(item)" />
                                </div> -->
                                <div v-if="active == 2">
                                    <van-icon name="star" color="#F1C13E" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </van-list>
        <van-empty description="暂无数据" v-else />
    </van-pull-refresh>

    
</template>
<script setup>
import useUserStore from '@/store/user'
import { selectMinePictureList, selectCollectPictureList } from '@/api/publish'
const props = defineProps({
    active: {
        type: Number,
        default: 0
    }
})
const emits = defineEmits(["total", "refresh", "opreation", "publish"])
const router = useRouter()
const userStore = useUserStore()
const refreshing = ref(false)
const loading = ref(false)
const finished = ref(true)
const fileDomain = import.meta.env.VITE_APP_FILE_URL
const page = reactive({
    pageNum: 0,
    pageSize: 10
})
const catalog = reactive({
    userId: null,
    materialTitle: '',
    collect: 1,
    materialType: 3,
    typeClassify: '',
    sourceName: '',
    organizeInt: [],
    tagId: '',
    beginTime: '',
    endTime: ''
})
const dataList = ref([])
const getList = async () => {
    page.pageNum++
    loading.value = true
    catalog.userId = userStore.userinfo.user.id
    catalog.collect = props.active == 0 ? 0 : 1
    let res = null
    if (props.active == 2) {
        res = await selectCollectPictureList(page, catalog)

    } else {
        res = await selectMinePictureList(page, catalog)
    }
    setDataList(res)
    emits('total', { activeIndex: props.active, value: res.data.total })
}
const setDataList = (res) => {
    if (refreshing.value) {
        dataList.value = res.data.list
    } else {
        dataList.value.push(...res.data.list)
    }
    loading.value = false
    finished.value = dataList.value.length >= res.data.total
    refreshing.value = false
}
getList()
const handleRefresh = () => {
    refreshing.value = true
    page.pageNum = 0
    getList()
}

const handleMore = (e) => {
    emits('opreation', e)
}

const handlePublishPicture = (e) => {
    emits('publish', e)
}

defineExpose({
    refresh: handleRefresh
})
</script>

<style lang="scss" scoped>
.list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 20px;

    .item {
        break-inside: avoid;
        background-color: #ffffff;
        border-radius: 5px;
        margin-bottom: 10px;
        width: 49%;

        img {
            width: 100%;
            height: 150px;
            object-fit: cover;
        }

        .desc {
            padding: 5px 10px;
            display: flex;
            flex-direction: column;
            gap: 5px;

            .title {
                font-size: 16px;

            }

            .tag {
                display: flex;
                flex-wrap: wrap;
                gap: 3px;

                span {
                    font-size: 14px;
                    padding: 0 5px;
                    background-color: #F3F8FF;
                    color: #4C70AC;
                    font-size: 12PX;
                    border-radius: 3px;
                }
            }

            .info {
                display: flex;
                justify-content: space-between;
                padding: 5px 0;

                .user {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;

                    .user-box {
                        display: flex;
                        gap: 7px;
                        align-items: center;

                        img {
                            width: 23px;
                            height: 23px;
                            border-radius: 50%;
                        }

                        span {
                            color: #9F9F9F;
                            font-size: 12px;
                        }
                    }


                }
            }

            .collect {
                display: flex;
                align-items: center;
                gap: 3px;

                span {
                    color: #9F9F9F;
                    font-size: 12px;
                }
            }
        }
    }
}
</style>