<template>
    <div :class="bem()">
        <div :class="bem('main')">
            <div :class="bem('links')">
                <ul>
                    <!-- 先临时写死, 后面需要考虑链接路径问题 -->
                    <li><a href="https://www.gaoding.com/about" rel="nofollow">关于我们</a></li>
                    <li><a href="https://www.gaoding.com/help" rel="nofollow">帮助中心</a></li>
                </ul>
            </div>
            <div :class="bem('copyright')">
                <p>闽ICP备18003982号-2 | COPYRIGHT 2019. ALL RIGHTS RESERVED</p>
                <p>
                    <span :class="bem('contact-item')">联系我们：厦门市湖里区高林中路535号万科云玺27楼</span>
                    <span :class="bem('contact-item')">商业合作: bd@gaoding.com</span>
                </p>
            </div>
            <div :class="bem('qr-codes')">
                <div>
                    <a rel="nofollow" target="_blank" href="https://weibo.com/gaodingsheji"><Icon name="weibo" :class="bem('ic-weibo')"/></a>


                </div>

                <Tooltip theme="light"  placement="top">
                    <Icon name="link" :class="bem('ic-wechat')"/>
                    <div slot="content" :class="bem('popover-content')">
                        <img :class="bem('qrcode')" src="../../assets/img/wxacode.jpg" >
                        扫码打开小程序
                    </div>
                </Tooltip>
                <Tooltip theme="light"  placement="top">
                    <Icon name="wechat" :class="bem('ic-weapp')"/>
                    <div slot="content" :class="bem('popover-content')">
                        <img :class="bem('qr-code-wechat')" src="../../assets/img/footer-qr-code-wechat.png">
                        扫码关注公众号
                    </div>
                </Tooltip>
                <Tooltip theme="light"  placement="top">
                    <Icon name="phone" :class="bem('ic-phone')"/>
                    <div slot="content" :class="bem('popover-content')">
                        <img :class="bem('qrcode')" src="../../assets/img/ttxs-qrcode.png">
                        扫码下载移动端
                    </div>
                </Tooltip>
            </div>
        </div>
        <!-- 友情链接 -->
        <slot name="friend-site">
            <div :class="bem('friend-site-wrapper')">
                <div :class="bem('friend-site')" v-if="friendSites.length && isShowFriendSites">
                    <div :class="bem('site-list')">
                        <a
                            v-for="site in friendSites"
                            :key="site.href"
                            :href="site.href"
                            target="_blank"
                            ref="nofollow"
                        >{{site.name}}</a>
                    </div>
                </div>
            </div>
        </slot>
        <!-- 底部可自定义 -->
        <slot name="bottom"/>
    </div>
</template>
<script>
import friendSites from './friend-sites';
import { componentMixin, createComponentName } from '../_utils/component';
import Tooltip from '../Tooltip';
import Icon from '../Icon';

export default {
    name: createComponentName('footer'),
    components: {
        Tooltip,
        Icon
    },
    mixins: [componentMixin],
    props: {
        // logo标题
        title: {
            type: String,
            default: '稿定设计',
        },
        // 点击logo跳转的路由
        route: {
            type: String,
            default: '/',
        },
        isShowFriendSites: {
            type: Boolean,
            default: true,
        },
        // 友情链接, 如果没有传入, 会用默认的数据
        friendSites: {
            // `{ name: string, href: string }[]`
            type: Array,
            default: () => friendSites,
        },
    },
    friendSites,
};
</script>

<style lang="less">
@import '../_styles/base.less';

@b: ~'@{prefix}-footer';
.@{b}__qr-code-wechat,
.@{b}__qr-code-weibo {
    width: 120px;
    height: 120px;
    background-size: contain;
    display: inline-block;
    margin-bottom: 8px;
    border: 0;
}
.@{b}__qr-code-weibo {
    background-image: url('../../assets/img/footer-qr-code-weibo.png');
}
.@{b}__qrcode {
    width: 120px;
    height: 120px;
    background-size: contain;
    display: inline-block;
    margin-bottom: 8px;
}
.@{b}__popover-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    font-size: 14px;
    color: #4B4B4B;
}

.@{b} {
    background: #ffffff;
    color: #777777;
    overflow: hidden;
    font-size: 14px;
    font-weight: normal;
    padding-bottom: 32px;

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        overflow: hidden;
    }
    li {
        padding: 0;
    }

    .@{b}__main {
        position: relative;
        margin: 0 auto;
        width: 1200px;
    }


    .@{b}__links {
        margin-top: 32px;

        li {
            float: left;
            list-style: none;
            margin: 0 30px 0 0;
        }

        a {
            color: #000;
            font-size: 14px;
            font-weight: bold;
            text-decoration: none;

            &:hover {
                color: @color-primary;
            }
        }
    }

    .@{b}__copyright {
        padding: 50px 0 0;
        margin-top: 45px;
        border-top: 1px solid #eee;

        p {
            margin: 0;
            line-height:30px;
        }
    }

    .@{b}__contact-item {
        margin-right: 0.7em;
    }

    .@{b}__qr-codes {
        display: flex;
        flex-direction: row-reverse;
        position: absolute;
        right: 0;
        top: 0;

        > * {
            margin-top: -10px;
            padding: 10px 15px;
        }
    }
    .@{b}__ic-phone,
    .@{b}__ic-weapp,
    .@{b}__ic-wechat,
    .@{b}__ic-weibo {
        width: 34px;
        height: 34px;
        display: inline-block;
        background-position-x: center;
        background-repeat: no-repeat;
        color: #000000;

    }

    .@{b}__ic-weibo {
        cursor: pointer;
        &:hover {
            color: @color-primary;
        }
    }

    .@{b}__ic-weibo--icon {
        background-image: svg-load('../../assets/icons/weibo.svg', fill=#CCCCCC);
        background-size: cover;
        &:hover {
            background-image: svg-load('../../assets/icons/weibo.svg', fill=#ffffff);
        }
    }

    .@{b}__friend-site-wrapper {
        background: #ffffff;
    }

    .@{b}__friend-site {
        width: 1200px;
        margin: auto;
        font-size: 0;
        display: flex;
        line-height: 30px;

        > span {
            flex: 0 0 auto;
        }

        a,
        span {
            font-size: 14px;
            color: #777;
        }
        a {
            display: inline-block;
            margin-right: 24px;
            &:hover {
                color: #666;
            }
        }
        span {
            margin-right: 10px;
        }
    }

    .@{b}__friend-site-list {
        display: flex;
        flex-wrap: wrap;
    }
}
</style>
