Vue.component("logger-app", {
template: '<template>     <div>         <vv-signin1 :visible="signin_visible === \'login\'" @close="on_signin"></vv-signin1>         <vv-signin2 :visible="signin_visible === \'password\'" @close="on_signin"></vv-signin2>         <vv-notice ref=\'notice\'></vv-notice>         <axios ref="axios" @error="on_axios_error" @reply="on_axios_reply"></axios>          <logger-list-menu @event="on_list_menu_event" style="margin: 5px;"></logger-list-menu>         <q-splitter @input = "on_split" v-model="splitter_computed" horizontal style="height: calc(100vh - 70px);" disable="!item">             <template v-slot:before>                 <logger-list @event="on_list_event" :item="item" :list ="list" :pipe_list="pipe_list" :authorization="authorization" style="height: 100%;"></logger-list>             </template>             <template v-slot:after v-if="item" >                 <logger-item @event="on_item_event" :item="item" :trace_data_format="trace_data_format" :current_trace_key="item_trace_key" :my_dom_height="item_dom_height"></logger-item>             </template>         </q-splitter>     </div> </template>',
data :function () {
    return {
        splitter: 100,
        splitter_saved: 50,
        item_dom_height: undefined,
        signin_visible: '',
        prev_command: undefined,
        list: [],
        pipe_list: [],
        item: undefined,
        item_trace_key: undefined,
        authorization: false,
        trace_data_format: []
    };
},
computed :{
    splitter_computed: {
        get: function () {
            return this.item ? this.splitter : 100;
        },
        set: function (val) {
            this.splitter = val;
        }
    }
},
methods :{
    on_split() {
        this.splitter_saved = this.splitter === 90 ? this.splitter_saved : this.splitter;
        this.calc_height_item();
    },
    calc_height_item() {
        this.item_dom_height = window.innerHeight / 100 * (100 - this.splitter);
    },
    axios_send(subject, params) {
        this.$refs.axios.send(localStorage.getItem('logger_token'), subject, params);
    },
    on_axios_error(data) {
        if (!data || !data.subject)
            return;
        if (data.error.response && data.error.response.status === 401) {
            this.authorization = false;
            if (data.subject !== 'signin-mode' && data.subject !== 'signin') {
                this.prev_command = {
                    subject: data.subject,
                    params: data.params
                };
            }
            if (data.subject !== 'signin-mode') {
                this.axios_send('signin-mode');
            }
        }
    },
    on_axios_reply(data) {
        if (data.subject === 'signin-mode') {
            this.signin_visible = data.answer;
            return;
        }
        this.authorization = true;
        if (data.subject === 'signin') {
            if (!data.token) {
                this.$refs.notice.error('backend return empty token');
                return;
            }
            localStorage.setItem('logger_token', data.token);
            if (!this.prev_command)
                return;
            let prev_subject = this.prev_command.subject;
            let prev_params = this.prev_command.params;
            this.prev_command = undefined;
            this.axios_send(prev_subject, prev_params);
            return;
        }
        if (data.subject === 'list') {
            if (!data.answer)
                return;
            let pipe_list = [];
            let allow_trace_to_data = data.answer.trace_to_data && Array.isArray(data.answer.trace_to_data);
            this.trace_data_format = Array.isArray(data.answer.trace_data_format) ? data.answer.trace_data_format : [];
            if (data.answer.log && data.answer.log.length > 0) {
                let len = data.answer.log.length;
                data.answer.log.forEach((item, index) => {
                    item.trace_loaded = data.params && data.params.load_trace === true ? true : false;
                    item._rn = len - index;
                    item.pipe_list.filter(f => !vvs.isEmptyString(f)).forEach(pipe => {
                        if (!pipe_list.some(f => vvs.equal(f, pipe))) {
                            pipe_list.push(pipe);
                        }
                    });
                    item.trace_list_data = [];
                    if (allow_trace_to_data && item.trace_list.length > 0) {
                        data.answer.trace_to_data.forEach(t => {
                            let fnd = item.trace_list.find(f => vvs.equal(f.key, t.trace));
                            if (fnd) {
                                item.trace_list_data.push(vvs.format('{0}{1}{2}', [
                                    t.prefix,
                                    fnd.data,
                                    t.suffix
                                ]));
                            }
                        });
                    }
                });
            }
            pipe_list.sort();
            this.list = data.answer.log;
            this.pipe_list = pipe_list;
            return;
        }
        if (data.subject === 'item') {
            if (data.answer.log && data.answer.log.rid) {
                let fnd = this.list.find(f => f.rid === data.answer.log.rid);
                if (fnd) {
                    fnd.trace_loaded = true;
                    fnd.trace_list = data.answer.log.trace_list;
                    this.item = fnd;
                    this.splitter = this.splitter_saved;
                }
            }
            return;
        }
        this.$refs.notice.error('backend return unknown answer');
        console.error('backend return unknown answer:');
        console.log(data);
    },
    on_signin: function (signin) {
        this.signin_visible = '';
        if (!signin || signin.signin !== true)
            return;
        this.axios_send('signin', CryptoJS.AES.encrypt(JSON.stringify(signin), crypk).toString());
    },
    on_list_menu_event: function (env) {
        if (!env)
            return;
        if (env.command === 'sign_out') {
            this.authorization = false;
            this.clear_loaded();
            localStorage.removeItem('logger_token');
            return;
        }
        if (env.command === 'period') {
            this.clear_loaded();
            this.axios_send('list', {
                period: env.period,
                load_trace: env.load_trace
            });
            return;
        }
    },
    on_list_event: function (env) {
        if (!env)
            return;
        if (env.command === 'trace' && env.item) {
            if (env.item.trace_loaded === true) {
                this.item = env.item;
                this.splitter = this.splitter_saved;
            } else {
                this.axios_send('item', { rid: env.item.rid });
            }
            return;
        }
    },
    on_item_event: function (env) {
        if (env.command === 'trace_key' && env.item) {
            this.item_trace_key = env.item;
            this.calc_height_item();
            return;
        }
        if (env.command === 'close') {
            this.item = undefined;
            this.splitter = 100;
            return;
        }
    },
    clear_loaded: function () {
        this.list = [];
        this.pipe_list = [];
        this.item = undefined;
    }
},
mounted :function () {
    window.addEventListener('resize', () => {
        this.calc_height_item();
    });
    this.$nextTick(function () {
    });
}
})