Vue.component("logger-item", {
template: '<template>     <div>         <vv-notice ref=\'notice\'></vv-notice>         <div style="display: flex;align-items: center;">             <div style="min-width: 220px; text-align: end;">                 <q-btn-dropdown flat dropdown-icon="icon-eo-down-open" color="primary" :label="trace ? trace.key : \'<SELECT TRACE>\'">                     <q-list>                         <q-item v-for="t in item.trace_list" clickable v-close-popup @click="trace_select(t)">                             <q-item-section>                                 <q-item-label>{{t.key}}</q-item-label>                             </q-item-section>                         </q-item>                     </q-list>                 </q-btn-dropdown>             </div>             <div style="display: flex; margin: 0px 0px 0px auto;">                 <q-btn flat color="primary" label="copy to clipboard" @click="$refs.monaco_editor.toClipboard()"></q-btn>                 <q-btn flat color="primary" :label="\'close #\' + item._rn" @click="emit(\'close\')"></q-btn>             </div>         </div>         <vv-monaco-editor v-if="trace"             ref="monaco_editor"             v-bind:style=\'monaco_editor_style\'             v-model = \'trace.data\'             :lang=\'editor_lang\'             :options=\'monaco_editor_options\'             @mounted="on_monaco_editor_mounted"         ></vv-monaco-editor>              </div> </template>',
props :{
    item: { type: Object },
    current_trace_key: { type: String },
    trace_data_format: { type: Array },
    my_dom_height: { type: Number }
},
data :function () {
    return {
        trace: undefined,
        monaco_editor_options: {
            minimap: { enabled: false },
            readOnly: false
        },
        monaco_editor_style: { height: '500px' },
        first_show: true,
        format: 'no_need'
    };
},
watch :{
    item: function (new_val, old_val) {
        if (new_val && old_val && vvs.equal(new_val.rid) === old_val.rid)
            return;
        if (!new_val || !new_val.trace_list)
            return;
        let fnd = new_val.trace_list.find(f => vvs.equal(f.key, this.current_trace_key));
        if (fnd) {
            this.trace_select(fnd);
        } else if (new_val.trace_list.length > 0) {
            this.trace_select(new_val.trace_list[0]);
        } else {
            this.trace_select(undefined);
        }
    },
    my_dom_height: function (new_val, old_val) {
        this.monaco_editor_style.height = Math.round((new_val - 80) * 0.9).toString().concat('px');
    },
    text: function (new_val, old_val) {
        if (this.format === 'run') {
            this.format === 'done';
            this.$refs.monaco_editor.editor.updateOptions({ readOnly: true });
        }
    }
},
computed :{
    editor_lang: function () {
        if (!this.trace || !this.trace_data_format)
            return 'plaintext';
        let fnd = this.trace_data_format.find(f => f.trace.toLowerCase() === this.trace.key.toLowerCase());
        if (fnd)
            return fnd.lang;
        return 'plaintext';
    },
    text: function () {
        return this.trace ? this.trace.data : undefined;
    }
},
methods :{
    trace_select(trace) {
        if (this.trace && vvs.equal(this.trace.key, trace.key) && vvs.equal(this.trace.data, trace.data)) {
            return;
        }
        this.trace = undefined;
        this.$nextTick(function () {
            let fnd = this.trace_data_format ? this.trace_data_format.find(f => f.trace.toLowerCase() === trace.key.toLowerCase()) : undefined;
            if (fnd && fnd.format === true && trace.formatted !== true) {
                this.format = 'need';
                trace.formatted = true;
            } else {
                this.format = 'no_need';
            }
            this.monaco_editor_options.minimap.enabled = fnd && fnd.min_len_for_minimap && fnd.min_len_for_minimap < trace.data.length ? true : false;
            this.trace = trace;
        });
        this.emit('trace_key', trace.key);
    },
    on_monaco_editor_mounted() {
        if (this.format !== 'need') {
            this.$refs.monaco_editor.editor.updateOptions({ readOnly: true });
        }
        if (this.first_show === true) {
            setTimeout(() => {
                this.first_show === false;
                this.on_monaco_editor_mounted_internal();
            }, 100);
        } else {
            this.on_monaco_editor_mounted_internal();
        }
    },
    on_monaco_editor_mounted_internal() {
        if (this.format === 'need') {
            let action = this.$refs.monaco_editor.getAction('editor.action.formatDocument');
            if (action) {
                this.format = 'run';
                action.run().then(() => {
                });
            }
        }
    },
    emit(command, mode) {
        this.$emit('event', {
            command: command,
            item: mode
        });
    }
},
mounted :function () {
    this.$nextTick(function () {
        if (!this.item || !this.item.trace_list || this.item.trace_list.length <= 0)
            return;
        this.trace_select(this.item.trace_list[0]);
    });
}
})