@{
    CurrentUser user = ViewBag.CurrentUser;
}
<div class="main" id="main" v-cloak>
    <table border=0 cellpadding=0 cellspacing=0 class="tb-head form-inline form-group-sm">
        <tr>
            <td>
                <div class="controls form-inline">
                    <span>选择站点：</span>
                    <select name="siteId" id="siteId" style="width:auto;display:inline" class="form-control" onchange="loadData(this.options[this.options.selectedIndex].value)">
                        <option value="0">---选择站点---</option>
                        @foreach (var item in Html.GetSiteListByUser(user))
                        {
                        <option value="@item.Id">@item.Remark</option>
                        }
                    </select>
                </div>
            </td>
        </tr>
    </table>
    <table border=0 cellpadding=0 cellspacing=0 class="table table-bordered form-inline form-group-sm" id="tb_list">
        <thead>
            <tr>
                <td>选择栏目</td>
            </tr>
        </thead>
        <tbody is="table-list" v-for="(dataItem,dataIndex) in dataList" :parent-id="0" :data-source="dataList" :data-item="dataItem" :data-index="dataIndex" :key="dataItem.Id" :column-count="2" :level="1" :children-show-ids="[]" :children-load-url="childrenLoadUrl" :show-node-type="0"></tbody>
    </table>

    <div class="submit-footerbar">
        <label class="control-label"></label>
        <div class="controls">
            <button type="button" class="btn btn-primary  btn-sm">确定</button>
            <button type="button" class="btn btn-default ui-closeDialog btn-sm">关闭</button>
        </div>
    </div>

</div>


<script id="treeTemplate" type="text/x-template">
    <tbody v-if="dataItem.ParentId==parentId && !dataItem.IsDeleted" class="tree-table-tbody">
        <tr class="item list-template-item">
            <td align="center" style="text-align:left">
                &nbsp;
                <span :style="{'margin-left':(level-1)*20+'px'}"></span>
                <span v-show="dataItem.IsFinal==1"><input type="checkbox" name="ck" id="ck" :value="dataItem.Id" class="checked-item" :disabled="dataItem.TableId==0"></span>
                <span class="node fa fa-file-text-o" v-show="dataItem.IsFinal==1"></span>
                <span class="node fa" v-bind:class="{'fa-folder':dataItem.IsFinal==0,'fa-folder-open':dataItem.ChildrenShow}" v-show="dataItem.IsFinal==0" v-on:click="showChildrenNode()"></span>
                <span>{{dataItem.Name}}</span>
            </td>
        </tr>
        <tr class="tree-table-children-node" v-show="dataItem.ChildrenShow">
            <td v-bind:colspan="columnCount">
                <table>
                    <table-list v-for="(childDataItem,childDataIndex) in dataItem.Children" v-bind:data-source="dataItem.Children" v-bind:data-item="childDataItem" :data-index="childDataIndex" v-bind:parent-id="dataItem.Id" :key="childDataItem.Id" :column-count="columnCount" :level="level+1" :children-show-ids="[]" :children-load-url="childrenLoadUrl" :show-node-type="showNodeType"></table-list>
                </table>
            </td>
        </tr>
    </tbody>
</script>


<script type="text/javascript">
    //注册树组件
    regDataListComponent("#treeTemplate");
    var loadUrl = "@Url.ActionUrl("ListData","Column")";
    var vue = new Vue({
        el: "#main",
        data: {
            dataList: [],
            childrenLoadUrl: loadUrl
        }
    });

    //加载数据
    function loadData(site) {
        vur.ajax({
            url: loadUrl,
            data: { parentId: 0, siteId: site},
            success: function (data) {
                if (Array.isArray(data)) {
                    vue.dataList = data;
                }
            }
        });
    }
    loadData(0);
</script>