<template>
    <Header backgroundBox="white" :show="false">
        <div class="tools">
            <van-search v-model="catalog.materialTitle" shape="round" placeholder="请输入搜索关键词" @search="handleRefresh"
                @clear="handleRefresh" />
            <div class="right" @click="router.push({ name: 'publish' })">
                <van-icon name="add" size="26" color="#0E7CE3" />
                <span>新建</span>
            </div>
        </div>
    </Header>
    <van-sticky :offset-top="contentHeight">
        <div class="header">
            <!-- <div class="tools">
                <van-search v-model="catalog.materialTitle" shape="round" placeholder="请输入搜索关键词" @search="handleRefresh"
                    @clear="handleRefresh" />
                <div class="right" @click="router.push({ name: 'publish' })">
                    <van-icon name="add" size="26" color="#0E7CE3" />
                    <span>新建</span>
                </div>
            </div> -->
            <div class="menu">
                <van-tabs v-model:active="tabsActive" line-width="20" title-active-color="#0E7CE3"
                    title-inactive-color="#82868E" @change="handleRefresh">
                    <van-tab title="推荐"></van-tab>
                    <van-tab title="最新"></van-tab>
                </van-tabs>
                <div class="filtrate">
                    <div class="item" @click="openTypePopup" :class="{ active: typeActive }">
                        <span>类型</span>
                        <van-icon :name="typeActive ? 'arrow-up' : 'arrow-down'" size="13" />
                    </div>
                    <div class="item" @click="openCatalogPopup" :class="{ active: tagsActive }">
                        <span>标签</span>
                        <van-icon :name="tagsActive ? 'arrow-up' : 'arrow-down'" size="13" />
                    </div>
                    <div class="item" @click="openSourcePopup" :class="{ active: sourceChannelActive }">
                        <span>来源</span>
                        <van-icon :name="sourceChannelActive ? 'arrow-up' : 'arrow-down'" size="13" />
                    </div>
                </div>
            </div>
        </div>
    </van-sticky>
    <div class="content">
        <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"
                        @click="router.push({ name: 'home-content', params: { id: item.materialId } })">
                        <img :src="fileDomain + item.coverpicture">
                        <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">
                                <div class="user">
                                    <img src="../../static/image/avatar.png">
                                    <span>{{ item.author }}</span>
                                </div>
                                <div class="collect">
                                    <van-icon name="star-o" color="#9F9F9F" v-if="index < 5" />
                                    <van-icon name="star" color="#F1C13E" v-else />
                                    <span>收藏</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
            <van-empty description="暂无数据" v-else />
        </van-pull-refresh>
    </div>
    <type-popup ref="typePopupRef" @confirm="confirmTypePopup" @close="typeActive = false"></type-popup>
    <source-channel-popup ref="sourceChannelPopupRef" @confirm="confirmSourceChannelPopup"
        @close="sourceChannelActive = false"></source-channel-popup>
    <tags-popup ref="tagsPopupRef" @confirm="confirmTagsPopup" @close="tagsActive = false"></tags-popup>
</template>

<script setup>
import TypePopup from '../components/TypePopup/index.vue'
import SourceChannelPopup from '../components/SourceChannelPopup/index.vue'
import TagsPopup from '../components/TagsPopup/index.vue'
import { selectFinePictureList, selectCoarsePictureList } from '@/api/publish'
import dayjs from 'dayjs'
import { useInitScroll } from '@/hooks/useScroll'

useInitScroll()

const contentHeight = ref(50)
onLoad(() => {
    xma.xh.getMenuButtonBoundingClientRect({
      success(res) {
        contentHeight.value = (res.top + res.bottom) / 2 + 25;
      },
    });
})

const router = useRouter()
const tabsActive = ref(0)
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({
    materialTitle: '',
    collect: 1,
    materialType: 3,
    typeClassify: '',
    sourceName: '',
    organizeInt: [0],
    tagId: '',
    beginTime: '',
    endTime: ''
})

const dataList = ref([])
const handleSelectFindList = async () => {
    const res = await selectFinePictureList(page, catalog)
    setDataList(res)
}
const handleSelectCoarseList = async () => {
    const currentDate = new Date()
    const sevenDaysAgo = new Date(currentDate.getTime() - 7 * 24 * 60 * 60 * 1000)
    catalog.beginTime = dayjs(sevenDaysAgo).format('YYYY-MM-DD HH:mm:ss')
    catalog.endTime = dayjs(currentDate).format('YYYY-MM-DD HH:mm:ss')
    const res = await selectCoarsePictureList(page, catalog)
    setDataList(res)
}

const getList = () => {
    page.pageNum++
    loading.value = true
    if (tabsActive.value == 0) {
        handleSelectFindList()
    } else {
        handleSelectCoarseList()
    }
}

getList()

const handleRefresh = () => {
    window.scroll(0, 0)
    refreshing.value = true
    page.pageNum = 0
    getList()
}

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
}

const typeActive = ref(false)
const typePopupRef = ref()
const openTypePopup = () => {
    typeActive.value = true
    typePopupRef.value.open()
}
const confirmTypePopup = (e) => {
    page.pageNum = 0
    catalog.typeClassify = e?.classifyType ?? ''
    refreshing.value = true
    getList()
}

const sourceChannelActive = ref(false)
const sourceChannelPopupRef = ref()
const openSourcePopup = () => {
    sourceChannelActive.value = true
    sourceChannelPopupRef.value.open()
}
const confirmSourceChannelPopup = (e) => {
    page.pageNum = 0
    catalog.sourceName = e?.sourceName ?? ''
    refreshing.value = true
    getList()
}

const tagsActive = ref(false)
const tagsPopupRef = ref()
const openCatalogPopup = () => {
    tagsActive.value = true
    tagsPopupRef.value.open()
}
const confirmTagsPopup = (e) => {
    page.pageNum = 0
    catalog.tagId = e?.id.toString() ?? ''
    refreshing.value = true
    getList()
}
</script>

<style lang="scss" scoped>
.tools {
    display: flex;
    gap: 10px;

    :deep(.van-search) {
        flex: 1;
        padding: 0;

        .van-search__content {
            height: 100%;

            .van-search__field {
                height: 100%;
            }
        }
    }

    .right {
        width: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        span {
            font-size: 13px;
            color: #0E7CE3;
        }
    }
}

.header {
    padding: 0 10px;
    background-color: #ffffff;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);

    .menu {
        display: flex;
        justify-content: space-between;
        padding-top: 10px;

        :deep(.van-tabs__nav) {
            gap: 30px;
            padding-bottom: 0;

            .van-tab {
                font-size: 15px;
                padding: 0;
                flex: initial;
            }

            .van-tabs__line {
                bottom: 5px;
                background: #0E7CE3;
            }

        }


        .filtrate {
            display: flex;
            align-items: center;
            height: 44px;
            gap: 10px;

            .item {
                display: flex;
                gap: 2px;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                background-color: #e7e8e9;
                width: 60px;
                height: 24px;
                border-radius: 4px;
            }
        }
    }

}

.header-placeholder {
    height: 117px;
}

.content {
    background-color: #f3f3f3;
    padding: 10px 10px 0 10px;
    min-height: 100vh;

    .list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .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;
                        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;
                    }
                }
            }
        }
    }
}

.active {
    background-color: #0e7ce3 !important;
    color: #ffffff !important;
}
</style>@/utils/useScroll@/hooks/useScroll