<template>
    <div class='FootBox'>
        <div class="FootContent" :class="{FootBottom:isBottom}">
            <div class="Foot">
                <div class="foot-top">
                    <ul class='short-enter'>
                        <li>
                            <router-link :to='{name:"index"}'>首页</router-link>
                        </li>
                        <li v-for="(item,index) in serviceType">
                            <router-link :to='{name:"business",query:{serviceId:(index+1)}}' class="service-val">{{item.shortName}}</router-link>
                        </li>
                        <!-- <li>
                            <a href="#">修图商</a>
                        </li>
                        <li>
                            <a href="#">影楼|样片</a>
                        </li>
                        <li>
                            <a href="#">营销</a>
                        </li>
                        <li>
                            <a href="#">周边</a>
                        </li> -->
                        <li>
                            <router-link :to='{name:"contact"}'>联系我们</router-link>
                        </li>
                        <li>
                            <router-link :to='{name:"join"}'>加入我们</router-link>
                        </li>
                        <li>
                            <router-link :to='{name:"about"}'>关于我们</router-link>
                        </li>
                    </ul>

                    <div class="foot-right" v-if="ICP.length>0">
                        <a href='javascript:void(0)' @click="goHref(ICP[0].url)">
                            {{ICP[0].linkName}}
                        </a>
                    </div>
                </div>
                <div class="foot-bottom">
                    <ul>
                        <li>
                            友情链接
                        </li>
                        <li v-for="item in linkList">
                            <a href='javascript:void(0)' @click="goHref(item.url)">{{item.linkName}}</a>
                        </li>

                    </ul>
                </div>
            </div>

        </div>
    </div>

</template>

<script>

import { mapState } from 'vuex'
export default {
    props: {
        isBottom: {
            type: Boolean,
            default: true
        }
    },
    name: 'page404',
    data() {
        return {
            linkList: [],
            ICP: []
        }
    },
    computed: {
        ...mapState(['serviceType']),
    },
    mounted() {
        // if (this.serviceType.length == 0) {
        //     this.$http.get({
        //         url: '/serviceType/home',
        //         data: {}
        //     }).then(res => {
        //         if (res.success) {
        //             this.$store.commit('updateServiceType', res.data)

        //         }
        //     }).catch(e => {
        //         console.log(e)
        //     })

        // }
        this.$http.get({
            url: '/quickLinks/all',
            data: {
                typeFlag: 1
            }
        }).then(res => {
            if (res.success) {
                this.linkList = res.data
            }
        }).catch(e => {
            console.log(e)
        })

        this.$http.get({
            url: '/quickLinks/all',
            data: {
                typeFlag: 3
            }
        }).then(res => {
            if (res.success) {
                this.ICP = res.data
            }
        }).catch(e => {
            console.log(e)
        })


    },
    methods: {
        goHref(href) {
            window.open(href)
        }
    }
}
</script>

<style lang="less" scoped>
.FootBox {
    height: 104px;
    width: 100%;
}
.FootContent {
    background: rgba(255, 255, 255, 1);
}
.Foot {
    width: 1183px;
    margin: auto;
    overflow: hidden;

    .foot-top {
        overflow: hidden;
        padding: 19px 0;
        border-bottom: 1px solid rgba(233, 233, 233, 1);
        .short-enter {
            float: left;
            li {
                display: inline-block;
                padding-right: 12px;
                margin-right: 10px;
                a {
                    font-size: 12px;
                    font-family: MicrosoftYaHei;
                    color: rgba(153, 153, 153, 1);
                    line-height: 12px;
                    display: block;
                    color: #999;
                    text-decoration: none;
                }

                &:not(:last-child) {
                    border-right: 1px solid #999;
                }
            }
        }
        .foot-right {
            float: right;
            font-size: 12px;
            font-family: MicrosoftYaHei;
            color: rgba(153, 153, 153, 1);
            line-height: 16px;

            a {
                color: rgba(153, 153, 153, 1);
            }
        }
    }

    .foot-bottom {
        padding: 13px 0;
        ul {
            li {
                display: inline-block;
                font-size: 12px;
                font-family: MicrosoftYaHei;
                color: rgba(153, 153, 153, 1);
                line-height: 16px;
                margin-right: 10px;
                a {
                    color: rgba(153, 153, 153, 1);
                    text-decoration: none;
                }
            }
        }
    }
}

.FootBottom {
    position: fixed;
    bottom: 0;
    width: 100%;
}
</style>
