<script setup>
import {onMounted, ref} from 'vue'
import {apiReportClassify} from '@/api/report'
import {useRouter} from 'vue-router'

const router=useRouter()

// 向小程序发送数据
const handleDataToXcx=()=>{
  const postData={
    path:'/pages-report/classify',
    params:{},
    title:'FICC研报分类',
    shareImg:''
  }
  wx.miniProgram.postMessage({ data: postData })
}

// 获取列表数据
let list=ref([])
const getClassifyList=async ()=>{
    const res=await apiReportClassify()
    if(res.code===200){
        list.value=res.data
    }
}
getClassifyList()

// 跳转下一级
const goNext=(item)=>{
    // redirect_type : 跳转页面类型：1专栏列表，2报告列表，3专栏详情，4品种类型列表
    if(item.redirect_type===1){
        router.push({
            path:'/report/specialcolumnlist',
            query:{
                classifyId:item.classify_id_first,
                classifyName:item.classify_name_first
            }
        })
    }
    if(item.redirect_type===2){
        router.push({
            path:'/report/list',
            query:{
                classifyId:item.classify_id_first,
                classifyName:item.classify_name_first
            }
        })
    }
    if(item.redirect_type===3){
        router.push({
            path:'/report/specialcolumndetail',
            query:{
                columnId:item.classify_id_second
            }
        })
    }
    if(item.redirect_type===4){
        router.push({
            path:'/report/varietyreportlist',
            query:{
                classifyId:item.classify_id_first,
                classifyName:item.classify_name_first
            }
        })
    }

}

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

</script>
<template>
    <div class="report-classify-page">
        <img :src="$store.state.globalImgUrls.ficcServiceImg" alt=""  class="top-banner" @click="$router.push({path:'/report/ficcserveintro'})">
        <div class="list-wrap">
            <el-row :gutter="20" style="margin-left:0 ;margin-right: 0;">
                <el-col :span="6" v-for="item in list" :key="item.classify_name_first">
                    <div class="item" @click="goNext(item)" :style="'background-image:url('+item.back_img_url+')'">
                        <div class="con">
                            <div style="font-size: 18px;font-weight: bold">{{item.classify_name_first}}</div>
                            <!-- <span style="margin-left: -7px;font-size: 14px;color: #666;">【FICC | {{item.latest}} 期】</span> -->
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>



<style lang="scss" scoped>
.report-classify-page{
    .top-banner{
        width: 100%;
        display: block;
    }
    .list-wrap{
        margin-top: 30px;
        .item{
            padding-top: 42%;
            border: 1px solid #ECECEC;
            border-radius: 4px;
            margin-bottom: 20px;
            background-size: cover;
            background-repeat: no-repeat;
            position: relative;
            cursor: pointer;
            &:hover{
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            }
            .con{
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                padding: 0 20px;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
        }
    }
}
</style>