<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'
export default defineComponent({
    setup(){
        const store = useStore()
        const router = useRouter()
        const route = useRoute()
        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: 100,
                        order: "sortindex",
                    },
                    index: store.state.currentPagePath,
                    sub: store.state.sub
                }
                oldCategoryId.value = item.id
                store.dispatch('getPageData', paramsData)
            }
        }
        //详情页
        function details(item: any) {
            let params = {
                path: `/cases_Read`,
                query: {
                    categoryid: item.categoryid,
                    id: item.id,
                    isUrlId: 1
                }
            }
            store.commit("setRoute",params)
            router.push(params)
            globalThis.scrollTo(0, 0)
        }
        return { store,  facilityClick, details }
    },
    components:{
        banner
    },
    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({
                params:{
                    categoryid: 0,
                    pageNum:1,
                    pageSize:100,
                    order:"sortindex",
                },
                index:"",
                sub:0
            })//页面主题内容请求参数
            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
                    }
                    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:#F4F8FD" class="solutionType">
            <div class="container pc" style="text-align:center">
                <div class="solutionTypeOne" v-for="(item, index) in store.state.columnTypes"
                    :class="item.id == store.state.acitveId ? 'active' : ''" @mouseover="facilityClick(item)"
                    :style="{ 'width': (1 / store.state.columnTypes.length * 100) + '%' }" :key="index">
                    <div style="width:40px;height:40px;;overflow:hidden;margin:0 auto">
                        <img class="img" :src="item.imagePath" alt="">
                    </div>
                    <p>{{ item.categoryName }}</p>
                </div>
            </div>
            <div class="container mobile" style="text-align:center">
                <div class="solutionTypeOne" v-for="(item, index) in store.state.columnTypes"
                    :class="item.id == store.state.acitveId ? 'active' : ''" v-on:mouseover="facilityClick(item)"
                    :style="{ 'width': (1.5 / store.state.columnTypes.length * 100) + '%' }" :key="index">
                    <div style="width:40px;height:40px;;overflow:hidden;margin:0 auto">
                        <img class="img" v-lazy="item.imagePath" alt="">
                    </div>
                    <p>{{ item.categoryName }}</p>
                </div>
            </div>
        </section>
        <section class="solution-section lazyContainer">
            <div v-for="(item, index) in store.state.pageContent" :key="item.id"
                :style="{ background: (index % 2 == 1 ? '#F4F8FD' : '#fff') }" style="padding:40px 0">
                <div class="container">
                    <div class="solutionItem" @click="details(item)">
                        <div class="solutionTitle text-left">
                            {{ item.title }}
                        </div>
                        <div class="row solutionInner">
                            <div class="col-md-7">
                                <p v-html="item.lmtitle" class="text-left"></p>
                                <div class="pt-40 mb-20 text-left">{{ item.zhaiyao }}</div>
                            </div>
                            <div class="col-md-5 text-center">
                                <img v-lazy="item.image" alt="" :data-src="item.image">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

</template>
<style lang="scss" scoped></style>
