<script setup>
import {ref,onMounted, reactive, onActivated,computed} from 'vue'
import moment from 'moment';
import { apiSubClassifyList , apiReportList,apiReportClassifyMenuList } from '@/api/report'
import Search from '@/components/Search.vue'
import SelfList from '@/components/SelfList.vue'
import SharePoster from '@/components/SharePoster.vue'
import { useRoute,useRouter } from 'vue-router';
import { useStore } from 'vuex';

const route=useRoute()
const router=useRouter()
const store=useStore()


let classifyId=ref(route.query.classifyId||0) //一级分类id

document.title=decodeURIComponent(route.query.classifyName)

// 向小程序发送数据
const handleDataToXcx=()=>{
  const postData={
    path:'/pages-report/reportList',
    params:{
        classifyId:classifyId.value,
        classifyName:route.query.classifyName
    },
    title:`FICC【${route.query.classifyName}】`,
    shareImg:''
  }
  wx.miniProgram.postMessage({ data: postData })
}

// 获取筛选项（二级分类）
let filterList=ref([])
let selectSubClassifyId=ref(0)
const getFilterList=async ()=>{
    const res=await apiSubClassifyList({classify_id_first:Number(classifyId.value)})
    if(res.code===200){
        filterList.value=res.data||[]
    }
}
// getFilterList()

// 获取报告列表
let reportState=reactive({
    menuList:[],
    menuId:0,
    list:[],
    page:1,
    pageSize:20,
    loading:false,
    finished:false,
    searchVal:''
})
const getReportList=async ()=>{
    reportState.loading=true
    const res=await apiReportList({
        classify_id_first:Number(classifyId.value),
        classify_id_second:Number(selectSubClassifyId.value),
        key_word:reportState.searchVal,
        current_index:reportState.page,
        page_size:reportState.pageSize,
        classify_menu_id:Number(reportState.menuId),
    })
    reportState.loading=false
    if(reportState.page==1){
        document.body.scrollTop=document.documentElement.scrollTop=0
    }
    if(res.code===200){
        let arr=res.data.list||[]
        reportState.list=[...reportState.list,...arr]
        if(res.data.paging.is_end){
          reportState.finished=true
        }
    }
}
getReportList()

// 获取子目录
const getMenuList=async ()=>{
    const res=await apiReportClassifyMenuList({classify_id:Number(classifyId.value)})
    if(res.code===200){
        reportState.menuList=res.data||[]
    }
}
getMenuList()

// 加载更多列表数据
const onLoad=()=>{
    reportState.page++
    getReportList()
}

// 点击筛选项
const handleClickFilterItem=(item)=>{
    reportState.list=[]
    reportState.page=1
    reportState.finished=false
    if(selectSubClassifyId.value==item.classify_id_second){
        selectSubClassifyId.value=0
    }else{
        selectSubClassifyId.value=item.classify_id_second
    }
    getReportList()
}

const handleClickMenuItem=(item)=>{
    reportState.list=[]
    reportState.page=1
    reportState.searchVal=''
    reportState.menuId=item.menu_id
    reportState.finished=false
    getReportList()
}

// 搜索
const handleSearch=(e)=>{
    reportState.list=[]
    reportState.page=1
    reportState.finished=false
    reportState.searchVal=e||''
    getReportList()
}

// 跳转报告详情
const goReportDetail=(item)=>{
    router.push({
        path:'/report/detail',
        query:{
            reportId:item.report_id
        }
    })
}

let isMounted=ref(false)
onMounted(()=>{
    isMounted.value=true
    handleDataToXcx()
})

//播放音频
const handlePlayAudio=(item)=>{
    if(item.video_list){
        if(store.state.audioData.reportId==item.report_id){
            if(store.state.audioData.paused){
                store.state.audioData.INS.play()
            }else{
                store.state.audioData.INS.pause()
            }
            return
        }
        const arr=item.video_list.map(_item=>{
            return {
                name:_item.video_name,
                url:_item.video_url,
                time:_item.video_play_seconds
            }
        })
        store.commit('addAudio',{
            list:arr,
            reportId:item.report_id,
            index:0
        })
    }
}

