Vue.component("action-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>          <div style="height: calc(100vh - 10px)">             <q-splitter v-model="splitter">                 <template v-slot:before>                     <action-list-menu @event="on_list_menu_event" style="margin: 5px;" :tags="tags"></action-list-menu>                     <q-scroll-area style="height: calc(100vh - 100px)">                         <action-list ref="list" @event="on_list_event" :list="list" :tags="tags" :list_filter="list_filter"></action-list>                     </q-scroll-area>                 </template>                  <template v-slot:after>                     <action-editor-menu @event="on_editor_menu_event" style="margin: 5px;"></action-editor-menu>                     <action-editor @event="on_editor_event" ref="editor"></action-editor>                 </template>             </q-splitter>         </div>               </div> </template>',
data :function () {
    return {
        splitter: 50,
        signin_visible: '',
        prev_command: undefined,
        section_templates: [],
        list: [],
        tags: [],
        list_filter: {
            text: '',
            filter_tags: []
        },
        count_opened_tabs: 0
    };
},
methods :{
    axios_send(subject, params, params_ignore) {
        this.$refs.axios.send(localStorage.getItem('action_token'), subject, params, params_ignore);
    },
    on_axios_error(data) {
        if (!data || !data.subject)
            return;
        if (data.error.response && data.error.response.status === 401) {
            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;
        }
        if (data.subject === 'signin') {
            if (!data.token) {
                this.$refs.notice.error('backend return empty token');
                return;
            }
            localStorage.setItem('action_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 === 'section') {
            if (data.answer) {
                this.section_templates = data.answer;
            }
            return;
        }
        if (data.subject === 'list') {
            let tags = [];
            data.answer.forEach(a => {
                a.tags.forEach(t => {
                    if (tags.some(f => vvs.equal(f, t)))
                        return;
                    tags.push(t);
                });
            });
            this.tags = tags.sort((a, b) => {
                let aa = vvs.toString(a, '').toLowerCase();
                let bb = vvs.toString(b, '').toLowerCase();
                if (aa > bb)
                    return 1;
                if (aa < bb)
                    return -1;
                return 0;
            });
            this.list = data.answer;
            this.axios_send('section');
            return;
        }
        if ((data.subject === 'check' || data.subject === 'save' || data.subject === 'test') && data.answer) {
            if (data.answer.errors && data.answer.errors.length > 0) {
                if (data.answer.errors.length === 1) {
                    this.$refs.notice.error('in action find error: '.concat(data.answer.errors[0]));
                } else {
                    this.$refs.notice.error('in action find errors:');
                    this.$refs.notice.error(data.answer.errors);
                }
                return;
            }
            if (data.subject === 'check') {
                this.$refs.notice.message('good action');
            } else if (data.subject === 'save') {
                if (data.answer.rid) {
                    if (data.params && data.params.idx) {
                        this.$refs.editor.editor_edit(data.params.idx, data.answer.rid, data.params.data_edit);
                    }
                    this.$refs.notice.message('saved action with name '.concat(data.answer.rid));
                }
            } else if (data.subject === 'test') {
                this.$refs.editor.editor_test(data.params.idx, data.answer);
            }
            return;
        }
        if (data.subject === 'delete' && data.answer) {
            if (data.answer.errors && data.answer.errors.length > 0) {
                this.$refs.notice.error(data.answer.errors);
            }
            if (data.answer) {
                this.list = this.list.filter(f => !vvs.equal(f.rid, data.answer));
                this.$refs.notice.message('delete action with name '.concat(data.answer));
            }
            return;
        }
        if (data.subject === 'item' && data.answer && Array.isArray(data.answer) && data.answer.length > 0) {
            this.$refs.editor.editor_add(data.answer[0].rid, data.answer[0].data);
            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_editor_menu_event: function (env) {
        if (env.command === 'sign_out') {
            if (this.count_opened_tabs > 0) {
                this.$refs.notice.warning('close all action in tabs before sign out');
            } else {
                this.list = [];
                localStorage.removeItem('action_token');
            }
            return;
        }
        if (env.command === 'new') {
            let template = '';
            if (this.section_templates && this.section_templates.length > 0) {
                if (env.mode === 'template') {
                    template = this.section_templates.map(m => {
                        return m.section.concat('\n', '\n', '\n');
                    }).join('');
                } else if (env.mode === 'template_note') {
                    template = this.section_templates.map(m => {
                        return m.section.concat('\n', m.description, '\n', '\n', '\n');
                    }).join('');
                }
            }
            this.$refs.editor.editor_add(undefined, template);
            return;
        }
        let source = this.$refs.editor.editor_get_current();
        if (!source) {
            this.$refs.notice.error('not select tab with action');
            return;
        }
        if (env.command === 'clone') {
            this.$refs.editor.editor_add(undefined, source.data_edit);
            return;
        }
        if (env.command === 'save' || env.command === 'check' || env.command === 'test') {
            if (!source.data_edit || source.data_edit.length <= 0) {
                this.$refs.notice.error('blank action');
                return;
            }
            this.axios_send(env.command, source, [
                'idx',
                'rid',
                'data_edit'
            ]);
            return;
        }
    },
    on_editor_event: function (env) {
        if (!env)
            return;
        if (env.command === 'tabs') {
            this.count_opened_tabs = env.mode;
            return;
        }
    },
    on_list_event: function (env) {
        if (env.command === 'delete') {
            this.axios_send('delete', env.item.rid);
            return;
        }
        if (env.command === 'select') {
            this.axios_send('item', env.item.rid);
            return;
        }
    },
    on_list_menu_event: function (env) {
        if (env.command === 'refresh') {
            this.axios_send('list', env.mode);
            return;
        }
        if (env.command === 'filter') {
            this.list_filter = env.mode;
            return;
        }
    }
},
mounted :function () {
    this.$nextTick(function () {
        this.axios_send('list');
    });
}
})