<template>
    <div class="index">
        <index-navbar :navbarList="navbarList" model="index">
            <template slot="bg-content">
                <carousel></carousel>
            </template>
        </index-navbar>
        <div class="content">
            <div class="product">
                <div class="product-title">
                    <h2>我们的产品</h2>
                </div>
                <div class="product-content">
                    <div class="product-item-wrapper">
                        <div class="product-item"
                             v-for="(item,index) in productList"
                             :style="{'background-image': 'url(https://file.funcheergame.com/office/image/'+(item.on?item.active:item.default)+'.png)'}"
                             @mouseenter="enter(index)"
                             @mouseleave="enter(1)"
                        >
                            <router-link to="/product">
                                <a></a>
                            </router-link>

                        </div>

                    </div>
                </div>
                <div class="product-footer">
                    <div class="product-footer-wrapper">
                        <div class="qr-code">
                            <div class="qr-item">
                                <img src="https://file.funcheergame.com/office/image/wx_qr_code.png" alt="">
                                <p>关注凤起官方公众号</p>
                            </div>
                        </div>
                        <div class="footer-link">
                            <div class="footer-link-wrapper">
                                <div class="footer-link-item" v-for="item in navbarList">
                                    <router-link :to="item.path">
                                        <a class="link-title"><span>{{item.meta.title}}</span></a>
                                    </router-link>

                                    <dl class="link-content-wrapper">
                                        <dd class="link-content-item" v-for="ii in item.children">
                                            <router-link :to="ii.path">
                                                <a href="#">{{ii.meta.title}}</a>
                                            </router-link>

                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <page-footer></page-footer>
    </div>
</template>

<script>

    import carousel from '@/components/carousel/carousel'
    import PageFooter from '@/components/footer/pageFooter'
    import IndexNavbar from '@/components/navbar/navbar'
    import {asyncRouterMap} from '@/config/router.config'

    export default {
        name: 'index',
        data() {
            return {
                navbarList: [],
                productList: [
                    {default: 'cs_01', active: 'jg_01', backgroundImage: 'cs_01', on: false},
                    {default: 'cs_03', active: 'jg_03', backgroundImage: 'cs_03', on: true},
                    {default: 'cs_04', active: 'jg_04', backgroundImage: 'cs_04', on: false},
                    {default: 'cs_07', active: 'jg_07', backgroundImage: 'cs_07', on: false},
                    {default: 'cs_05', active: 'jg_05', backgroundImage: 'cs_05', on: false},
                    {default: 'cs_06', active: 'jg_06', backgroundImage: 'cs_06', on: false}
                ]
            }
        },
        components: {
            carousel,
            PageFooter,
            IndexNavbar
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                this.navbarList.push(...asyncRouterMap.filter(f => !f.meta.hidden))
            },
            bgUrl() {

            },
            handelMouseEnter() {

            },
            enter(index){
                for (let i = 0; i < this.productList.length; i++) {
                    this.productList[i].on = i==index;
                }
            }
        }

    }
</script>

<style lang="less" scoped>
    @import url('./index.less');
</style>
