const data=[
				'#th',
				'#efi',
				'#wichtig',
    		];
const CreateMsgRouter = {
	template: `
<div class="content card om-card">
	<h4>Neue Nachricht erstellen</h4>

	<b-field>
        <b-input placeholder="User" id="user"></b-input>
    </b-field>

	<b-field>
        <b-input placeholder="Betreff" id="subject"></b-input>
    </b-field>

	<b-field label="Tags">
		<b-taginput
			v-model="selected"
			:data=items
			autocomplete
			allow-new:false
			icon="label"
			placeholder="#"
			@typing="getFilteredTags" id="tag">
		</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="$router.push('/home')">SENDEN</b-button>



</div>
`,
	data: function () {
		return {
			selected: [],
			items: data
		};
	},
	methods: {
		createMsg: function () {
			var subject = $("#subject").val();
			var message = $("#message").val();
			var tag = $("#tag").val();
			var user = $("#user").val();
			console.log("Message Created: " + tag + " " + message + " " + user);
			$.ajax({
				url: "api/createMsg",
				data: {
					sub: subject,
					mess: message,
					use: user,
					ta: tag
				},
				method: "POST"
			}).done(have_result).fail(have_error);

			function have_result(res) {
				console.log(res);
			}

			function have_error(err) {
				console.log("error: " + err.responseText);
				console.log(err);
			}
		},
		getFilteredTags(text) {
			this.items = data.filter((option) => {
				return option
					.toString()
					.toLowerCase()
					.indexOf(text.toLowerCase()) >= 0
			})
		},
	},
	mounted: function () {
		if ($(this).bootstrapMaterialDesign)
			$(this).bootstrapMaterialDesign();
	},
};