<template>
	<content-with-sidebar
		v-if="Object.keys(blogDetail).length"
		class="cws-container cws-sidebar-right blog-wrapper">

		<!-- content -->
		<div class="blog-detail-wrapper">
			<b-row>
				<!-- blogs -->
				<b-col cols="12">
					<b-card
						:img-src="blogDetail.blog.thumbnail"
						img-top
						img-alt="Blog Detail Pic"
						:title="blogDetail.blog.title">
						<b-media no-body>
							<b-media-aside
								vertical-align="center"
								class="mr-50">
								<b-avatar
									href="javascript:void(0)"
									size="24"
									:src="require('@/assets/images/avatars/' + blogDetail.blog.author_id + '-small.png')" />
							</b-media-aside>
							<b-media-body>
								<small class="text-muted mr-50">by</small>
								<small>
									<b-link class="text-body">{{ formatName(blogDetail.blog.author_id) }}</b-link>
								</small>
								<span class="text-muted ml-75 mr-50">|</span>
								<small class="text-muted">{{ formatTime(blogDetail.blog.created_at, 'LLLL') }}</small>
							</b-media-body>
						</b-media>
						<div class="my-1 py-25">
							<b-link
								v-for="tag in blogDetail.blog.tag.split(',')"
								:key="tag">
								<b-badge
									pill
									class="mr-75"
									:variant="tagsColor(tag)">
									{{ tag }}
								</b-badge>
							</b-link>
						</div>
						<!-- eslint-disable vue/no-v-html -->
						<div
							class="blog-content"
							v-html="blogDetail.blog.content" />


						<hr class="my-2">


						<div id="scroll-Anchor" class="d-flex align-items-center justify-content-between">


						</div>
					</b-card>
				</b-col>
				<!--/ blogs -->

				<!-- blog comment -->
				<b-col
					id="blogComment"
					cols="12"
					class="mt-2">
					<h6 class="section-label" id="comment">
						留言
					</h6>
					<b-card
						v-if="!(blogDetail.comments.length == 0)">
						<div class="media-list media-bordered">
							<b-media no-body v-for="(comment, index) in blogDetail.comments"
								:key="index">
								<b-media-aside class="mr-75">
									<b-avatar
										:src="require('@/assets/images/avatars/' + comment.author_id + '-small.png')"
										size="38" />
								</b-media-aside>
								<b-media-body>
									<h6 class="font-weight-bolder mb-25">
										{{ formatName(comment.author_id) }}
									</h6>
									<b-card-text>{{ formatTime(comment.created_at, 'LLLL') }}</b-card-text>
									<b-card-text>
										{{ comment.content }}
									</b-card-text>
									<b-link v-if="false">
										<div class="d-inline-flex align-items-center">
											<feather-icon
												icon="CornerUpLeftIcon"
												size="18"
												class="mr-50" />
											<span>回復</span>
										</div>
									</b-link>
								</b-media-body>
							</b-media>
						</div>
					</b-card>
					<b-card
						v-else>
						<div class="media-list media-bordered">
							<b-media no-body>
								<b-media-aside class="mr-75">
									<b-avatar
										size="38" />
								</b-media-aside>
								<b-media-body>
									<h6 class="font-weight-bolder mb-25">
										暫無留言
									</h6>
									<b-card-text>{{ }}</b-card-text>
									<b-card-text>
										趕快來留點甚麼吧~
									</b-card-text>
								</b-media-body>
							</b-media>
						</div>
					</b-card>
				</b-col>
				<!--/ blog comment -->

				<!-- Leave a Blog Comment -->
				<b-col
					cols="12"
					class="mt-2">
					<h6 class="section-label">
						留下留言
					</h6>
					<b-card>
						<b-form>
							<b-row>
								<b-col cols="12">
									<validation-provider
										#default="{ errors }"
										name="留言"
										rules="required">
										<b-form-group class="mb-2">
											<b-form-textarea
												v-model="new_comment"
												name="textarea"
												rows="4"
												placeholder="留言..." />
										</b-form-group>
										<small class="text-danger">{{ errors[0] }}</small>
									</validation-provider>

								</b-col>
								<b-col cols="12">
									<b-button
										@click="postComment()"
										v-ripple.400="'rgba(255, 255, 255, 0.15)'"
										variant="primary">
										發布留言
									</b-button>
								</b-col>
							</b-row>
						</b-form>
					</b-card>
				</b-col>
				<!--/ Leave a Blog Comment -->
			</b-row>
			<!--/ blogs -->
		</div>
		<!--/ content -->

		<!-- sidebar -->
		<div
			slot="sidebar"
			class="blog-sidebar py-2 py-lg-0">
			<!-- input search -->
			<b-form-group class="blog-search">
				<b-input-group class="input-group-merge">
					<b-form-input
						id="search-input"
						v-model="search_query"
						placeholder="搜尋..." />
					<b-input-group-append
						class="cursor-pointer"
						is-text>
						<feather-icon
							icon="SearchIcon" />
					</b-input-group-append>
				</b-input-group>
			</b-form-group>
			<!--/ input search -->

			<!-- recent posts -->
			<div class="blog-recent-posts mt-3">
				<h6 class="section-label mb-75">
					近期貼文
				</h6>
				<b-media
					v-for="(recentpost, index) in blogSidebar.recentPosts"
					:key="recentpost.img"
					no-body
					:class="index ? 'mt-2' : ''">
					<b-media-aside class="mr-2">
						<b-link
							:to="{ name: 'pages-blog-detail', params: { id: recentpost.id } }">
							<b-img
								:src="recentpost.thumbnail"
								:alt="recentpost.thumbnail.slice(6)"
								width="100"
								rounded
								height="70" />
						</b-link>
					</b-media-aside>
					<b-media-body>
						<h6 class="blog-recent-post-title">
							<b-link
								:to="{ name: 'pages-blog-detail', params: { id: recentpost.id } }"
								class="text-body-heading">
								{{ recentpost.title }}
							</b-link>
						</h6>
						<span class="text-muted mb-0">
							{{ formatTime(recentpost.created_at, 'll') }}
						</span>
					</b-media-body>
				</b-media>
			</div>
			<!--/ recent posts -->

			<!-- categories -->
			<div class="blog-categories mt-3">
				<h6 class="section-label mb-1">
					Categories
				</h6>

				<div
					v-for="category in blogSidebar.categories"
					:key="category.icon"
					class="d-flex justify-content-start align-items-center mb-75">
					<b-link>
						<b-avatar
							rounded
							size="32"
							:variant="tagsColor(category.category)"
							class="mr-75">
							<feather-icon
								:icon="category.icon"
								size="16" />
						</b-avatar>
					</b-link>
					<b-link>
						<div class="blog-category-title text-body">
							{{ category.category }}
						</div>
					</b-link>
				</div>
			</div>
			<!--/ categories -->
		</div>
	</content-with-sidebar>
