<template>
    <v-dialog v-model="show" max-width="500px">
        <v-card>
            <v-card-title class="headline">
                Download Laporan
            </v-card-title>

            <v-card-text>
                <v-layout row wrap>
                    <v-flex xs12>
                        <v-list>
                            <v-list-tile v-for="report in reports" :key="report.id" @click="handleDownload(report)">
                                <v-list-tile-content>
                                    <v-list-tile-title>{{ report.name }}</v-list-tile-title>
                                    <v-list-tile-sub-title v-if="report.description">{{ report.description
                                        }}</v-list-tile-sub-title>
                                </v-list-tile-content>
                                <v-list-tile-action>
                                    <v-icon>file_download</v-icon>
                                </v-list-tile-action>
                            </v-list-tile>
                        </v-list>
                    </v-flex>
                </v-layout>
            </v-card-text>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary" flat @click="show = false">
                    Tutup
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
module.exports = {
    name: 'DownloadDialog',

    props: {
        value: {
            type: Boolean,
            default: false
        },
        reports: {
            type: Array,
            default: function () { return [] }
        }
    },

    computed: {
        show: {
            get: function () {
                return this.value
            },
            set: function (value) {
                this.$emit('input', value)
            }
        }
    },

    methods: {
        handleDownload: function (report) {
            this.$emit('download', report)
        }
    }
}
</script>