<template>
    <div id="component-footer">
        <FooterSkeleton v-if="loading" />
        <template v-else>
            <div class="first-row">
                <div class="footer-container">
                    <div class="text">
                        © {{ new Date().getFullYear() }} Parceiro da Construção. <br />
                        Todos os direitos reservados.
                    </div>
                    <div class="inline-content">
                        <a class="text" href="https://parceirodaconstrucao.com.br/help-page" target="_blank">
                            Suporte
                        </a>
                        <a href="https://diwe-pdc.s3.sa-east-1.amazonaws.com/politica.html" target="_blank" class="text">
                            Termos de uso e Política de privacidade
                        </a>
                    </div>
                </div>
            </div>
            <div class="second-row">
                <div class="footer-container">
                    <div class="pdc-footer--bottom">
                        <div v-for="(item, item_key) in logos" :key="item_key" :class="`logo-item ${item.title}`">
                            <img :src="item.icon" :alt="item.title" />
                        </div>
                    </div>
                    <el-dialog top="50px" custom-class="footer-dialog" title="Termos de uso e Política de privacidade"
                        :visible.sync="dialogVisible" width="60%">
                        <div class="modal-container-height" v-html="html"></div>
                    </el-dialog>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
import Vue from 'vue';
import { Dialog } from 'element-ui';
Vue.component(Dialog.name, Dialog);
import FooterSkeleton from './FooterSkeleton.vue'

export default {
    name: 'Footer',
    props: {
        loading: {
            type: Boolean,
            default: true,
        },
        logos: {
            type: Object,
            default: () => ({
                arce: {
                    title: 'ArcelorMittal',
                    icon: 'https://diwe-pdc.s3.sa-east-1.amazonaws.com/foundation/ArcelorMittal.svg'
                },
                saint: {
                    title: 'Saint-Gobain',
                    icon: 'https://diwe-pdc.s3.sa-east-1.amazonaws.com/foundation/Saint-Gobain.svg'
                },
                qtz: {
                    title: 'Quartzolit',
                    icon: 'https://uploads-ssl.webflow.com/6169b9979fca67b2a3bc6fec/639b6ca6a221fe00df2b5b0a_logo-quartzolit%20(2).svg'
                },
                bra: {
                    title: 'Brasilit',
                    icon: 'https://uploads-ssl.webflow.com/6169b9979fca67b2a3bc6fec/639b6ca66ecf449b8e3aa14a_logo-brasilit%20(1).svg'
                },
                pla: {
                    title: 'Placo',
                    icon: 'https://uploads-ssl.webflow.com/6169b9979fca67b2a3bc6fec/639b6ca6385a546dabea4043_logo-placo%20(1).svg'
                },
                iso: {
                    title: 'Isover',
                    icon: 'https://uploads-ssl.webflow.com/6169b9979fca67b2a3bc6fec/639b6ca694b3a31ff8cf6ab5_logo-isover%20(1).svg'

                },
                eco: {
                    title: 'Ecophon',
                    icon: 'https://diwe-pdc.s3.sa-east-1.amazonaws.com/foundation/logo-ecophon.svg'
                },
            }),
        },
    },
    components: {
        FooterSkeleton
    },
    data() {
        return {
            dialogVisible: false,
            html: '',
        };
    },
    methods: {
        // handleDialog(e) {
        //     e.preventDefault();
        //     const url =
        //         '';

        //     fetch(url)
        //         .then((res) => {
        //             return res.text();
        //         })
        //         .then((data) => {
        //             this.html = data;
        //             this.dialogVisible = true;
        //         });
        // },
    },
};
</script>

<style lang="scss">
@import './styles.scss';
</style>
