<template>
  <div
    id="page-content-wrapper"
    class="main"
  >
    <fetch-wiki-main-page>
      <template slot-scope="{response, loading}">
        <slot
          :response="response"
          :loading="loading"
        >
          <div v-if="loading || response === null">
            <base-spinner />
          </div>
          <div v-else>
            <!--            <h1>{{response.title}}</h1>-->
            <vue-markdown>
              {{ response.content.replaceAll('](/', `](${url}`) }}
            </vue-markdown>
          </div>
        </slot>
      </template>
    </fetch-wiki-main-page>
  </div>
</template>

<script>
import FetchWikiMainPage from '@/components/DDCODE/fetchWikiMainPage';
import VueMarkdown from 'vue-markdown'
import BaseSpinner from './UI/BaseSpinner.vue';
const _ = require('lodash')

export default {
  name: 'EncycloPage',
  components: {
    FetchWikiMainPage, VueMarkdown,
    BaseSpinner
  },
  props: {
    msg: String
  },
  data() {
    return {
      url: document.location.protocol + '//wiki.ddcode.org/',
      isDev: process.env.NODE_ENV === 'development'
    }
  },
  computed: {
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
@import url('~@/assets/bootstrap.css');

.main {
  margin: 1.5rem;
}

h3 {
  margin: 40px 0 0;
}

a {
  color: #42b983;
}

ul.a {
  list-style-type: disc;
  list-style-position: inside;
}

input[type="radio"] {
  margin: 2px;
}

.radio-label {
  margin-left: 0px;
  margin-right: 5px;
}
</style>