<template>
	<div class="read-more-component" style="word-break: break-all;">
		<div v-if="status.content.length < 200" v-html="content"></div>
		<div v-else>
			<span v-html="content"></span>
			<a
				v-if="cursor == 200 || fullContent.length > cursor"
				class="font-weight-bold text-muted" href="#"
				style="display: block;white-space: nowrap;"
				@click.prevent="readMore">
				<i class="d-none fas fa-caret-down"></i> Read more...
			</a>
		</div>
	</div>
</template>

<script type="text/javascript">
	export default {
		props: {
			status: {
				type: Object
			},

			cursorLimit: {
				type: Number,
				default: 200
			}
		},

		data() {
			return {
				fullContent: null,
				content: null,
				cursor: 200
			}
		},

		mounted() {
			this.cursor = this.cursorLimit;
			this.fullContent = this.status.content;
			this.content = this.status.content.substr(0, this.cursor);
		},

		methods: {
			readMore() {
				this.cursor = this.cursor + 200;
				this.content = this.fullContent.substr(0, this.cursor);
			}
		}
	}
</script>