<script lang="ts">
import { ref, reactive, defineComponent } from 'vue'
import { useStore  } from 'vuex'
import banner from '@/components/layout/banner.vue'
export default defineComponent({
    setup(){
        const store = useStore()
        const requestParams = ref({})//active类型
        let paramsData = reactive({})
        let oldCategoryId= ref()
        //类型切换
        function facilityClick(item:any){
            //防抖
            if(item.id != oldCategoryId.value){
                requestParams.value = item
                paramsData = {
                    params:{
                        categoryid: item.id,
                        pageNum:1,
                        pageSize:10,
                        order:"sortindex",
                    },
                    index:store.state.currentPagePath,
                    sub:store.state.sub
                }
                oldCategoryId.value = item.id
                store.dispatch('getPageData',paramsData).then(()=>{
                    store.commit("setColumnTypes",store.state.pageContent)
                })
            }
        }
        return { store, facilityClick }
    },
    components:{
        banner
    },
    asyncData({ store, route } :any){
        let params = reactive(route.value) //路由参数
        //获取菜单列表
        return store.dispatch('getMenuList',params).then(()=>{
            const data = store.state.menuList
            let paramsData:any = reactive({})//页面主题内容请求参数
            for(let i=0;i<data.length;i++){
                if(!data[i].sname && params.path == data[i].path){
                    paramsData = {
                        params:{
                            categoryid: data[i].id,
                            pageNum:1,
                            pageSize:100,
                            order:"sortindex",
                        },
                        index:params.path,
                        sub:i
                    }
                    return store.dispatch('getPageData',paramsData).then(()=>{
                        store.commit("setColumnTypes",store.state.pageContent)
                    })
                }
            }
        })
    }
}) 
</script>
<template>
    <div class="pageContain">
        <div class="common-bradcrumb-section">
            <banner />
        </div>
        <section class="about-introduce-section course-section pt-40 pb-60 about-sec" v-for="(arr,index) in store.state.columnTypes" :style="{background:(index % 2 == 1?'#F4F8FD':'#fff')}">
            <div :id="arr.id" class="pointOffset">0</div>
            <div class="container">
                <div class="row">
                    <div class="col-md-2 col-sm-12 text-center">
                        <ul class="aboutTyes" v-if="index==0">
                            <li v-for="(item,i) in store.state.columnTypes" :key="i"><a :href="`#${item.id}`">{{item.title}}</a></li>
                        </ul>
                    </div>
                    <div class="col-md-10 col-sm-12">
                        <div class="section-title text-center both-border pb-20">
                            <span class="title-tag">{{arr.title}}</span>
                        </div>
                        <!-- 图文混排 -->
                        <div class="row aboutOnlyText text-left" v-if="arr.image" 
                            :style="{padding:(index % 2 == 1?'40px 25px':' 40px 25px')}"
                            style="background-color: #ffff;    box-shadow: 0px 10px 20px 10px rgb(179 202 216 / 20%)">
                            <div class="col-md-7  pr-40 aboutImg ">
                                <img v-lazy="arr.image" alt="" >
                            </div>
                            <div class="col-md-5  " v-html="arr.content">
                            </div>
                        </div>
                        <!-- 只有富文本 -->
                        <div class="aboutOnlyText row text-left" v-else :style="{padding:(index % 2 == 1?'40px':'0 ')}"
                            style="background-color: #ffff;">
                            <div class=" about-text-image" v-html="arr.content"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>
<style lang="scss" scoped>
</style>
