/**
 *
 * MIXINS
 *
 */

var componentsFuncs = {
    mixins: [mainFuncs],
    methods: {
        blockSaveData: function (code, callback) {
            this.state.active = false;
            this.ajaxReq('iblocks_main_'+code+'_save', 'post', {
                fields: this.fields,
            }, (response) => {
                // Blocks update
                this.$emit('block_update', code);
            }, (response) => {
            }, (response) => {
                // Callback success
                if (typeof callback === 'function') {
                    callback(response);
                }
            });
        },
    },
    mounted() {
        // Blocks update (ordering data)
        this.$root.$on('blocks_update_before', (calling_block) => {
            this.state.active = false;
        });
        // Blocks update (data is received)
        this.$root.$on('blocks_update', (data, calling_block) => {
            this.state = data.blocks[this.code].state;
            this.fields = data.blocks[this.code].fields;
            this.info = data.blocks[this.code].info;
        });
    },
};


/**
 *
 * COMPONENTS
 *
 */

// Params of product list
Vue.component('iblocks-main-general', {
    props: [],
    data: function () {
        return {
            code: 'general',
            state: {
                display: true,
                active: false,
            },
            fields: {
            },
            info: {
            },
        }
    },
    template: `
<div class="card" v-bind:class="{ \'block-disabled\': state.active == false }" v-if="state.display">
    <div class="card-body">
        <h4 class="header-title">{{ $t("page.SP_DS_IBLOCKS_MAIN_GENERAL_TITLE") }}</h4>
        <p class="sub-header">{{ $t("page.SP_DS_IBLOCKS_MAIN_GENERAL_SUBTITLE") }}</p>
        <div class="form-group mb-3">
            <label>{{ $t("page.SP_DS_IBLOCKS_MAIN_GENERAL_PRICES") }}</label>
        </div>
        <button class="btn btn-success" @click="blockSaveData(code)">
            {{ $t("page.SP_DS_IBLOCKS_MAIN_SAVE") }}
        </button>
    </div> <!-- end card-body -->
</div> <!-- end card -->
`,
    mixins: [utilFuncs, componentsFuncs],
});

// Comparable table of parameters
Vue.component('iblocks-main-comptable', {
    props: ['code', 'block_title', 'block_subtitle'],
    data: function () {
        return {
            state: {
                display: true,
                active: false,
            },
            fields: {
                table_comp: [],
            },
            info: {
                store_items: [],
                crm_items: [],
            },
        }
    },
    template: `
<div class="card" v-bind:class="{ \'block-disabled\': state.active == false }" v-if="state.display">
    <div class="card-body">
        <h4 class="header-title">{{ block_title }}</h4>
        <p class="sub-header">{{ block_subtitle }}</p>
        <div class="form-group mb-2">
            <table class="table mb-3 table-params table-params-props table-bordered">
                <thead>
                <tr>
                    <th class="param"><i class="icon icon-bitrix"></i> {{ $t("page.SP_DS_IBLOCKS_MAIN_COMPTABLE_STORE_HEAD_IBLOCK") }}</th>
                    <th class="value"><i class="icon icon-bitrix24"></i> {{ $t("page.SP_DS_IBLOCKS_MAIN_COMPTABLE_CRM_HEAD_FIELD") }}</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="store_item in info.store_items">
                    <td class="param">{{store_item.name}} ({{store_item.id}})</td>
                    <td class="value">
                        <b-form-select v-model="fields.table_comp[store_item.id]">
                            <option value="">{{ $t('page.SP_DS_IBLOCKS_MAIN_COMPTABLE_FIELD_NOTSET') }}</option>
                            <option v-for="crm_item in info.crm_items" :value="crm_item.id">{{crm_item.name}} ({{crm_item.id}})</option>
                        </b-form-select>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <button class="btn btn-success" @click="blockSaveData(code)">
            {{ $t("page.SP_DS_IBLOCKS_MAIN_SAVE") }}
        </button>
    </div> <!-- end card-body -->
</div> <!-- end card -->
`,
    mixins: [utilFuncs, componentsFuncs],
});


/**
 *
 * VUE APP
 *
 */

const i18n = new VueI18n({
    locale: 'ru',
    messages,
});

var app = new Vue({
    el: '#app',
    i18n,
    mixins: [utilFuncs, mainFuncs],
    data: {
        main_error: '',
    },
    methods: {
        // Blocks update
        updateBlocks: function (calling_block) {
            // Blocks update
            this.$emit('blocks_update_before', calling_block);
            this.ajaxReq('iblocks_main_get', 'get', {
                id: this.$profile_id,
            }, (response) => {
                this.$emit('blocks_update', response.data, calling_block);
            }, (response) => {
            }, (response) => {
                // Callback success
                if (typeof callback === 'function') {
                    callback(response);
                }
            });
        },
    },
    mounted() {
        this.updateBlocks();
    },
});