<template>
	<div class="mdView">
		<!-- <div v-html="renderedMarkdown"></div> -->
		<vue-markdown :source="markdownContent" />
	</div>
</template>

<script>
// import MarkdownIt from "markdown-it";
import VueMarkdown from 'vue-markdown';

export default {
	components: {
		VueMarkdown,
	},
	props: {
		url: {
			type: String,
			default: "",
		},
		text:{
			type:String,
			default:"",
		},
	},
	data() {
		return {
			markdownContent: "",
		};
	},
	watch:{
		text(){
			this.markdownContent = this.text;
		}
	},
	// computed: {
	// 	renderedMarkdown() {
	// 		return this.md.render(this.markdownContent);
	// 	},
	// },
	methods: {
		getMarkdown() {
			if(this.text)return this.markdownContent = this.text;
			if(!this.url)return;
		},
	},
	mounted(){
		this.getMarkdown();
	}
};
</script>
<style scoped>
.mdView {
	max-width: 100%;
	height: 100%;
	font-size: 15px;
}

.mdView >>>.table{
	width: 100%;
  border-collapse: collapse;
	margin: 10px 0;
}

.mdView >>>th,td{
    border: 1px solid #999;
    text-align: center;
    padding: 10px 10px;
}
.mdView >>>td{
    border: 1px solid #999;
    text-align: center;
    padding: 10px 10px;
}

.mdView>>>ol{
	margin-left: 20px;
	list-style: auto;
}

.mdView>>>ul{
	margin-left: 20px;
	list-style: auto;
}
</style>
