<style type="text/css">
    #rpPage {
        border: 1px solid #000;
        padding: 3px;
    }
</style>

<div id="reportMain" class="row">
    <div id="accd" class="col-2">
        <div class="card" v-for="g in reportList.s" v-if="g.t==1">
            <div class="card-header">
                <a class="card-link" data-toggle="collapse" :href="'#id'+g.n">{{g.n}}</a>
            </div>
            <div :id="'id'+g.n" class="collapse" data-parent="#accd">
                <div class="card-body">
                    <ul class="list-group" v-for="f in g.s">
                        <li class="list-group-item list-group-item-action" v-if="f.t==2">
                            <a href="#" v-on:click="cli(g.n,f.p,f.n)">{{f.n}}</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="col" v-show="showPage">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">{{bread.p}}</li>
            <li class="breadcrumb-item">{{bread.n}}</li>
        </ol>
        <div id="rpPage"></div>
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#reportMain",
        data: {
            reportList: [],
            url: myjs.urls.reportList,
            fileContentUrl: myjs.urls.fileContentUrl,
            showReportList: true,
            showPage: false,
            bread: {
                p: "",
                n: "",
            },
        },
        created() {
            $.get(this.url, function (d) {
                vm.reportList = d;
                //var initReport = $.cookie("_initReport");
                //if (vm.reportList.indexOf(initReport) >= 0) {
                //    vm.cli(initReport);
                //    vm.showReportList = false;
                //}
            });
        },
        methods: {
            cli(g, p, n) {
                var m = p + "\\" + n;
                this.bread.p = g;
                this.bread.n = n;
                $.get(this.fileContentUrl, { fileName: m }, function (h) {
                    vm.showPage = true;
                    $("#rpPage").html(h);
                });
            },
        }
    });
</script>