<style>
    .table td {
        padding: 15px 10px !important;
    }
    .select-template{cursor:pointer;display:block;line-height:30px;}
</style>
<div class="main" id="main" v-cloak>
    <el-alert title="模板只能选择.cshtml后缀的文件，点击文件夹图标可进入下级目录" show-icon></el-alert>
    <table border=0 cellpadding=0 cellspacing=0 class="table table-bordered" style="margin-bottom:5px">
        <tr>
            <td>
                <span class="el-icon-folder-opened"> </span>
                <span v-for="(item,index) in fullPath">
                    <a href="javascript:void(0)" v-on:click="openPath(index)" class="text-primary"> {{item}} </a><span v-show="index>0">/</span>
                </span>
            </td>
        </tr>
    </table>
    <table border=0 cellpadding=0 cellspacing=0 class="table table-bordered" id="tb_list">
        <thead>
            <tr>
                <td align="left"> 名称</td>
            </tr>
        </thead>
        <tr class="item list-template-item" v-for="(dataItem,index) in dataList">
            <td align=left>
                <span  style="cursor:pointer" v-show="dataItem.Type==0" v-on:click="openFolder(dataItem.Name)"><i class="el-icon-folder-opened"></i> <span style="color:#666">{{dataItem.Name}}</span></span>
                <div v-on:click="setTemplate(dataItem.Name)" class="select-template" v-show="dataItem.Type==1"><i class="el-icon-document"></i> <span>{{dataItem.Name}}</span></div>
            </td>
        </tr>
    </table>
    <div class="footer-submit-bar" style="padding-left:20px">
         <el-button type="button" onclick="closeSelf()">关闭</el-button>
    </div>
</div>
<script type="text/javascript">
    var setData = "@Request.QueryString["setData"]";
    //注册列表常用方法
    var rootPath = "@ViewBag.RootPath";
    if (rootPath == "/")
    {
        rootPath = "[根目录]/";
    }
    var loadUrl = "@Url.ActionUrl("ListData")";
    //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            dataList: [],
            path: ["Views"],
        },
        methods: {
            openFolder: function (name)
            {
                this.path.push(name);
            },
            openPath: function (index) {
                this.path.splice(index, this.path.length - index);
            },
            setTemplate: function (name) {
                var templateName = name.toLowerCase();
                if (templateName.indexOf(".cshtml") < 0 || templateName.indexOf("_") == 0) {
                    this.$message({
                        message: '对不起，只能选择模板文件！',
                        type: 'warning'
                    });

                    return;
                }
                var path = rootPath + vue.path.join("/") + "/" + templateName
                path = path.replace(/\/Templates\/.+\/Views\//gi, "");
                eval(setData + "=path");
                closeSelf();
            }

        },
        computed: {
            fullPath: function () {
                var fullPath = JSON.parse(JSON.stringify(this.path)); //避免直接引用，会同时触发path的改变
                fullPath.unshift(rootPath);
                return fullPath;
            }
        },
        watch: {
            path: {
                handler:function(newName, oldName) {
                    loadData();
                },
                immediate: false
            }
        }
    });
    //加载数据
    function loadData()
    {
        var currentPath = vue.path.join("/");
        ajax({
            url: loadUrl,
            data: { path: currentPath },
            success: function (data) {
            if (Array.isArray(data)) {
                vue.dataList = data;
            }
            }
        });
    }
    loadData();
</script>





