<template>
    <div :hidden="!content">
        <b-container fluid>
            <b-row>
                <b-col>
                    <Viewer :content="content" />
                </b-col>
            </b-row>
            <b-row>
                <b-col cols="10">
                    <label for="tagList" >Tags</label>
                </b-col>
            </b-row>
            <b-row>
                <b-col cols="10">
                    <TagList id="tagList" :tags="tags" :readOnly="true" />
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>
  import Viewer from "./Viewer";
  import TagList from "./TagList";
  export default {
    name: "MainView",
    props: {
      slug: String
    },
    created() {
      if (this.$props.slug) {
        this.getFile(this.$props.slug)
      }
    },
    data: function () {
      return {
        file: ''
      }
    },
    computed: {
      tags: function() {
        if (this.$store.state.file) {
          return this.$store.state.file.Tags
        }
        return []
      },
      content: function () {
        if (this.$store.state.file) {
          return this.$store.state.file.Content
        }
        return null
      }
    },
    watch: {
      slug: function (newValue) {
        this.getFile(newValue)
      }
    },
    methods: {
      getFile: function(slug) {
        this.$store.dispatch('getFile', slug)
      }
    },
    components: {TagList, Viewer}
  }
</script>

<style scoped>

</style>
