Vue.component('rules-debug', {
    props: {
        btn: {type: String, default: "btn btn-block btn-primary"},
        rules: {type: [Array, Boolean], required: true, default: []}
    },
    data: function () {
        return {
            id: "",
            moneda: 1
        };
    },
    created: function () {
        this.id = _.uniqueId('rules_debug_modal_');
    },
    computed: {
        isShow: function () {
            return (this.rules.length) ? true : false;
        },
        monedas: function () {
            let monedas = [];

            if (this.rules.length) {
                this.rules.forEach((rule, key) => {
                    monedas.push({
                        id: rule.key,
                        nombre: rule.moneda
                    });
                });
            }

            return monedas;
        },
        rule: function () {
            if (this.rules.length) {
                return  this.rules[this.moneda];
            }
            return false;
        }
    },
    template: `
<div class="rules-debug" v-if="isShow">
    
        <button type="button" v-bind:class="btn" data-toggle="modal" v-bind:data-target="'#' + id">
            <slot>MKTE Rules Debug</slot>
        </button>

    <div class="modal fade" v-bind:id="id">
        <div class="modal-dialog">
            <div class="modal-content">
    
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" ><span>&times;</span></button>
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon">Moneda</span>
                        <select class="form-control" v-model="moneda">
                            <option v-for="moneda in monedas"  v-bind:value="moneda.id" v-text="moneda.nombre"></option>
                        </select>
                    </div>
                </div>
            
                <div class="modal-header-bg"></div>
    
                <table class="table table-condensed table-hover">
                     <tbody>
                        <tr class="monto info">
                            <th class="text-left">Concepto</th>
                            <th class="text-center">Monto</th>
                        </tr>
                    
                        <tr class="monto warning">
                            <th>Base Fare</th>
                            <td v-text="rule.base_fare"></td>
                        </tr>

                        <tr class="monto warning">
                            <th>Taxes</th>
                            <td v-text="rule.taxes"></td>
                        </tr>

                        <template v-for="item in rule.rules">

                            <tr class="monto active">
                                <th v-text="item.nombre"></th>
                                <td v-text="item.monto"></td>
                            </tr>

                            <tr class="rule"><th>Valor Tipo</th><td v-text="item.valor_tipo"></td></tr>
                            <tr class="rule"><th>Valor Sobre</th><td v-text="item.valor_sobre"></td></tr>
                            <tr class="rule"><th>Agrupamiento</th><td v-text="item.agrupamiento"></td></tr>
                            <tr class="rule"><th>Moneda</th><td v-text="item.moneda"></td></tr>

                        </template>

                    </tbody>
                    <tfoot>
                        <tr class="monto success">
                            <th>Total Fare</th>
                            <td v-text="rule.total_fare"></td>
                        </tr>
                    </tfoot>
                </table>
    
            </div>
        </div>
    </div>
    
</div>
`
});