<template>
    <div class="footer">
        <div class="wrapper">
            <div class="foot-item">
                <span class="foot-title">军民融合</span>
                <div class="item-link">
                    <el-link target="_blank" :underline="false">平台介绍</el-link>
                    <el-link target="_blank" :underline="false">用户须知</el-link>
                    <el-link href="register" target="_blank" :underline="false">用户注册</el-link>
                    <el-link href="https://jxjmrh.oss-cn-hangzhou.aliyuncs.com/操作手册.docx" :underline="false"
                        >操作手册</el-link
                    >
                </div>
            </div>
            <div class="foot-item foot3">
                <span class="foot-title">资源供需</span>
                <div class="item-link">
                    <el-link href="resource" target="_blank" :underline="false">技术需求</el-link>
                    <el-link href="resource" target="_blank" :underline="false">产品需求</el-link>
                    <el-link href="resource" target="_blank" :underline="false">融资需求</el-link>
                    <el-link href="resource" target="_blank" :underline="false">技术发布</el-link>
                    <el-link href="resource" target="_blank" :underline="false">产品发布</el-link>
                    <el-link href="resource" target="_blank" :underline="false">资源共享</el-link>
                </div>
            </div>

            <div class="foot-item">
                <span class="foot-title">政民互动</span>
                <div class="item-link">
                    <el-link href="interact" target="_blank" :underline="false">官方问答</el-link>
                    <el-link href="interact" target="_blank" :underline="false">热议话题</el-link>
                    <el-link href="interact" target="_blank" :underline="false">互动提问</el-link>
                </div>
            </div>
            <div class="foot-item" style="width: 350px; margin-right: 20px">
                <span class="foot-title">联系我们</span>
                <div class="item-link" style="flex-wrap: nowrap">
                    <span class="item-address">电话：{{ phone }}</span>
                    <span class="item-address">邮箱：{{ email }}</span>
                    <span class="item-address item-address1">地址：{{ address }}</span>
                </div>
            </div>
            <div class="foot-item foot5">
                <div>
                    <qrcode v-if="qrcode" class="vx-qrcode" :value="qrcode" :options="{ width: 100 }"></qrcode>
                </div>
                <div>官方微信公众号</div>
            </div>
        </div>
        <div class="footer-bottom">
            版权所有©江西军民融合公共服务平台<a style="margin-left: 20px">赣ICP备18008757号</a>
        </div>
    </div>
</template>

<script>
import qrcode from '@chenfengyuan/vue-qrcode';
export default {
    name: '',
    components: { qrcode },
    data() {
        return {
            qrcode: 'http://weixin.qq.com/r/oC44PKrEOmJGKe5fb3sk',
            phone: '0791-88171711',
            email: 'jmrhxxk@jxjmrh.gov.cn',
            address: '南昌市青山湖区昌东大道东路国防科技大厦'
        };
    },
    created() {
        this.$http.get('/sysConfig/all', { size: 100 }).then(res => {
            this.phone = res.content.find(i => i.name === 'contact_phone').value || this.phone;
            this.address = res.content.find(i => i.name === 'contact_address').value || this.address;
            this.email = res.content.find(i => i.name === 'contact_email').value || this.email;
            this.qrcode = (res.content.find(i => i.name === 'qrcode') || {}).value;
        });
    }
};
</script>
<style lang="less" scoped>
.footer {
    background: #4b4442;
    // height: 260px !important;
    padding: 0;
    padding-top: 50px;
    .wrapper {
        height: 160px;
        width: 1200px;
        margin: 0 auto;
        color: white;
        font-size: 14px;
        display: flex;
        // .flex-col();
        // justify-content: center;
        // > div {
        //     .flex();
        //     justify-content: center;
        // }
        // .divider {
        //     width: 1px;
        //     height: 14px;
        //     margin: 0 10px;
        //     background: white;
        // }
        .foot-item {
            text-align: left;
            margin-right: 120px;

            .foot-title {
                font-size: 15px;
                color: #ffffff;
            }
            .item-link {
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                height: 100px;
                margin-top: 20px;
                .item-address {
                    margin-bottom: 12px;
                    color: rgba(255, 255, 255, 0.6);
                }
                .item-address1 {
                    .ellipsisLn(3);
                }
            }
            .el-link {
                margin-bottom: 12px;
                font-size: 12px;
                margin-right: 48px;
                color: rgba(255, 255, 255, 0.6);
                &:hover {
                    text-decoration: none;
                }
            }
            .vx-qrcode {
                width: 100px;
                height: 100px;
                display: inline-block;
                background-color: #fff;
                margin-bottom: 4px;
            }
        }
        .foot3 {
            margin-right: 190px;
        }
        .foot5 {
            margin-right: 0;
        }
    }
    .footer-bottom {
        width: 100%;
        height: 50px !important;
        line-height: 50px;
        text-align: center;
        background-color: #2a2524;
        color: rgba(255, 255, 255, 0.4);
        font-size: 12px;
    }
}
</style>
