<div class="main" id="main" v-cloak>
    <el-form label-position="left" label-width="130px">
        <el-form-item label="设置栏目" style="display:none;">
            <ui-select v-model="formData.Ids" style="width:100%;" placeholder="请选择栏目" :multiple="true" :disabled="true" :options="@Html.GetOptionsJson("pa_column","name","","xuhao asc")"
                       v-validate="{data:formData.Ids,dataType:'*',nullMsg:'请选择设置栏目！'}">
            </ui-select>
            <span class="help-block validate-tips-box"></span>
        </el-form-item>
        <el-form-item>
            <label slot="label">
                栏目类型
                <el-checkbox v-model="formSelected._ColumnType"></el-checkbox>
            </label>
            <el-select v-model="formData.ColumnType" placeholder="请选择栏目类型" style="width:100%">
                <el-option :key="0" :value="0" label="首页"></el-option>
                <el-option :key="1" :value="1" selected label="信息页"></el-option>
                <el-option :key="2" :value="2" label="单页面"></el-option>
                <el-option :key="3" :value="3" label="自定义链接"></el-option>
            </el-select>
            <span class="help-block validate-tips-box"></span>
        </el-form-item>
        <el-form-item>
            <label slot="label">
                栏目信息表
                <el-checkbox v-model="formSelected._TableId"></el-checkbox>
            </label>
            <el-input-convert placeholder="请选择信息表" :convert-url="'@Url.ActionUrl("getName","infoTable")?id='+formData.TableId">
                <el-button type="button" v-on:click="dialog({title:'选择信息表',url:'@Url.ActionUrl("Select","InfoTable")?siteid=@ViewBag.CurrentSiteId&setData=parent.vue.formData.TableId',width:'660px',height:'95%',target:'_self'})">选择</el-button>
            </el-input-convert>
            <span class="help-block"></span>
        </el-form-item>
        <el-form-item>
            <label slot="label">
                栏目缓存方案
                <el-checkbox v-model="formSelected._HttpcacheSolutionId"></el-checkbox>
            </label>
            <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">http缓存方案请到系统>系统配置>http缓存方案中设置</span>
        </el-form-item>
        <el-form-item>
            <label slot="label">
                栏目模板
                <el-checkbox v-model="formSelected._Template"></el-checkbox>
            </label>
            <el-input type="text" placeholder="栏目页的模板文件" maxlength="100" v-model="formData.Template" class="form-control form-control-sm">
                <template slot="append">
                    <el-button type="button" v-on:click="dialog({title:'选择栏目模板',url:'@Url.ActionUrl("Select","TemplateManager")?setData=parent.vue.formData.Template',width:'600px',height:'90%',target:'self'})">选择</el-button>
                </template>
            </el-input>
            <span class="help-block">模板只能选择.cshtml后缀的文件</span>
        </el-form-item>
        <el-form-item>
            <label slot="label">
                内容页模版
                <el-checkbox v-model="formSelected._TemplateDetail"></el-checkbox>
            </label>
            <el-input type="text" placeholder="内容页的模板文件" maxlength="100" v-model="formData.TemplateDetail">
                <template slot="append">
                    <el-button type="button" v-on:click="dialog({title:'选择内容页模板',url:'@Url.ActionUrl("Select","TemplateManager")?setData=parent.vue.formData.TemplateDetail',width:'600px',height:'90%',target:'self'})">选择</el-button>
                </template>
            </el-input>
            <span class="help-block">模板只能选择.cshtml后缀的文件</span>
        </el-form-item>
        <el-form-item>
            <label slot="label">
                目标窗口
                <el-checkbox v-model="formSelected._Target"></el-checkbox>
            </label>
            <el-radio-group v-model="formData.Target">
                <el-radio label="_self">本窗口</el-radio>
                <el-radio label="_blank">新窗口</el-radio>
            </el-radio-group>
            <span class="help-block"></span>
        </el-form-item>
        <el-form-item>
            <label slot="label">
                是否显示
                <el-checkbox v-model="formSelected._Show"></el-checkbox>
            </label>
            <el-radio-group v-model="formData.Show">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
            </el-radio-group>
            <span class="help-block"></span>
        </el-form-item>
    </el-form>
    <div class="footer-submit-bar" style="padding-left:150px">
        <el-button type="primary" v-on:click="postSubmit">提交保存</el-button>
        <el-button onclick="closeSelf()">关闭</el-button>
    </div>
</div>

<script type="text/javascript">
    var formSelected = { _ColumnType: false, _TableId: false, _HttpcacheSolutionId: false, _Target: false, _Show: false, _Template: false, _TemplateDetail: false };
    var formData = { Ids: "@Request.QueryString["selectedIds"]", ColumnType: "", TableId: 0, HttpcacheSolutionId: 0, Target: "_self", Show: 0, Template: "", TemplateDetail: "" };

      var vue= new Vue({
          el: "#main",
          data: {
              formSelected: formSelected,
              formData: formData
          },
          methods: {
                postSubmit: function () {
                    var validated = this.validateForm();//jquery表单验证
                    if (validated)
                    {
                        var serverData = extend({},vue.formSelected, vue.formData);
                        this.submit({ url: "@Url.ActionUrl()", confirmMsg: "是否确定提交？", successMsg: "设置成功！", data: serverData, success: function () { setBack() } });
                    }
              },
          },
          watch: {
          }
    });
    function setBack() {
        parent.loadData();
        closeSelf();
    }
</script>