// 组件激活时
onActivated(()=>{
    const temClassifyId=route.query.classifyId||0
    if(temClassifyId!=classifyId.value){
        classifyId.value=temClassifyId
        reportState.list=[]
        reportState.page=1
        reportState.menuId=0
        reportState.finished=false
        reportState.searchVal=''
        filterList.value=[]
        selectSubClassifyId.value=0
        getReportList()
        getMenuList()
        // getFilterList()
        getMenuList()
    }
    handleDataToXcx()
})

const code_scene=computed(()=>{
    return JSON.stringify({classifyId:classifyId.value,classifyName:route.query.classifyName})
})

const posterParams=computed(()=>{
    let obj={
        list_title:route.query.classifyName,
        stage_1:'',
        avatar_1:'',
        title_1:'',
        author_1:'',
        tag_1:'',
        stage_2:'',
        avatar_2:'',
        title_2:'',
        author_2:'',
        tag_2:'',
    }
    if(reportState.list[0]){
        obj.img_1=reportState.list[0].report_img_url
        obj.title_1=reportState.list[0].title 
        obj.abstract_1=reportState.list[0].classify_name_second
        obj.time_1=`${reportState.list[0].stage}期 | ${moment(reportState.list[0].publish_time).format('YYYY.MM.DD')}`
        obj.abstract_1_style=reportState.list[0].classify_name_second?'':'display:none'
    }
    if(reportState.list[1]){
        obj.img_2=reportState.list[1].report_img_url
        obj.title_2=reportState.list[1].title 
        obj.abstract_2=reportState.list[1].classify_name_second
        obj.time_2=`${reportState.list[1].stage}期 | ${moment(reportState.list[1].publish_time).format('YYYY.MM.DD')}`
        obj.abstract_2_style=reportState.list[1].classify_name_second?'':'display:none'
    }
    return obj
})

</script>

<template>
    <!-- 顶部搜索和筛选 -->
    <template v-if="isMounted&&$route.path=='/report/list'">
        <teleport to="#reportlist-in-head">
            <div class="flex-col-center reportlist-search-filter-wrap">
                <Search
                    placeholder="请输入标题/关键词"
                    :defaultVal="reportState.searchVal"
                    @search="handleSearch"
                    @clean="handleSearch"
                ></Search>
                <!-- <template v-if="filterList.length>0">
                <el-popover 
                    :width="580"
                    trigger="click"
                    placement="bottom-end"
                    popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
                >
                    <template #reference>
                        <div class="filter-btn">筛选</div>
                    </template>
                    <template #default>
                        <div class="flex filter-box">
                            <div 
                                :class="['item',item.classify_id_second==selectSubClassifyId&&'active']" 
                                v-for="item in filterList" 
                                :key="item.classify_id_second"
                                @click="handleClickFilterItem(item)"
                            >{{item.classify_second_simple}}</div>
                        </div>
                    </template>
                </el-popover>
                </template> -->
            </div>
        </teleport>
    </template>
    <div class="report-list-page">
        <div class="top-tabs-box" v-if="reportState.menuList.length>0">
            <span :class="['item',0===reportState.menuId?'active':'']" @click="handleClickMenuItem({menu_id:0,menu_name:'全部'})">全部</span>
            <span 
                :class="['item',item.menu_id===reportState.menuId?'active':'']"
                v-for="item in reportState.menuList"
                :key="item.menu_id"
                @click="handleClickMenuItem(item)"
            >{{item.menu_name}}</span>
            
        </div>
        <SelfList 
            :finished="reportState.finished" 
            :isEmpty="reportState.list.length === 0 && reportState.finished" 
            :loading="reportState.loading" 
            :count="reportState.list.length"
            @listOnload="onLoad"
            :emptyMsg="reportState.searchVal?'找不到对应报告，试试别的搜索词吧':'暂无报告'"
        >
        <div class="flex list-wrap">
            <div class="flex item" v-for="item in reportState.list" :key="item.report_id" @click="goReportDetail(item)">
                <el-image class="report-img" :src="item.report_img_url" fit="cover" lazy />
                <div class="con">
                    <div class="top-name" v-html="item.title_info"></div>
                    <div class="title" v-html="item.title"></div>
                    <div class="des" v-html="item.abstract"></div>
                    <div class="clear-float bot">
                        <span class="time">{{moment(item.publish_time).format('YYYY.MM.DD HH:mm')}}</span>
                        <div 
                            class="btn" 
                            v-if="item.auth_ok" 
                            @click.stop="handlePlayAudio(item)"
                        >{{$store.state.audioData.reportId==item.report_id?$store.state.audioData.paused?'已暂停':'播放中':'立即播放'}}</div>
                    </div>  
                </div>
            </div>
            <div class="last-add-item"></div>
            <div class="last-add-item"></div>
        </div>
        </SelfList>
    </div>

    <!-- 生成海报 -->
    <SharePoster  
        :shareData="{
            type:'report_list',
            code_page:'pages-report/reportList',
            code_scene:code_scene,
            data:posterParams
        }"
    ></SharePoster>
