<template>
    <v-flex xs12>
        <v-layout row wrap>
            <v-flex xs12>
                <v-card>
                    <v-treeview
                            transition
                            activatable
                            item-key="id"
                            item-text="nazov"
                            :items="zoznamSekcii"
                            :active.sync="zvolenaSekciaId"
                            class="clickable"
                    ></v-treeview>
                </v-card>
            </v-flex>
        </v-layout>
        <v-layout row wrap>
            <v-flex xs12>
                <v-card flat>
                    <v-card-text class="sekcia" v-html="sekcia.obsah"></v-card-text>
                </v-card>
            </v-flex>
        </v-layout>
    </v-flex>
</template>

<script>
  import { mapActions, mapState } from 'vuex'

  export default {
    name: 'UcebnyMaterialPageView',
    components: {},
    props: {},
    data() {
      return {
        zvolenaSekciaId: [],
      }
    },
    computed: {
      ...mapState('kniznica', [
        'ucebneMaterialy',
        'sekcie',
      ]),
      ucebnyMaterial () {
        return this.ucebneMaterialy.ucebnyMaterial
      },
      sekcia () {
        return this.sekcie.sekcia
      },
      zoznamSekcii () {
        return this.sekcie.sekcie
      },
      loading: function () {
        return this.ucebneMaterialy.pending.ucebnyMaterial || this.ucebneMaterialy.pending.ucebneMaterialy
      }
    },
    methods: {
      ...mapActions('kniznica/ucebneMaterialy', [
        'ziskajUcebnyMaterial',
      ]),
      ...mapActions('kniznica/sekcie', [
        'ziskajSekciu',
        'ziskajZoznamSekciiUcebnehoMaterialu',
      ]),
      ziskajPolozkuUcebnehoMaterialu (filter = {}) {
        let self = this
        let id = self.$route.params.ucebnica_id

        const params = {
          id: id,
        }

        this.ziskajUcebnyMaterial({
          params: params
        }).then((response) => {
          self.ziskajZoznamSekciiPolozkyUcebnehoMaterialu(id)
        }).catch((error) => {

        })
      },
      ziskajZoznamSekciiPolozkyUcebnehoMaterialu (id) {
        let self = this

        const params = {
          id: id,
          fields: {
            sekcie: 'id,nazov',
          },
        }

        this.ziskajZoznamSekciiUcebnehoMaterialu({
          params: params
        }).then((response) => {
          // self.totalItems = response.data.meta.total
          // self.perPageItems = response.data.meta.per_page
        }).catch((error) => {

        })
      },
      ziskajSekciuPolozkyUcebnehoMaterialu (id) {
        let self = this

        const params = {
          id: id,
          fields: 'nazov,obsah'
        }

        this.ziskajSekciu({
          params: params
        }).then((response) => {
          // self.totalItems = response.data.meta.total
          // self.perPageItems = response.data.meta.per_page
        }).catch((error) => {

        })
      }
    },
    mounted () {
      this.ziskajPolozkuUcebnehoMaterialu()
    },
    watch: {
      zvolenaSekciaId: 'ziskajSekciuPolozkyUcebnehoMaterialu'
    },
  }
</script>

<style lang="scss" scoped>
    .clickable {
        cursor: pointer;
    }

    .sekcia {
        font-style: oblique;
        font-size: large;
        font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;

        .table-bordered {
            border: 1px solid black;
        }
    }
</style>
