<template>
  <v-layout>
    <v-flex xs12 v-for="(group, idx) in reports" v-bind:key="group">
      <v-card>

        <v-card-title primary-title>
          <div>
            <h3 class="headline mb-0">{{ group.group }}</h3>
            <!-- <div> {{ card_text }} </div> -->
          </div>
        </v-card-title>

        <v-card-text>
            <v-list two-line>
                <template v-for="(report, index) in group.child">
                    <v-layout row :key="report.code" wrap>
                        <v-flex xs2>
                            <v-list-tile
                    avatar
                    ripple
                     @click="toggle(index)"
                    >
                    <v-list-tile-content>
                        <v-list-tile-title>{{ report.code }}</v-list-tile-title>
                        <v-list-tile-sub-title class="text--primary">{{ report.label }}</v-list-tile-sub-title>
                        <!-- <v-list-tile-sub-title>{{ item.subtitle }}</v-list-tile-sub-title> -->
                    </v-list-tile-content>

                    <v-list-tile-action>
                        
                        
                    </v-list-tile-action>

                    </v-list-tile>
                    <v-divider
                    v-if="index + 1 < group.child.length"
                    :key="index"
                    ></v-divider>
                        </v-flex>
                    </v-layout>
                    
                </template>
            </v-list>
        </v-card-text>

        
      </v-card>
    </v-flex>

    

  </v-layout>
</template>
<script>
module.exports = {
   components: {
      
   },
   computed: {
      reports () {
          return this.$store.state.reports.reports
      }
   },
   methods: {
      toggle (index) {
        const i = this.selected.indexOf(index)

        if (i > -1) {
          this.selected.splice(i, 1)
        } else {
          this.selected.push(index)
        }
      }
   },
   watch : {
      
   },
   mounted: function() {
      
   },
   data() {
      return {
         card_text: 'Lorem ipsum dolor sit amet, brute iriure accusata ne mea. Eos suavitate referrentur ad, te duo agam libris qualisque, utroque quaestio accommodare no qui. Et percipit laboramus usu, no invidunt verterem nominati mel. Dolorem ancillae an mei, ut putant invenire splendide mel, ea nec propriae adipisci. Ignota salutandi accusamus in sed, et per malis fuisset, qui id ludus appareat.',
         selected: [2],
        items: [
          {
            action: '15 min',
            headline: 'Brunch this weekend?',
            title: 'Ali Connors',
            subtitle: "I'll be in your neighborhood doing errands this weekend. Do you want to hang out?"
          },
          {
            action: '2 hr',
            headline: 'Summer BBQ',
            title: 'me, Scrott, Jennifer',
            subtitle: "Wish I could come, but I'm out of town this weekend."
          },
          {
            action: '6 hr',
            headline: 'Oui oui',
            title: 'Sandra Adams',
            subtitle: 'Do you have Paris recommendations? Have you ever been?'
          },
          {
            action: '12 hr',
            headline: 'Birthday gift',
            title: 'Trevor Hansen',
            subtitle: 'Have any ideas about what we should get Heidi for her birthday?'
          },
          {
            action: '18hr',
            headline: 'Recipe to try',
            title: 'Britta Holt',
            subtitle: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.'
          }
        ]
      }
   }
}
</script>
