<script setup>
import {onMounted,reactive,watch} from 'vue'
import {apiMyCollectList,apiCancelCollect} from '@/api/user'
import { useRouter } from 'vue-router'
import { ElMessage,ElMessageBox } from 'element-plus'
import Search from '@/components/Search.vue'
import moment from 'moment'

const router=useRouter()
const props=defineProps({
    show:{
        type:Boolean,
        default:false
    }
})
watch(
    ()=>props.show,
    (e)=>{
        if(e){
            // 刷新收藏
            handleTypeChange(0)
        }
    }
)


const listState=reactive({
    type:0,// 0-全部; 1-研报; 3-线上路演; 2-视频社区
    list:[],
    page:1,
    pageSize:20,
    loading:false,
    finished:false,
    keywords:''
})
const getCollectList=async ()=>{
    listState.loading=true
    const res=await apiMyCollectList({
        from_type:Number(listState.type),
        page_size:listState.pageSize,
        curr_page:listState.page,
        keywords:listState.keywords
    })
    listState.loading=false
    if(res.code===200){
        let arr=res.data.list||[]
        listState.list=[...listState.list,...arr]
        if(res.data.paging.is_end){
            listState.finished=true
        }
    }
}
//加载更多
const onLoad=()=>{
    if(listState.loading) return
    listState.page++
    getCollectList()
}

// 类型切换
const handleTypeChange=(type)=>{
    listState.type=type 
    listState.list=[]
    listState.page=1
    listState.keywords=''
    listState.finished=false
    getCollectList()
}

//搜索
const handleSearch=(e)=>{
    listState.type=0
    listState.list=[]
    listState.page=1
    listState.keywords=e||''
    listState.finished=false
    getCollectList()
}

const getTime=(e)=>{
    if(moment().isSame(e,'year')){//当年
        return moment(e).format('MM-DD')
    }else{
        return moment(e).format('YYYY-MM-DD')
    }
}

//跳转详情
const goDetail=(item)=>{
    let obj={
        path:'',
        query:{}
    }
    if(item.CollectionType==1){// 报告
        if(item.ExtendId>0){
            obj={
                path:'/report/chapterdetail',
                query:{
                    chapterId:item.ExtendId
                }
            }
        }else{
            obj={
                path:'/report/detail',
                query:{
                    reportId:item.PrimaryId
                }
            }
        }
    }else if(item.CollectionType==2){//视频社区
        obj={
            path:'/video/list',
            query:{
                videoId:item.PrimaryId
            }
        }
    }else if(item.CollectionType==3){//路演视频
        obj={
            path:'/roadshow/video/list',
            query:{
                videoId:item.PrimaryId
            }
        }
    }
    router.push(obj)
    // 当前地址则主动刷新一下
    if(window.location.pathname===obj.path){
        setTimeout(() => {
            router.go(0)
        }, 200);
    }
}

//取消收藏
const handleCancelCollect=(item,index)=>{
    const htmlStr=`<p>确认取消收藏？</p>`
    ElMessageBox({
        title:`操作提醒`,
        message:htmlStr,
        center: true,
        dangerouslyUseHTMLString: true,
        confirmButtonText:'确定',
        confirmButtonClass:'self-elmessage-confirm-btn',
        showCancelButton:true,
        cancelButtonText:'取消',
        cancelButtonClass:'self-elmessage-cancel-btn'
    }).then(()=>{
        apiCancelCollect({collection_id:Number(item.CollectionId)}).then(res=>{
            if(res.code===200){
                ElMessage.success('操作成功')
                listState.list.splice(index,1)//删除数组中该数据
            }
        })
    }).catch(()=>{
        console.log('取消操作');
    })
}

onMounted(() => {
    getCollectList()
})
</script>