</template>

<script>
import { ValidationProvider, ValidationObserver } from "vee-validate";
import { required } from "@validations";
import {
	BFormInput,
	BMedia,
	BAvatar,
	BMediaAside,
	BMediaBody,
	BImg,
	BLink,
	BFormGroup,
	BInputGroup,
	BInputGroupAppend,
	BCard,
	BRow,
	BCol,
	BBadge,
	BCardText,
	BDropdown,
	BDropdownItem,
	BForm,
	BFormTextarea,
	BFormCheckbox,
	BButton,
} from 'bootstrap-vue'
import Ripple from 'vue-ripple-directive'
import { kFormatter } from '@core/utils/filter'
import ContentWithSidebar from '@core/layouts/components/content-with-sidebar/ContentWithSidebar.vue'
import useJwt from '@/auth/jwt/useJwt'
import moment from 'moment'
import ToastificationContent from "@core/components/toastification/ToastificationContent.vue";

export default {
	components: {
		BFormInput,
		BMedia,
		BAvatar,
		BMediaAside,
		BMediaBody,
		BLink,
		BCard,
		BRow,
		BCol,
		BFormGroup,
		BInputGroup,
		BInputGroupAppend,
		BImg,
		BBadge,
		BCardText,
		BDropdown,
		BForm,
		BDropdownItem,
		BFormTextarea,
		BFormCheckbox,
		BButton,
		ContentWithSidebar,
		ValidationProvider,
		ValidationObserver,
		required
	},
	directives: {
		Ripple,
	},
	data() {
		return {
			search_query: '',
			new_comment: '',
			blogDetail: [],
			blogSidebar: {},
			nameList: [],
			socialShareIcons: ['GithubIcon', 'GitlabIcon', 'FacebookIcon', 'TwitterIcon', 'LinkedinIcon'],
		}
	},
	created() {
		useJwt.postData('/api/message/detail', { 'id': this.$route.params.id }).then(response => {
			this.blogDetail = response.data;
		}).catch(error => {
			console.log(error)
		});
		useJwt.postData('/api/message/user', null).then(response => {
			this.nameList = response.data;
		}).catch(error => {
			console.log(error)
		});
		useJwt.postData('/api/message/recent', null).then(response => {
			this.blogSidebar = response.data;
		}).catch(error => {
			console.log(error)
		});

	},
	methods: {
		kFormatter,
		tagsColor(tag) {
			if (tag === '台灣小吃') return 'light-success'
			if (tag.includes('美食')) return 'light-info'
			if (tag === '熱炒店') return 'light-warning'
			if (tag.includes('吃到飽')) return 'light-danger'
			return 'light-primary'
		},
		formatTime(value, format) {
			return moment(value).format(format);
		},
		formatName(id) {
			return this.nameList[id];
		},
		postComment() {
			useJwt.postData('/api/message/storeComment', { 'message_id': this.$route.params.id, 'content': this.new_comment }).then(response => {
				this.blogDetail.comments.push(response.data);
				this.new_comment = '';
			}).catch(error => {
				console.log(error)
				this.$toast({
					component: ToastificationContent,
					props: {
						title: `錯誤`,
						icon: 'AlertTriangleIcon',
						variant: 'warning',
						text: `發布留言不能為空`,
					},
				})
			});
		},
		scrollToComment() {
			if (location.hash == '#blogComment') {
				const element = document.getElementById('scroll-Anchor');
				element.scrollIntoView({
					block: 'start',
					behavior: 'smooth',
				});
			}
		},
	},
	watch: {
		'$route': function () {
			useJwt.postData('/api/message/detail', { 'id': this.$route.params.id }).then(response => {
				this.blogDetail = response.data;
			}).catch(error => {
				console.log(error)
			});
		},
	},
	mounted() {
		let scroll = this;
		check(scroll);
		function check(scroll) {
			setTimeout(() => {
				if (document.getElementById('scroll-Anchor') != null) {
					scroll.scrollToComment();
				} else {
					check(scroll);
				}
			}, 100)
		}
	}

}
</script>

<style lang="scss">
@import '~@resources/scss/vue/pages/page-blog.scss';

.blog-recent-post-title {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
</style>
