<template>
    <div class="popover-container">
        <span class="popover-table-price">
            <span v-if="is_icon"><i class="icon-info fas fa-info-circle" id="text"></i></span>
            <span v-else :class="is_admin ? 'text-price-admin' : 'text-price'" id="text">Ver parcelas disponiveis <i class="fa fa-chevron-down"></i></span>
            <div id="tooltip" class="popover-content">
                <h4 v-if="is_icon">Tabela de parcelas e valores.</h4>
                <h4 v-else>Ver parcelas disponiveis</h4>
                <p v-if="is_icon" class="bottom-margin-small">Na tabela abaixo, você poderá observar a simulação da quantidade de parcelas e seus respectivos valores conforme configurado pelo mesmo. Vale lembrar que essa tabela é apenas uma simulação das parcelas para o modelo personalizado, e não será exibido na página do produto. Caso queira essa opção, basta selecionar o modelo parcelado.</p>
                <p v-else>Você poderá escolher o número de parcelas no momento de concluir a compra.</p>
                <table>
                    <thead>
                        <tr>
                            <th>Prazo</th>
                            <th>Valor Mensal (R$)</th>
                            <th>Total (R$)</th>
                        </tr>
                    </thead>
                    <tbody v-if="data.amount_parcels && data.parcel_with_no_fees">
                        <tr v-for="(parcel, index) in showParcels">
                            <th>
                                {{ parcel.text }}
                            </th>
                            <th>
                                {{ parcel.value }}
                            </th>
                            <th>
                                {{ parcel.total }}
                            </th>
                        </tr>
                    </tbody>
                </table>
                <div id="arrow" data-popper-arrow></div>
            </div>
        </span>
    </div>
</template>



<script src="./scripts.js"></script>
<style src="./styles.css" scoped></style>