Vue.component("service-knowledge",{props:{searchQuery:String,defaultKeywords:String,itemLimit:{type:Number,"default":5},showPaging:{type:Boolean,"default":!1},activity:String,featured:{type:Boolean,"default":!1},products:Array,orderBy:String,noResultsMessage:{type:String,"default":"Sorry, we couldn't find any knowledge base matches."}},computed:{articles(){return this.$store.state.results.search},totalResults(){return this.$store.state.results.totalCount},skipResults(){return this.$store.state.query.skip},loading(){return this.$store.state.loading},error(){return this.$store.state.error}},methods:{changePage(skipResults){this.$store.dispatch("skipResults",skipResults)}},created(){this.$store.dispatch("init",{context:{url:"/api/support/knowledge/search"},query:{userKeywords:this.searchQuery,defaultKeywords:this.defaultKeywords,itemLimit:this.itemLimit,orderBy:[this.orderBy],otherSearchOptions:{activity:this.activity,featured:this.featured,products:this.products}}}).then(()=>{this.$emit("has-results",this.$store.state.results.totalCount>0)})},template:`
<div>
	<p v-if="!loading && !error && totalResults === 0">{{ noResultsMessage }}</p>
    <p v-if="!loading && error">Sorry, there was a problem getting results.</p>
	<knowledge-article v-for="article in articles" :key="article.urlName"
						:article="article"></knowledge-article>
	<search-paging v-if="showPaging" class="my-5"
				:total-rows="totalResults"
				:start-row="skipResults"
				:row-limit="itemLimit"
				:page-limit="5"
				@change-page="changePage($event)"></search-paging>
</div>`});Vue.component("knowledge-article",{props:{article:Object},computed:{iconClass(){let icon="question-circle";switch(this.article.recordType){case"Issue Resolution":icon="exclamation-triangle";break;case"Troubleshooting Hub":icon="info-circle"}return"far fa-"+icon}},template:`
<div class="result-document d-flex align-items-center mb-2">
	<i class="result-document-icon" :class="iconClass" style="width: 22px;font-size:1.2em"></i>
    <div class="flex-grow-1 text-left">
      <a :href="article.url">{{ article.title }}</a>
    </div>
</div>`});Daktronics.Components.RegisterVues(".service-knowledge",makeSearchComponentStore);$("#service-knowledge-search").length&&new Vue({el:"#service-knowledge-search",router:Daktronics.Components.GetVueRouter(),store:makeSearchComponentStore(),computed:{searchQuery(){return this.$store.state.query.userKeywords}},methods:{updateUserSearchQuery(keywords){this.$store.dispatch("newKeywordQuery",keywords).then(()=>{$("#service-knowledge-search [type=text]").get(0).blur()})},restartSearch(){this.$store.dispatch("reset")}},created:function(){this.$store.commit("setRouter",this.$router)}});