<template>
  <div class="form-horizontal" style="margin-top:1rem;flex: 1;">
    <div class="row">
      <div class="col-sm-12">
        <textarea class="ver-textarea input_search full-with" style="width: 100%;height: 38rem !important;resize: none"
                  :readonly="look" v-if="!look" :disabled="look" v-model="text"></textarea>
      </div>
      <div class="col-sm-12 markdown-body" id="markdown-body-content">
      </div>
    </div>
  </div>
</template>

<script>
import marked from 'marked'

let Theme = {
  h1: {
    'font-size': '1.2em',
    'text-align': 'center',
    'font-weight': 'bold',
    'display': 'table',
    'margin': '2em auto 1em auto',
    'padding': '0 1em',
    'border-bottom': '2px solid rgb(90,192,317)'
  },
  h2: {
    'font-size': '1.2em',
    'text-align': 'center',
    'font-weight': 'bold',
    'display': 'table',
    'margin': '4em auto 2em auto',
    'padding': '0 1em',
    'border-bottom': '2px solid rgb(90,192,317)'
  },
  h3: {
    'font-weight': 'bold',
    'font-size': '1.1em',
    'margin': '2em 8px 0.75em 0',
    'padding-bottom': '.1em',
    // 'border-bottom': '1px solid #eaecef',
    'padding-left': '8px',
    'border-left': '4px solid rgb(90,192,317)'
  },
  h4: {
    'font-weight': 'bold',
    'font-size': '1em',
    'margin': '2em 8px 0.5em 8px',
  },
  p: {
    'margin': '1.5em 8px',
    'letter-spacing': '0.1em',
    'text-index':'1em'
  },
  blockquote: {
    'font-style': 'normal',
    'border-left': 'none',
    'padding': '1em',
    'border-radius': '4px',
    'color': '#FEEEED',
    'background': 'rgba(27,31,35,.05)',
    'margin': '2em 8px'
  },
  figure: {
    'margin': '1.5em 8px',
  },
  image: {
    'border-radius': '4px',
    'display': 'block',
    'margin': '0.5em auto',
    'width': 'auto',
    'height': 'auto',
    'max-width': '100%',
    'max-height': '100%'
  },
  ol: {
    'margin-left': '0',
    'padding-left': '1em'
  },
  ul: {
    'margin-left': '0',
    'padding-left': '1em'
  },
  listitem: {
    // 'text-indent': '-1em',
    // 'display': 'inline-block',
    'margin': '0.5em 8px'
  },
  codespan: {
    'font-size': '90%',
    'color': '#d14',
    'background': 'rgba(27,31,35,.05)',
    'padding': '3px 5px',
    'border-radius': '4px',
  },
  link: {
    'color': '#009926',
    'cursor': 'pointer',
    'text-decoration': 'underline'
  },
  strong: {
    'color': '#ff5f2e',
    'font-weight': 'bold',
  },
  table: {
    'border-collapse': 'collapse',
    'text-align': 'center',
    'margin': '1em auto'
  },
  thead: {
    'background': 'rgba(0, 0, 0, 0.05)'
  },
  td: {
    'border': '1px solid #dfdfdf',
    'padding': '0.25em 0.5em'
  }
}

let rendererMD = function () {
  let rendererMD = new marked.Renderer();
  rendererMD.heading = function (text, level) {
    return '<h' + level + getStyles('h' + level) + '>' + text + '</h' + level + '>';
  }
  rendererMD.paragraph = function (text) {
    return '<p' + getStyles('p') + '>' + text + '</p>\n';
  }
  rendererMD.blockquote = function (quote) {
    return '<blockquote' + getStyles('blockquote') + '>\n' + quote + '</blockquote>\n';
  }
  rendererMD.list = function (body, ordered, start) {
    const type = ordered ? 'ol' : 'ul',
      startatt = (ordered && start !== 1) ? (' start="' + start + '"') : '';
    return '<' + type + getStyles(type) + startatt + '>\n' + body + '</' + type + '>\n';
  }
  rendererMD.listitem = function (text) {
    return '<li' + getStyles('listitem') + '>' + text + '</li>\n';
  }
  rendererMD.codespan = function (text) {
    return '<code ' + getStyles('codespan') + '>' + text + '</code>';
  }
  rendererMD.strong = function strong(text) {
    return '<strong ' + getStyles('strong') + ' >' + text + '</strong>';
  }
  rendererMD.table = function (header, body) {
    if (body) body = '<tbody>' + body + '</tbody>';
    return '<table ' + getStyles('table') +
      ' >\n'
      + '<thead ' + getStyles('thead') + '>\n'
      + header
      + '</thead>\n'
      + body
      + '</table>\n';
  }
  rendererMD.tablecell = function (content, flags) {
    const type = flags.header ? 'th' : 'td';
    const tag = flags.align
      ? '<' + type + getStyles('td') + ' align="' + flags.align + '">'
      : '<' + type + getStyles('td') + '>';
    return tag + content + '</' + type + '>\n';
  }
  rendererMD.image = function (href, title, text) {
    if (href === null) {
      return text;
    }
    return '<a href="' + href + '" target="_blank" style="width:100%;height: 100%;display: inline-block">' + '<img ' + getStyles('image') +
      ' src="' + href + '" alt="' + text + '"' + '/></a>';
  }
  rendererMD.link = function (href, title, text) {
    if (href === null) {
      return text;
    }
    let out = '<a href="'+ href +'"'+getStyles('link')+'target="_blank"';
    if (title) {
      out += ' title="' + title + '"';
    }
    out += '>' + text + '</a>';
    return out;
  }
  return rendererMD
}

let getStyles = function (tokenName, addition) {
  let arr = [];
  let dict = Theme[tokenName]
  if (!dict) return '';
  for (const key in dict) {
    arr.push(key + ':' + dict[key])
  }
  return ` style="${arr.join(';') + (addition || '')}" `
}

export default {
  title: '功能',
  props: ['text', 'look', 'add_theme'],
  data() {
    return {}
  },
  watch: {
    'text'(val) {
      document.getElementById('markdown-body-content').innerHTML =
        marked(val, {renderer: rendererMD()})
    }
  },
  ready() {
    Theme = Object.assign(Theme, this.add_theme)
    document.getElementById('markdown-body-content').innerHTML =
      marked(this.text, {renderer: rendererMD()})
  },
  methods: {},
  events: {

  },
}
</script>

<style scoped>
.full-with {
  width: 100%;
}

#markdown-body-content {
  text-align: left;
  color: #3f3f3f;
  line-height: 1.75rem;
  margin: 1em 8px
}
</style>
