<script setup>
import {apiReportListForVariety,apiGoodsPermissionList} from '@/api/report'
import SelfList from '@/components/SelfList.vue'
import SharePoster from '@/components/SharePoster.vue'
import moment from 'moment';
import { reactive,onMounted,onActivated,computed,ref } from 'vue'
import { useRoute,useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus'

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

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

// 获取用户已绑定品种
let permissionList=reactive({
    list:[],
    firstPerId:0,
    secList:[],
    secPerId:0,
})
const getPermissionList=async ()=>{
    const res=await apiGoodsPermissionList({
        classify_id:Number(classifyId.value),
    })
    if(res.code===200){
        let arr=res.data.permission_list||[]
        if(arr.length===0){
            ElMessage.warning('暂无权限')
            setTimeout(() => {
                router.replace('/report/classify')
            }, 2000);
            return
        }
        permissionList.list=arr
        handleSelectFirstVariety(res.data.permission_list[0])
    }
}
getPermissionList()
// 选择一级品种
const handleSelectFirstVariety=(item)=>{
    permissionList.firstPerId=item.id 
    permissionList.secList=item.list
    handleSelectSecVariety(item.list[0])
}
//选择二级品种
const handleSelectSecVariety=(item)=>{
    permissionList.secPerId=item.chart_permission_id
    reportState.page=1
    reportState.list=[]
    reportState.finished=false
    getReportList()
}

// 获取报告列表
let reportState=reactive({
    list:[],
    page:1,
    pageSize:20,
    loading:false,
    finished:false,
})
const getReportList=async ()=>{
    reportState.loading=true
    const res=await apiReportListForVariety({
        chart_permission_id:Number(permissionList.secPerId),
        classify_id:Number(classifyId.value),
        current_index:reportState.page,
        page_size:reportState.pageSize
    })
    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]
        reportState.finished=res.data.paging.is_end 
    }
}

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

//跳转详情
const goReportDetail=(item)=>{
    if(['晨报','周报'].includes(item.classify_name_first)){
        router.push({
            path:'/report/chapterdetail',
            query:{
                chapterId:item.report_chapter_id
            }
        })
    }else{
        router.push({
            path:'/report/detail',
            query:{
                reportId:item.report_id
            }
        })
    }
}

//播放音频
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
        })
    }
}

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

onMounted(()=>{
    handleDataToXcx()
})

// 组件激活时
onActivated(()=>{
    const temClassifyId=route.query.classifyId||0
    if(temClassifyId!=classifyId.value){
        classifyId.value=temClassifyId
        reportState.list=[]
        reportState.page=1
        reportState.finished=false
        permissionList.list=[]
        permissionList.firstPerId=0
        permissionList.secList=[]
        permissionList.secPerId=0
        getPermissionList()
    }
    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:'',
        abstract_2_style:'',
        abstract_1_style:'',
    }
    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>
    <div class="variety-report-list-page">
        <div class="top-nav-warp">
            <div class="flex first-nav-box">
                <span 
                    :class="['item',item.id===permissionList.firstPerId?'active':'']" 
                    v-for="item in permissionList.list" 
                    :key="item.id"
                    @click="handleSelectFirstVariety(item)"
                >{{item.classify_name}}</span>
            </div>
            <div class="sec-nav-box">
                <span 
                    :class="['item',item.chart_permission_id===permissionList.secPerId?'active':'']"
                    v-for="item in permissionList.secList" 
                    :key="item.chart_permission_id"
                    @click="handleSelectSecVariety(item)"
                >{{item.chart_permission_name}}</span>
                <!-- <el-popover
                    :width="500"
                    trigger="click"
                >
                    <template #reference>
                        <img v-if="permissionList.secList.length>6" style="width:16px;transform: rotate(90deg);cursor: pointer" src="@/assets/icon-more.png" alt="">
                    </template>
                    <template #default>
                        <div class="flex top-nav-filter-box">
                        <div 
                            :class="['item',item.chart_permission_id == permissionList.secPerId&&'active']" 
                            v-for="item in permissionList.secList.slice(6)" 
                            :key="item.chart_permission_id"
                            @click="handleSelectSecVariety(item)"
                        >{{item.chart_permission_name}}</div>
                        </div>
                    </template>
                </el-popover> -->
            </div>
        </div>
        <SelfList 
            :finished="reportState.finished" 
            :isEmpty="reportState.list.length === 0 && reportState.finished" 
            :loading="reportState.loading" 
            :count="reportState.list.length"
            @listOnload="onLoad"
            emptyMsg="暂无报告"
        >
            <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/reportForVariety/list',
            code_scene:code_scene,
            data:posterParams
        }"
    ></SharePoster>
</template>

<style lang="scss" scoped>
.top-nav-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;
    }
}

.variety-report-list-page{
    .top-nav-warp{
        position: sticky;
        top: 60px;
        z-index: 50;
        background: #FFFFFF;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04);
        padding: 30px 30px 12px 30px;
        margin-bottom: 30px;
        .first-nav-box{
            .item{
                width: 140px;
                height: 40px;
                flex-shrink: 0;
                background: #F6F6F6;
                border-radius: 20px;
                text-align: center;
                line-height: 40px;
                font-size: 16px;
                margin-right: 30px;
                cursor: pointer;
                &:hover {
                    background: #FFFBF5;
                    color: #F3A52F;
                    border: 1px solid #F3A52F;
                    box-shadow: 0px 6px 7px 1px #FFF7EB;
                }
            }
            .active {
                background: #FFFBF5;
                color: #F3A52F;
                border: 1px solid #F3A52F;
                box-shadow: 0px 6px 7px 1px #FFF7EB;
            }
            @media screen and (max-width: 1350px){
                .item{
                    width: 90px;
                    height: 30px;
                    line-height: 30px;
                    margin-right: 15px;
                    font-size: 14px;
                }
            }
        }
        .sec-nav-box{
            margin-top: 30px;
            display: flex;
            flex-wrap: wrap;
            margin-left: -30px;
            .item{
                flex-shrink: 0;
                margin-left: 30px;
                font-size: 16px;
                color: #666666;
                cursor: pointer;
                margin-bottom: 8px;
            }
            .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>