const CreateMsgRouter = {
	template: `
<div class="content">
    <div class="column pull-right-sm is-four-fifths-desktop">
        <div id="mobile" class="om-card card">
            <h4>Neue Nachricht erstellen</h4>
             <!--<b-field>
               <b-input placeholder="User" id="user"></b-input>
            </b-field>-->

            <label class="label">{{ userName }}</label>
            <b-field>
                <b-input placeholder="Betreff" id="subject"></b-input>
            </b-field>

            <b-field label="Tags">
                <b-taginput
                    id="tag"
                    v-model="selected"
                    :data="filteredDataArray"
                    autocomplete
                    allow-new:false
                    icon="label"
                    placeholder="#"

                    @input="saveTagsToArray">
                </b-taginput>
            </b-field>

            <b-field>
                <b-input placeholder="Nachricht" id="message" type="textarea"></b-input>
            </b-field>

	       <b-button @click="$router.go(-1)">ABBRECHEN</b-button>
	       <b-button type="is-primary" @click="createMsg">SENDEN</b-button>
        </div>
    </div>
</div>`,

	data: function () {
		return {
            auth: auth,
            isDisabled: false,
			selected: [],
            searchtext : "",
			taglist: data,
		};
	},
    computed:{
        filteredDataArray: function() {
            return this.taglist.filter((option) => {
                return option
                    .toString()
                    .toLowerCase()
                    .indexOf(this.searchtext.toLowerCase()) >= 0
            })
        },
        userName: function() {
            return 'User: '+auth.name;
        }
    },
	methods: {
        saveTagsToArray: function() {
            tagArray = this.selected;
            console.info(tagArray);
        },
		createMsg: function () {
			var _subject = $("#subject").val();
			var _message = $("#message").val();
            var tmpArr = [];
            tagArray.forEach(function(tag) {
                console.info(tag);
                tmpArr.push(tag.replace(/#/g, ''));
            });
            tagArray = tmpArr;
            var _tag = tagArray;
            var _user = auth.name.split(' ');
            if (_user.length < 2) {
                _user = _user[0];
            } else {
                _user = _user[1] + ', ' + _user[0];
            }
			//console.log("Message Created: " + _tag + " " + _message + " " + _user);
			$.ajax({
				url: "api/msg",
				data: {
					subject: _subject,
					message: _message,
					user: _user,
					tag: _tag
				},
				method: "POST"
			}).done(have_result).fail(have_error);

			function have_result(res) {
				//console.log(res);
                router.push('/home')
			}

			function have_error(err) {
				console.log("error: " + err.responseText);
				console.log(err);
			}
		},
		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;
                    console.log("DATA: "+data);
                    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);
                });
        },
	},
	mounted: function () {
        //this.list_tags();
		if ($(this).bootstrapMaterialDesign)
			$(this).bootstrapMaterialDesign();
	},
};