const BookmarkRouter = {
    template: `
<div class="content">
    <div id="om-msg-cards" class="is-hidden-desktop">
        <MsgCard
            v-for="id in msgDisplay"
            :key="id"
            :msg="messages[id] || {}"
        ></MsgCard>
    </div>


    <div class="column is-three-quarters is-pulled-right is-hidden-touch content-desktop">

    </div>
</div>`,

    data: function () {
        return {
            messagelist: _messagelist,
            messages: _messages,
            isActive: true,
            messageId: '',
        }
    },
    computed:{
        msgDisplay: function(){
            return (this.messagelist.slice().reverse());
        }
    },
    methods: {
        myFilter: function() {
            this.isActive = !this.isActive;
        },
        getMessageId: function(){

        },
        getMessages: function(){
            var _usrid = "5d360f06b8f3ce67d12ccc92";
            $.ajax({
                url: "api/usr/id/" + _usrid,
                method: "GET"
            })
            .done(have_result).fail(have_error);

			function have_result(res) {
				var str = JSON.stringify(res[0].bookmarks).split(",");
                _messagelist.splice(0, _messagelist.length);
                for (var e in str) {
                    if (!_messages[str[e]]) {
                        str[e] =str[e].replace(/\[/g, '').replace(/\"/g, '').replace(/\]/g, '')
                        get_insert_message(str[e]);
                    }
                }
                _messagelist.push.apply(_messagelist, str);
                //console.log("bookmark str: "+str);
			}

			function have_error(err) {
				console.log("error: " + err.responseText);
				console.log(err);
			}
        }
    },
    mounted: function (){
        this.getMessages();
    }
};