Vue.component('MsgCard', {
    template: `
        <div class="om-card card">
            <h6 class="msg-head">
                <b>{{ msg.subject }}</b>
                <div id="msgid" >{{msg._id}}</div>
                <img src="favicon.ico" width=20px height=20px>
            </h6>
            {{ msg.message }}<br>
            <a v-for="tag in msg.tag" @click="filterForTag(tag)">#{{ tag }} </a>
            <br>
            <div class="om-card-footer">
                <div class="om-user-line">
                    <i class="material-icons">account_circle</i>
                    Erstellt von {{ msg.user }}
                </div>
                <i id="bockmark-not-active" class="material-icons" :key="isActive" @click="myFilter(msg._id)" v-if="!isActive">bookmark_border</i>
                <i id="bockmark-active" class="material-icons" :key="isActive" @click="myFilter(msg._id)" v-else>bookmark</i>
            </div>
        </div>`,
    props: ['msg', 'isBookmark'],

    data: function () {
        return {
            isActive: this.isBookmark,
            isActive_: 0,
            msgid: this.msg._id,
            bookmarkArray: auth.bookmarks,
        };
    },

    methods: {
        myFilter: function (_messageid) {
            //var _messageid = $("#msgid").text();
            if (this.isActive == true) {
                var index = this.bookmarkArray.indexOf(_messageid);

                if (index > -1) {
                    this.bookmarkArray.splice(index, 1);
                }
                this.isActive = false;
            } else {
                console.log("_messsageid: "+_messageid+" bookmarks: "+this.bookmarkArray);
                this.bookmarkArray.push(_messageid);
                this.isActive =true;
            }
            /*console.log("msgid"+_bookmark);
            var _userid = auth.user;
            this.isActive = !this.isActive;
            if(this.isActive){
                $.ajax({
                    url: "api/usr",
                    data: {
                        userid: _userid,
                        bookmark: _bookmark
                    },
                    method: "PUT"
                }).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);
                }
            }*/
        },
        filterForTag: function (tag) {
            console.log("link: " + tag);
            searching(tag);
        },
        isBookmarkActive: function (msgid) {
            //console.log("isBookmarkActive(): " + msgid);
            if (this.bookmarkArray.indexOf(msgid) > -1) {
                // $("#bockmark-not-active").css("visibility","hidden");
                // $("#bockmark-active").css("visibility","visible");
                this.isActive = true;
                //console.log("isBookmarkActive(): " + this.isActive);
                this.isActive_ = 1;

            }
        }
    },
    beforeMount: function () {
        //this.isBookmarkActive();
    }
});