@{
    string table = Request.QueryString["table"];
}

<div class="main" id="main" v-cloak>
    <el-alert title="点击名称前的文件夹图标可展开子节点"
              type="info"
              show-icon>
    </el-alert>
    <div class="table-list-box">
        <template>
            <el-table class="tree_table" ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%" default-expand-all row-key="Id" :tree-props="{children:'Children',hasChildren: 'HasChildren'}" border>
                <el-table-column label="目标分类" min-width="200">
                    <template slot-scope="scope">
                        <el-radio v-model="targetId" :label="scope.row.Id" :disabled="(scope.row.IsFinal==1 && scope.row.Name!='顶级菜单') || parendIds.indexOf(scope.row.Id.toString())!=-1">
                            <span v-show="scope.row.IsFinal==1">
                                <i class="el-icon-empty"></i>
                            </span>
                            <span v-on:click="load(scope.row)" style="cursor:pointer;" v-show="scope.row.IsFinal==0">
                                <i v-bind:class="{'el-icon-arrow-right':scope.row.OpenChildren==false,'el-icon-arrow-down':scope.row.OpenChildren==true}"></i>
                            </span>
                            {{scope.row.Name}}
                        </el-radio>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <div class="footer-submit-bar">
            <el-button type="primary" v-on:click="submit({url:'@Url.ActionUrl("Transfer")?table=@table',data:{ids:parendIds,targetId:targetId},beforeExecute:'BeforeExecuting()',success:'TransferPostBack()'})">转移</el-button>
            <el-button onclick="closeSelf()">关闭</el-button>
        </div>
    </div>
</div>


<script type="text/javascript">
    var loadUrl = "@Url.ActionUrl("ListData")?table=@(table)&TableType=@(Request.QueryString["TableType"])";
    var selectedIds = "@Request.QueryString["selectedIds"]";
    var vue = new Vue({
        el: "#main",
        data: {
            parendIds: selectedIds.split(","),
            targetId:[],
            dataList:[],
        },
        methods: {
            loadData: function () {
                loadData();
            },
            load: function (itemRow) {
                var vue = this;
                var parentId = itemRow.Id;
                if (itemRow.OpenChildren ==false) {
                    itemRow.OpenChildren = true;
                    vue.ajax({
                        url: loadUrl,
                        data: { parentId: parentId },
                        success: function (data) {
                            if (Array.isArray(data)) {
                                vue.$set(itemRow, "Children", data); //必须采用vue的设置方式才能进行跟踪
                            }
                        }
                    });
                } else {
                    vue.$set(itemRow, "Children", []);
                    itemRow.OpenChildren = false;
                }

            },
        }
    });


    //加载数据
    function loadData() {
        vue.ajax({
            url: loadUrl,
            data: { parentId: 0 },
            success: function (data) {
                if (Array.isArray(data)) {
                    data.unshift({ IsFinal: 1, Name: "顶级菜单", Id: 0 });
                    vue.dataList = data;
                }
            }
        });
    }
    loadData();


    function BeforeExecuting() {
        var targetId = vue.targetId;
        if (targetId.length == 0) {
            vue.$message.error("请选择要转移的目标分类!");
            return false;
        }
        return true;
    }

    function TransferPostBack()
    {
        parent.loadData();
        closeSelf();
    }
</script>