<template>
    <div>
        <h1>test</h1>
        <table class="table table-bordered">
            <tbody>
            <template v-for="(group, i) in data.items">
                <template v-for="(zone, j) in group.items">
                    <template v-for="(item, k) in zone.items">

                        <tr>
                            <td :rowspan="groupSpan(group)" v-if="j == 0 && k == 0" >{{group.name}}</td>
                            <td :rowspan="zoneSpan(zone)" v-if="k == 0">{{zone.name}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.count}}</td>
                        </tr>

                    </template>
                </template>
            </template>
            </tbody>
        </table>
    </div>
</template>

<script>
    import sum from 'lodash/sumBy';

    export default {
        data() {
            return {
                data: {
                    "success": true,
                    "items": [
                         {
                             name: "1A",
                             items: [
                                 {
                                     name: "1A1",
                                     items: [
                                         {
                                             name: "asd",
                                             count: 10,
                                         },
                                         {
                                             name: "asd",
                                             count: 10,
                                         },
                                         {
                                             name: "asd",
                                             count: 10,
                                         }
                                         ,
                                         {
                                             name: "asd",
                                             count: 10,
                                         }
                                     ]
                                 },
                                 {
                                     name: "1A2",
                                     items: [
                                         {
                                             name: "asd",
                                             count: 10,
                                         },
                                         {
                                             name: "asd",
                                             count: 10,
                                         }
                                     ]
                                 }
                             ]

                        },
                        {
                            name: "1B",
                            items: [
                                {
                                    name: "1A1",
                                    items: [
                                        {
                                            name: "asd",
                                            count: 10,
                                        },
                                        {
                                            name: "asd",
                                            count: 10,
                                        },
                                        {
                                            name: "asd",
                                            count: 10,
                                        }
                                        ,
                                        {
                                            name: "asd",
                                            count: 10,
                                        }
                                    ]
                                },
                                {
                                    name: "1A2",
                                    items: [
                                        {
                                            name: "asd",
                                            count: 10,
                                        },
                                        {
                                            name: "asd",
                                            count: 10,
                                        }
                                    ]
                                }
                            ]

                        }
                    ]
                }
            }
        },
        methods: {
            groupSpan(group){
                return sum(group.items, function(zone){
                    return zone.items.length;
                });
            },
            zoneSpan(zone){
                return zone.items.length;
            }
        }
    }
</script>