const FileRouter = {
    template: `
<div class="content">
<div class="column is-four-fifths-desktop pull-right-sm">
	<h4>Erweiterte Suche</h4>
	<b-field label="Suche nach">
		<b-select
			placeholder="Wähle eine Suchform"
			v-model="selectedOptions">
			<option value="freeSearch">Freie Suche</option>
			<option value="subject">Betreff</option>
			<option value="tags">Tags</option>
			<option value="text">Nachrichtentext</option>
			<option value="user">User</option>
		</b-select>
	</b-field>

	<b-field v-if="selectedOptions=='freeSearch'||selectedOptions=='subject'|| selectedOptions=='text' || selectedOptions=='user'">
        <b-input id="freeSe"></b-input>
    </b-field>

	<b-field v-if="selectedOptions=='tags'">
        <b-autocomplete v-model="searchtext"
        :data="filteredDataArray"
        placeholder="#" icon="label"
        @select="option => selected = option">
        </b-autocomplete>
	</b-field>

	<b-button type="is-primary" @click="search">SUCHE</b-button>

<div id="om-msg-cards" v-if="isExtendedSearch==true">
    <MsgCard
        v-for="id in messagelist.slice().reverse()"
        :key="id"
        :msg="messages[id] || {}"
    ></MsgCard>
</div>
</div>
</div>
`,
    data: function () {
        return {
            searchtext: "",
            selectedOptions: [],
            selected: [],
            taglist: data,
            messagelist: _messagelist,
            messages: _messages,
            isExtendedSearch: false,
        }
    },
    computed: {
        filteredDataArray() {
            return this.taglist.filter((option) => {
                return option
                    .toString()
                    .toLowerCase()
                    .indexOf(this.searchtext.toLowerCase()) >= 0
            })
        }
    },
    methods: {
        list_messages: function () {
            messages();
        },
        getFilteredTags(text) {
            this.taglist = data.filter((option) => {
                return option
                    .toString()
                    .toLowerCase()
                    .indexOf(text.toLowerCase()) >= 0
            })
        },
        list_tags: function () {
            $.ajax({
                    url: "api/tag/ids",
                    method: "GET"
                })
                .done(jd => {
                    // NICHT SO wg. Vue: _messagelist = jd;
                if(data == ""){
                    _taglist.splice(0, _taglist.length);
                    _taglist.push.apply(_taglist, jd);
                    console.log("tag: jd: " + jd);
                    for (var e in jd) {
                        if (!_tags[jd[e]]) {
                            get_insert_tag(jd[e]);
                        }
                    }
                }
                }).fail(function (e, f, g) {
                    console.log("err: " + e + f + g);
                });
        },
        saveTagsToArray: function () {
            tagArray = this.selected;
            console.info(tagArray);
        },
        search: function () {
            searching(this.searchtext);
            this.isExtendedSearch=true;
        },
        list_messages: function () {
            messages();
        },
    },
    mounted: function () {
        //this.search();
        //this.list_tags();
        //this.list_messages();
    },
};