<script lang="ts">
import { ref, reactive, defineComponent } from 'vue'
import { useStore  } from 'vuex'
import { useRouter, useRoute } from "vue-router";
import banner from '@/components/layout/banner.vue'
import pagination from '@/components/layout/pagination.vue'
export default defineComponent({
    setup(){
        const store = useStore()
        const router = useRouter()
        const route = useRoute()
        let requestParams = reactive({})//active类型
        let paramsData = reactive({
            params:{
                categoryid: 0,
                pageNum:1,
                pageSize:10,
                order:"sortindex",
                acitve:true
            },
            index:"",
            sub:0
        })
        let oldCategoryId= ref(store.state.columnTypes[0].id)
        //类型切换
        function facilityClick(item:any){
            //防抖
            if(item.id != oldCategoryId.value){
                requestParams = item
                paramsData = {
                    params:{
                        categoryid: item.id,
                        pageNum:1,
                        pageSize:10,
                        order:"sortindex",
                        acitve:true,
                    },
                    index:store.state.currentPagePath,
                    sub:store.state.sub
                }
                oldCategoryId.value = item.id
                store.dispatch('getPageData',paramsData)
            }
        }
        //详情页
        function details(item:any){
            let params = {
                path: `/news_Read`,
                query: {
                    categoryid: item.categoryid,
                    id: item.id,
                    isUrlId: 1
                }
            }
            store.commit("setRoute",params)
            router.push(params)
        }
        //分页
        function handleCurrentChange(val:number){
            paramsData.params.pageNum = val
            store.dispatch('getPageData',paramsData)
        }
        return { store, facilityClick, handleCurrentChange, details }
    },
    components:{
        banner,
        pagination
    },
    asyncData({ store,route } :any){
        let params = reactive(route.value) //路由参数
        //获取菜单列表
        return store.dispatch('getMenuList',params).then(()=>{
            const data = reactive(store.state.menuList)
            let paramsData:any = reactive({})//页面主题内容请求参数
            let str = ref("")
            if(params.path.indexOf("_")>-1){
                str.value = params.path.split("_")[0]
            }
            for(let i=0;i<data.length;i++){
                if(!data[i].sname && params.path == data[i].path || data[i].path == str.value){
                    paramsData = {
                        params:{
                            categoryid: data[i].id,
                            pageNum:1,
                            pageSize:100,
                        //   order:"sortindex",
                        },
                        index:params.path,
                        sub:i
                    }
                    if(!params.query?.categoryid){
                        paramsData.params.categoryid = data[i].children[0].id
                    }else{
                        paramsData.params.categoryid = params.query.categoryid
                    }
                    return store.dispatch('getPageData',paramsData).then(()=>{
                        store.commit("setColumnTypes",store.state.menuList[store.state.sub].children)
                    })
                }
            }
        })
    }
})
</script>
<template>
    <div class="pageContain">
        <section class="common-bradcrumb-section">
            <banner />
        </section>
        <section style=" background:#F7F7F7">
            <div class="container">
                <div class="row newTypeBox">
                    <div class="col-lg-6 col-md-6"  v-for="(item,index) in store.state.columnTypes" :key="index">
                        <div class="titleOne" :class="item.id == store.state.acitveId  ? 'active' : ''" v-on:mouseover="facilityClick(item)">{{item.categoryName}} </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="news-content-section pt-70">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 content">
                            <ul>
                                <!-- 新闻列表主题start -->
                                <div class="row">
                                    <div class="col-md-4 newItemOne lazyContainer" v-for="(item,index) in store.state.pageContent" :key="index" >
                                        <div class="oneInnerBox" @click="details(item)">
                                            <div class="img" style="overflow:hidden">
                                                <el-image  :src="item.image" alt="" :data-src="item.image" fit="contain"  style="display:block"  />   
                                            </div>
                                            <a class="line-two">{{item.title}}</a>
                                            <span>{{ item.createdate }}</span>
                                        </div>
                                    </div>
                                </div>
                            </ul>
                            <pagination :data="store.state.pagination" @pagination="handleCurrentChange" />
                        </div>
                    </div>
                </div>
            </section>
    </div>
            
</template>
<style lang="scss" scoped>

</style>