<template>
    <div class="my-collect-wrap">
        <Search
            placeholder="请输入标题/关键词"
            @search="handleSearch"
            @clean="handleSearch"
        ></Search>
        <div class="top-nav" v-show="!listState.keywords">
            <span :class="listState.type==0&&'active'" @click="handleTypeChange(0)">全部</span>
            <span :class="listState.type==1&&'active'" @click="handleTypeChange(1)">研报</span>
            <span :class="listState.type==3&&'active'" @click="handleTypeChange(3)">线上路演</span>
            <span :class="listState.type==2&&'active'" @click="handleTypeChange(2)">视频社区</span>
        </div>
        <div class="empty-box" v-if="listState.finished&&listState.list.length==0">
            <img :src="$store.state.globalImgUrls.chartEmpty" alt="">
            <p>暂无数据~</p>
        </div>
        <ul class="collect-list" v-else>
            <li class="item" v-for="(item,index) in listState.list" :key="item.CollectionId">
                <span class="c-item">{{getTime(item.CreateTime)}}</span>
                <!-- 视频类别样式 -->
                <div class="flex item-con video-box" v-if="[2,3].includes(item.CollectionType)" @click="goDetail(item)">
                    <img class="img" :src="item.ImgUrl"/>
                    <div class="con">
                        <div class="title" v-html="item.Title"></div>
                        <div class="author">{{item.Author}}</div>
                        <div class="time">发布时间：{{item.PublishTime}}</div>
                    </div>
                    <!-- 取消收藏 -->
                    <div class="cancel-collect-btn" @click.stop="handleCancelCollect(item,index)">取消收藏</div>
                </div>
                <!-- 报告类型样式 -->
                <div class="item-con report-box" v-if="item.CollectionType==1" @click="goDetail(item)">
                    <div class="title" v-html="item.Title"></div>
                    <div class="con">
                        <span v-if="item.ClassifyName">#{{item.ClassifyName}}</span>
                        <span v-if="item.ClassifySecondName" style="margin-left:20px">#{{item.ClassifySecondName}}</span>
                        <div class="time">发布时间：{{item.PublishTime}}</div>
                    </div>
                    <!-- 取消收藏 -->
                    <div class="cancel-collect-btn" @click.stop="handleCancelCollect(item,index)">取消收藏</div>
                </div>
            </li>
        </ul>

    </div>
</template>

<style lang="scss" scoped>
.my-collect-wrap{
    :deep(.search-wrap){
        width: 100%;
    }
    .top-nav{
        margin-bottom: 20px;
        margin-top: 20px;
        span{
            font-size: 18px;
            display: inline-block;
            margin-right: 50px;
            cursor: pointer;
            padding-bottom: 5px;
            position: relative;
        }
        .active{
            color: #F3A52F;
            &::after{
                content: '';
                display: block;
                width: 49px;
                height: 2px;
                background: #F3A52F;
                border-radius: 6px 6px 6px 6px;
                position: absolute;
                bottom: 0px;
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }
    .collect-list{
        height: 500px;
        overflow-y: auto;
        &::-webkit-scrollbar{
            display: none;
        }
        .item{
            padding: 20px 0 10px 0;
            border-bottom: 1px solid #F6F6F6;
            .c-item{
                display: inline-block;
                background-color: #F6F6F6;
                color: #666;
                padding: 5px 10px;
                border-radius: 4px;
            }
            .video-box{
                margin-top: 22px;
                .img{
                    width: 113px;
                    height: 98px;
                    object-fit: cover;
                    flex-shrink: 0;
                    margin-right: 10px;
                    border-radius: 4px;
                }
                .con{
                    flex: 1;
                    color: #666;
                    .title{
                        color: #000;
                        font-size: 16px;
                        min-height: 45px;
                    }
                    .author{
                        min-height: 20px;
                        margin: 5px 0;
                    }
                }
            }
            .report-box{
                margin-top: 12px;
                .title{
                    color: #000;
                    font-size: 16px;
                    margin-bottom: 12px;
                }
                .con{
                    span{
                        display: inline-block;
                        color: #666;

                    }
                    .time{
                        float: right;
                    }
                }
            }

            .item-con{
                padding: 7px 10px;
                position: relative;
                .cancel-collect-btn{
                    position: absolute;
                    right: 10px;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 89px;
                    height: 31px;
                    background: #FFFFFF;
                    border-radius: 4px 4px 4px 4px;
                    border: 1px solid #E5E5E5;
                    text-align: center;
                    line-height: 28px;
                    color: #F3A52F;
                    cursor: pointer;
                    display: none;
                }
                &:hover{
                    background: #FFFBF5;
                    .cancel-collect-btn{
                        display: block;
                    }
                }
            }

        }

    }
    .empty-box{
        text-align: center;
        color: #999;
        img{
            width: 50%;
        }
    }
}
</style>