@{ 
    int currentSiteId = (int)ViewBag.CurrentSiteId;
}
<div class="main" id="main" v-cloak>
    <el-form ref="form" label-width="150px" label-position="left">
        <el-form-item label="分类名称" v-show="!isEdit">
            <el-select style="width:450px;" v-model="formData.FileName" clearable placeholder="选择分类" v-validate="{data:formData.FileName,dataType:'*',nullMsg:'请选择路由分类!'}">
                <el-option v-for="item in customRouteCategories" :key="item.Name" :label="item.Remark" :value="item.Name"></el-option>
            </el-select>
            <span class="help-block validate-tips-box">如果没有分类，请先添加路由分类后再添加路由！</span>
        </el-form-item>
        <el-form-item label="备注" style="max-width:1024px">
            <el-input v-model.trim="formData.Remark" v-validate="{data:formData.Remark,dataType:'*',nullMsg:'请填写备注!'}"></el-input>
            <span class="help-block validate-tips-box">仅用于标识</span>
        </el-form-item>
        <el-form-item label="Url规则" style="max-width:1024px">
            <el-input v-model.trim="formData.UrlConstraint" v-validate="{data:formData.UrlConstraint,dataType:'*',nullMsg:'请填写Url规则!'}"></el-input>
            <span class="help-block validate-tips-box">填写正则匹配路径，支持命名分组，如：^news/id-(?&lt;id&gt;[1-9]\d{0,8})/$，模板中通过Html.CustomViewParameter("id")获取分组数值</span>
        </el-form-item>

        <el-form-item label="模板文件" style="max-width:1024px">
            <el-input type="text" readonly placeholder="视图模板" v-model.trim="formData.ViewPath" v-validate="{data:formData.ViewPath,dataType:'*',nullMsg:'请选择模板文件'}">
                <template slot="append">
                    <el-button type="button" v-on:click="dialog({title:'选择模板文件',url:'@Url.ActionUrl("Select","TemplateManager")?setData=parent.vue.formData.ViewPath',width:'600px',height:'90%',target:'self'})">选择</el-button>
                    <el-button type="button" v-show="formData.ViewPath!=''" style="border-left:1px solid #DCDFE6;" v-on:click="dialog({title:'编辑',url:'@Url.ActionUrl("Edit","TemplateManager")'+TemplateParameter(),width:'95%',height:'95%',target:'self'})">编辑</el-button>
                </template>
            </el-input>
            <span class="help-block validate-tips-box">视图模板只能选择.cshtml后缀的文件</span>
        </el-form-item>

        <el-form-item label="缓存方案" style="max-width:1024px">
            <el-input-convert placeholder="选择缓存方案" :clearable="true" v-model="formData.HttpcacheSolutionId" :convert-url="'@Url.ActionUrl("getName","HttpCacheSolution")?id='+formData.HttpcacheSolutionId">
                <el-button type="button" v-on:click="dialog({title:'选择http缓存方案',url:'@Url.ActionUrl("Select","HttpCacheSolution")?setData=parent.vue.formData.HttpcacheSolutionId',width:'660px',height:'95%',target:'_self'})">选择</el-button>
            </el-input-convert>
            <span class="help-block" id="_ValidateTips_HttpcacheSolutionId">http缓存方案请到系统>系统配置>http缓存方案中设置</span>
        </el-form-item>

        <el-form-item label="seo标题" style="width:80%" v-show="false">
            <el-input v-model.trim="formData.Title" maxlength="150"></el-input>
            <span class="help-block validate-tips-box"></span>
        </el-form-item>
        <el-form-item label="seo关键词" style="width:80%" v-show="false">
            <el-input v-model.trim="formData.Keywords"></el-input>
            <span class="help-block validate-tips-box"></span>
        </el-form-item>
        <el-form-item label="seo描述" style="width:80%" v-show="false">
            <el-input type="textarea" v-model.trim="formData.Description" :autosize="{ minRows:3, maxRows:6}"></el-input>
            <span class="help-block validate-tips-box"></span>
        </el-form-item>
    </el-form>

    <div class="footer-submit-bar" style="padding-left:170px">
        <el-button type="primary" v-on:click="postSubmit">提交保存</el-button>
        <el-button v-on:click="closeDrawer">关闭</el-button>
    </div>
</div>
<script type="text/javascript">
    //绑定数据
    var isEdit = false;
    var formData = { Remark:"",HttpType:"",ViewPath: "",RedirectUrl:"",UrlConstraint: "", Title: "", Keywords: "", Description: "", HttpcacheSolutionId: 0, SiteTemplateDirectory: "/Templates/@(ViewBag.CurrentTemplateDirectory)", FileName: "" };
    if (request("formData")!="")
    {
        formData = JSON.parse(JSON.stringify(eval(request("formData"))));
        isEdit = true;
    }
    var vue = new Vue({
        el: "#main",
        data: {
            formData: formData,
            customRouteCategories: [],
            isEdit: isEdit,
        },
        created: function () {
            this.loadData()
        },
        methods: {
            postSubmit: function () {
                var validated = this.validateForm({ tipsStyle: 1 });//jquery表单验证
                if (validated) {
                    this.submit({ url: "@Url.ActionUrl()", data: formData, success: "PostBack()" });
                }
            },
            TemplateParameter: function () {
                var _this = this;
                var name = "";
                var path = "";
                var template = _this.formData.ViewPath;
                if (template != "") {
                    var templateSetS = template.split("/");
                    name = templateSetS[templateSetS.length - 1];
                    path = template.substring(0, template.length - name.length);
                }
                var url = "?name=" + encodeURIComponent(name) + "&path=" + encodeURIComponent("Views/" + path)+"&blockSet=1";
                return url;
            },
            loadData: function () {
                this.ajax({
                    url: "@Url.ActionUrl("ListData", "CustomRouteCategory")",
                    data: { path: formData.SiteTemplateDirectory },
                    success: function (data) {
                        if (Array.isArray(data)) {
                            vue.customRouteCategories = data;
                        }
                    }
                });
            },
        },
    });
    function PostBack() {
        if (request("formData") == "") {
            location.href = location.href;
        }
        parent.loadData();
    }
</script>