</template>

<style lang="scss" scoped>
.reportlist-search-filter-wrap{
    height: 100%;
    .filter-btn{
        cursor: pointer;
        margin-left: 25px;
        color: #F3A52F;
        font-size: 16px;
        &::before{
            content: '';
            display: inline-block;
            width: 17px;
            height: 13px;
            background-image: url('@/assets/icon-filter.png');
            background-size: cover;
            vertical-align: middle;
            margin-right: 3px;
        }
    }
}
.filter-box{
    flex-wrap: wrap;
    .item{
        margin: 5px 10px;
        width: 113px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f6f6f6;
        border-radius: 4px;
        font-size: 16px;
        cursor: pointer;
        :hover{
            color: #fff;
            background-color: #F3A52F;
        }
    }
    .active{
        color: #fff;
        background-color: #F3A52F;
    }
}
.report-list-page{
    .top-tabs-box{
        position: sticky;
        top: 60px;
        z-index: 10;
        padding-top: 20px;
        margin-top: -20px;
        background-color: #fff;
        .item{
            margin-right: 50px;
            font-size: 16px;
            display: inline-block;
            margin-bottom: 20px;
            cursor: pointer;
            &.active{
                color: #F3A52F;
            }
        }
    }
    .list-wrap{
        flex-wrap: wrap;
        justify-content: center;
        // &::after{
        //     content:'';
        //     display: block;
        //     height:0;
        //     flex-shrink: 0;
        //     width: 380px;
        //     margin-bottom: 20px;
        //     margin-left: 10px;
        //     margin-right: 10px;
        // }

        // 末尾补充的两个元素 为了整体能居中
        .last-add-item{
            height:0;
            flex-shrink: 0;
            width: 380px;
            margin-left: 10px;
            margin-right: 10px;
        }
        .item{
            flex-shrink: 0;
            width: 380px;
            background: #FFFFFF;
            box-shadow: 3px 3px 12px 1px rgba(184, 184, 184, 0.16);
            border-radius: 8px;
            border: 1px solid #F2F2F2;
            padding: 20px;
            margin-bottom: 20px;
            margin-left: 10px;
            margin-right: 10px;
            overflow: hidden;
            .report-img{
                flex-shrink: 0;
                width: 110px;
                height: 160px;
                border-radius: 8px;
                margin-right: 15px;
            }
            .con{
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                overflow: hidden;
            }
            .top-name{
                background-color: #FFFBF5;
                // text-align: center;
                font-size: 14px;
                color: #F3A52F;
                padding: 4px 0;
            }
            .title{
                :deep(span){
                    color:#F3A52F !important;
                }
            }
            .des{
                color: #999;
            }
            .bot{
                display: flex;
                align-items: flex-end;
                justify-content: space-between;
                .time{
                    flex-shrink: 0;
                    font-size: 14px;
                    color: #999;
                }
                .btn{
                    flex-shrink: 0;
                    width: 88px;
                    height: 30px;
                    background: #F3A52F;
                    border-radius: 15px;
                    color: #fff;
                    text-align: center;
                    line-height: 30px;
                    font-size: 14px;
                    cursor: pointer;
                }
            }
        }
    }

}
</style>

