<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="heightFix" 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;" :style="{padding:padding}"></view>
	</template>
</template>

<script>
	export default {
		props: {
			md: {
				type: String,
				default: ''
			},
			padding: {
				type: String,
				default: '0 0.5em'
			}
		},
		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.substring(0, 4) == '[MD]')
					markdown = markdown.substring(4).trim();
				var mds = markdown.split('\n');
				var htmls = [];
				var html = '';
				var isol = false;
				var titnum = [0, 0, 0, 0, 0];
				for (var m in mds) {
					if (mds[m].length == 0) {
						continue;
					}
					if (mds[m].length > 0 && mds[m].trim() == '') {
						if (isol) {
							isol = false;
							html += '</ol>';
						}
						html += '<br/>';
						continue;
					}
					if (mds[m][0] == '#') { //标题1/2/3
						if (isol) {
							isol = false;
							html += '</ol>';
						}
						var cr = mds[m].substring(1, 2).toLowerCase();
						if (mds[m].substring(0, 5) == '#####') {
							oladd(4, titnum);
							if (mds[m].substring(5, 6) == '.')
								html += '<h5 class="md-h5">' + olnum(4, titnum, '、') + convertcode(mds[m].substring(6)) + '</h5>';
							else if (mds[m].substring(5, 6) == ':')
								html += '<div class="md-content">' + olnum(4, titnum, ' ') + convertcode(mds[m].substring(6)) + '</div>';
							else
								html += '<h5 class="md-h5">' + convertcode(mds[m].substring(5)) + '</h5>';
						} else if (mds[m].substring(0, 4) == '####') {
							oladd(3, titnum);
							if (mds[m].substring(4, 5) == '.')
								html += '<h4 class="md-h4">' + olnum(3, titnum, '、') + convertcode(mds[m].substring(5)) + '</h4>';
							else if (mds[m].substring(4, 5) == ':')
								html += '<div class="md-content">' + olnum(3, titnum, ' ') + convertcode(mds[m].substring(5)) + '</div>';
							else
								html += '<h4 class="md-h4">' + convertcode(mds[m].substring(4)) + '</h4>';
						} else if (mds[m].substring(0, 3) == '###') {
							oladd(2, titnum);
							if (mds[m].substring(3, 4) == '.')
								html += '<h3 class="md-h3">' + olnum(2, titnum, '、') + convertcode(mds[m].substring(4)) + '</h3>';
							else if (mds[m].substring(3, 4) == ':')
								html += '<div class="md-content">' + olnum(2, titnum, ' ') + convertcode(mds[m].substring(4)) + '</div>';
							else
								html += '<h3 class="md-h3">' + convertcode(mds[m].substring(3)) + '</h3>';
						} else if (mds[m].substring(0, 2) == '##') {
							oladd(1, titnum);
							if (mds[m].substring(2, 3) == '.')
								html += '<h2 class="md-h2">' + olnum(1, titnum, '、') + convertcode(mds[m].substring(3)) + '</h2>';
							else if (mds[m].substring(2, 3) == ':')
								html += '<div class="md-content">' + olnum(1, titnum, ' ') + convertcode(mds[m].substring(3)) + '</div>';
							else
								html += '<h2 class="md-h2">' + convertcode(mds[m].substring(2)) + '</h2>';
						} else {
							oladd(0, titnum);
							if (cr == 'c')
								html += '<h1 class="md-h1" style="text-align:center;">' + convertcode(mds[m].substring(2)) +
								'</h1>';
							else if (cr == 'r')
								html += '<h1 class="md-h1" style="text-align:right;">' + convertcode(mds[m].substring(2)) +
								'</h1>';
							else if (cr == '.')
								html += '<h1 class="md-h1">' + olnum(0, titnum, '、') + convertcode(mds[m].substring(2)) + '</h1>';
							else if (cr == ':')
								html += '<div class="md-content">' + olnum(0, titnum, ' ') + convertcode(mds[m].substring(2)) + '</div>';
							else
								html += '<h1 class="md-h1">' + convertcode(mds[m].substring(1)) + '</h1>';
						}
					} else if (mds[m][0] == '@') { //c居中，r靠右
						var cr = mds[m].substring(1, 2).toLowerCase();
						if (cr == 'c')
							html += '<div class="md-content" style="text-align:center;">' + convertcode(mds[m].substring(2)) + '</div>';
						else if (cr == 'r')
							html += '<div class="md-content" style="text-align:right;margin-right:1em;">' + convertcode(mds[m].substring(2)) + '</div>';
						else if (mds[m][1] == '.') {
							if (!isol) {
								isol = true;
								html += '<ol>';
							}
							html += '<li style="line-height: 1.5em;padding: 0.5em 0;">' + convertcode(mds[m].substring(2)) + '</li>';
						} else
							html += '<div class="md-content">' + mds[m].substring(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 {
						if (isol) {
							isol = false;
							html += '</ol>';
						}
						html += '<div class="md-content">' + convertcode(mds[m]) + '</div>';
					}
				}
				if (html) {
					if (isol) {
						isol = false;
						html += '</ol>';
					}
					htmls.push({
						type: 'text',
						content: html
					});
				}
				return htmls;

				function oladd(idx, olnum) {
					olnum[idx]++;
					for (var i = idx + 1; i < olnum.length; i++)
						olnum[i] = 0;
				}

				function olnum(idx, olnum, end) {
					for (var i = 0; i <= idx; i++) {
						if (olnum[i] == 0)
							continue;
						var ols = [];
						for (var j = i; j <= idx; j++) {
							ols.push(olnum[j]);
						}
						return ols.join('.') + end;
					}
				}

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

<style scoped>
</style>