<template>
	<template v-for="(item,index) in htmls" :key="index">
	<view v-if="item.type == 'image'" style="text-align:center;">
		<image :src="file_stor(item.content)" mode="widthFix" style="max-width:100%;"></image>
	</view>
	<view v-else-if="item.type == 'video'" style="text-align:center;">
		<video :src="file_stor(item.content)" style="width:100%;"></video>
	</view>
	<view v-else-if="item.type == 'audio'" style="padding:1em;">
		<ciy-audio :src="file_stor(item.content)"></ciy-audio>
	</view>
	<view v-else v-html="item.content" style="width:100%;position: relative;"></view>
	</template>
</template>

<script>
	export default {
		props: {
			md: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				htmls: []
			};
		},
		watch: {
			md: {
				handler(newD, oldD) {
					this.htmls = this.convert(newD);
				},
				immediate: true
			}
		},
		mounted() {},
		methods: {
			fillmdlines() {

			},
			convert(markdown) {
				// #,!,`,@lcr,|表格
				markdown = markdown || '';
				if (markdown.substr(0, 4) != '[MD]')
					return markdown;
				markdown = markdown.substr(4).trim();
				var mds = markdown.split('\n');
				var htmls = [];
				var html = '';
				var titnum2 = 0;
				var titnum3 = 0;
				var titnum4 = 0;
				for (var m in mds) {
					if (mds[m].length == 0) {
						continue;
					}
					if (mds[m].length > 0 && mds[m].trim() == '') {
						html += '<br/>';
						continue;
					}
					if (mds[m][0] == '#') { //标题1/2/3
						if (mds[m].substr(0, 4) == '####') {
							titnum4++;
							html += '<h3 class="md-h4">' + titnum2 + '.' + titnum3 + '.' + titnum4 + '、' + convertcode(mds[
								m].substr(4)) + '</h3>';
						} else if (mds[m].substr(0, 3) == '###') {
							titnum3++;
							titnum4 = 0;
							html += '<h3 class="md-h3">' + titnum2 + '.' + titnum3 + '、' + convertcode(mds[m].substr(3)) +
								'</h3>';
						} else if (mds[m].substr(0, 2) == '##') {
							titnum2++;
							titnum3 = 0;
							html += '<h2 class="md-h2">' + titnum2 + '、' + convertcode(mds[m].substr(2)) + '</h2>';
						} else if (mds[m].substr(1, 1) == 'c' || mds[m].substr(1, 1) == 'C')
							html += '<h1 class="md-h1" style="text-align:center;">' + convertcode(mds[m].substr(2)) +
							'</h1>';
						else if (mds[m].substr(1, 1) == 'r' || mds[m].substr(1, 1) == 'R')
							html += '<h1 class="md-h1" style="text-align:right;">' + convertcode(mds[m].substr(2)) +
							'</h1>';
						else
							html += '<h1 class="md-h1">' + convertcode(mds[m].substr(1)) + '</h1>';

					} else if (mds[m][0] == '@') { //c居中，r靠右
						if (mds[m][1] == 'c' || mds[m][1] == 'C')
							html += '<div class="md-content" style="text-align:center;">' + convertcode(mds[m].substr(2)) +
							'</div>';
						else if (mds[m][1] == 'r' || mds[m][1] == 'R')
							html += '<div class="md-content" style="text-align:right;margin-right:1em;">' + convertcode(
								mds[m].substr(2)) + '</div>';
						else
							html += '<div class="md-content">' + mds[m].substr(1) + '</div>';

					} else if (mds[m][0] == '!') { //图片、视频、音频
						var mis = mds[m].split('|');
						var url = mis[0];
						url = this.file_stor(url.substring(1));
						var ind = url.indexOf('?');
						var match;
						if (ind > -1) {
							match = url.substring(0, ind).match(/\.([^./]+)$/);
						} else
							match = url.match(/\.([^./]+)$/);
						var exurl = match ? match[1] : '';
						htmls.push({type:'text',content:html});
						html = '';
						if (exurl == 'mp4' || exurl == 'm3u8') {
							var alt = '';
							if (mis[1])
								alt = ' alt="' + mis[1].replace('"', "") + '"';
							htmls.push({type:'video',content:url});
						} else if (exurl == 'mp3') {
							var alt = '';
							if (mis[1])
								alt = ' alt="' + mis[1].replace('"', "") + '"';
							htmls.push({type:'audio',content:url});
						} else {
							var alt = '';
							if (mis[1])
								alt = ' alt="' + mis[1].replace('"', "") + '"';
							htmls.push({type:'image',content:url});
						}
					} else if (mds[m][0] == '<') { //原始HTML
						html += mds[m];
					} else {
						html += '<div class="md-content">' + convertcode(mds[m]) + '</div>';
					}
				}
				if(html)
					htmls.push({type:'text',content:html});
				return htmls;

				function convertcode(md) {
					var bcode = false;
					md = md.replace(/  /g, '　').replace(/ /g, '&nbsp;');
					while (true) {
						var ind = md.indexOf('`');
						if (ind == -1)
							break;
						var el = '<text class="md-code">';
						if (bcode) {
							bcode = false;
							el = '</text>';
						} else
							bcode = true;
						md = md.substr(0, ind) + el + md.substr(ind + 1);
					}
					while (true) {
						var ind = md.indexOf('**');
						if (ind == -1)
							break;
						var el = '<text style="font-weight:bold;">';
						if (bcode) {
							bcode = false;
							el = '</text>';
						} else
							bcode = true;
						md = md.substr(0, ind) + el + md.substr(ind + 2);
					}
					if (bcode)
						md += '</text>';
					return md;
				}
			}
		}
	}
</script>

<style scoped>
</style>