@using PageAdmin.Utils
@{
    PageAdmin.Common.PermissionInformationModel permissionsSet = ViewBag.PermissionsSet;
    CurrentUser user = ViewBag.CurrentUser;
    int tableId = ViewBag.TableId;
    string table = ViewBag.Table;
    string postUrl;
    string action = ViewContext.RouteData.Values["action"].ToString().ToLower();
    int id = 0;
    if (action == "edit")
    {
        id = StringHelper.Format<int>(Request.QueryString["id"]);
        postUrl = Url.ActionUrl("InfoEdit");
    }
    else
    {
        postUrl = Url.ActionUrl("InfoAdd");
    }
    postUrl += "?table=" + table;
    IEnumerable<dynamic> fieldData = Html.GetFieldList((string)ViewBag.Table, action, user);
    IEnumerable<dynamic> subFieldData = fieldData.Where(c => c.FieldType == "subtable");
    ICollection<int> subtableIframeIdList = new List<int>();
    var guid = Html.Guid();
    int historyColumnId = StringHelper.Format<int>(Request.QueryString["columnId"]);
    var columnTree = Html.GetColumnTree(tableId, user);
    var blockset = StringHelper.Format<int>(Request.QueryString["blockSet"]);
}
<script src="~/Incs/UEditor/ueditor.forAdmin.config.js?v=4.0.11" type="text/javascript"></script>
<script src="~/Incs/UEditor/ueditor.all.min.js?v=4.0.19" type="text/javascript"></script>
<div class="main" id="main">
    <el-tabs v-model="activeName" type="card" v-on:tab-click="handleTabClick">
        <el-tab-pane label="内容设置" name="1">
            <el-form label-width="150px" label-position="left" size="medium">
                <el-form-item label="所属栏目*" v-show="ignoreColumn==false">
                    <ui-cascader v-model="formData.ColumnId" placeholder="请选择栏目" style="width:calc(50% - 150px)" :options="@JsonHelper.JsonParse(columnTree)" :props="{ expandTrigger: 'hover',multiple:false }" v-validate="{data:formData.ColumnId,dataType:'numeric',min:1,nullMsg:'请选择栏目!',ignore:ignoreColumn}"></ui-cascader>
                    @if (user.IsSuperAdmin || permissionsSet.CanPushData == 1)
                    {
                        <el-checkbox v-model="showSubColumn" :disabled="subColumnIdList.length>0" style="color:#ada6a6">启用副栏目</el-checkbox>
                    }
                    <span class="help-block"></span>
                </el-form-item>
                @if (user.IsSuperAdmin || permissionsSet.CanPushData == 1)
                {
                    <el-form-item label="信息副栏目" v-show="showSubColumn || subColumnIdList.length>0">
                        <ui-select-popup ref="refSubcolumn" v-model="subColumnIdList" url="@Url.ActionUrl("PopupDataList", "Column")" btn-title="选择副栏目" th-title="选择副栏目" :data="{columnType:'1'}" options-url="@Url.ActionUrl("GetColumnPathOptions", "Column")" :multiple="true"></ui-select-popup>
                        <span class="help-block"></span>
                    </el-form-item>
                }
                @{
                    string mountedExecuteJs = "", beforeSubmitJs = "";
                    var data = new ViewDataDictionary();
                    data.Add("from", PageAdmin.Common.FromEnum.Admin);
                    data.Add("currentUser", user);
                    data.Add("guid", guid);
                    data.Add("fieldPrefix", "formData");
                    if (fieldData != null)
                    {
                        foreach (var row in fieldData.Where(c => c.FieldType != "subtable"))
                        {
                            if (!string.IsNullOrEmpty(row.MountedJs))
                            {
                                mountedExecuteJs += row.MountedJs;
                            }
                            beforeSubmitJs += row.BeforeSubmitJs;
                            Html.RenderPartial("~/Areas/E/Views/CustomForm/FormPartial.cshtml", (object)row, data);
                        }
                    }
                }
                @if (user.IsSuperAdmin || permissionsSet.CanSetSubmitState == 1)
                {
                    <el-form-item label="信息状态">
                        <el-radio-group v-model="formData.State">
                            <el-radio :label="1">已审</el-radio>
                            <el-radio :label="0">待审</el-radio>
                            <el-radio :label="-1">已退回</el-radio>
                            <el-radio :label="-2">草稿</el-radio>
                        </el-radio-group>
                        <span class="help-block"></span>
                    </el-form-item>
                }
            </el-form>
        </el-tab-pane>
        @foreach (var fieldItem in subFieldData)
        {
            subtableIframeIdList.Add(fieldItem.Id);
            <el-tab-pane label="@fieldItem.Remark" name="subtable_@(fieldItem.Id)" style="width:100%;height:100%">
                <iframe data-src="/E/SubData/@(fieldItem.SubTableType=="single"?"set":"index")/?parentguid=@guid&parentId=@id&fieldId=@fieldItem.Id&isTabIframe=1" id="subtableIframe@(fieldItem.Id)" name="subtableIframe@(fieldItem.Id)" style="width:100%" frameborder="0"></iframe>
            </el-tab-pane>
        }
        <el-tab-pane label="其他设置" name="2">
            <el-form label-width="150px" label-position="left" class="small" size="medium">
                <el-form-item label="seo标题">
                    <el-input v-model="seoSet.Title" maxlength="150"></el-input>
                    <span class="help-block"></span>
                </el-form-item>

                <el-form-item label="seo关键词">
                    <el-input v-model="seoSet.Keywords" class="form-control" maxlength="200"></el-input>
                    <span class="help-block"></span>
                </el-form-item>

                <el-form-item label="seo描述">
                    <el-input type="textarea" v-model="seoSet.Description" :autosize="{ minRows:3, maxRows:6}"></el-input>
                    <span class="help-block"></span>
                </el-form-item>

                <el-form-item label="Tag标签">
                    <ui-tag v-model="tags" ref="refTags"></ui-tag>
                    <el-button type="primary" size="small" v-on:click="dialog({title:'选择标签',url:'@Url.ActionUrl("select","tag")?tableId=@tableId',width:'60%',height:'80%',target:'self'})">选择</el-button>
                    <span class="help-block">信息标签可以在网站>标签管理中进行管理</span>
                </el-form-item>

                <el-form-item label="信息属性">
                    <ui-select v-model="formData.IsGood" placeholder="请选择推荐属性" :clearable="true">
                        <el-option :value="1" label="1级推荐"></el-option>
                        <el-option :value="2" label="2级推荐"></el-option>
                        <el-option :value="3" label="3级推荐"></el-option>
                        <el-option :value="4" label="4级推荐"></el-option>
                        <el-option :value="5" label="5级推荐"></el-option>
                        <el-option :value="6" label="6级推荐"></el-option>
                        <el-option :value="7" label="7级推荐"></el-option>
                        <el-option :value="8" label="8级推荐"></el-option>
                        <el-option :value="9" label="9级推荐"></el-option>
                        <el-option :value="10" label="10级推荐"></el-option>
                    </ui-select>

                    <ui-select v-model="formData.IsHot" placeholder="请选择热门属性" :clearable="true">
                        <el-option :value="1" label="1级热门"></el-option>
                        <el-option :value="2" label="2级热门"></el-option>
                        <el-option :value="3" label="3级热门"></el-option>
                        <el-option :value="4" label="4级热门"></el-option>
                        <el-option :value="5" label="5级热门"></el-option>
                        <el-option :value="6" label="6级热门"></el-option>
                        <el-option :value="7" label="7级热门"></el-option>
                        <el-option :value="8" label="8级热门"></el-option>
                        <el-option :value="9" label="9级热门"></el-option>
                        <el-option :value="10" label="10级热门"></el-option>
                    </ui-select>
                    <ui-select v-model="formData.IsTop" placeholder="置顶属性" :clearable="true">
                        <el-option :value="1" label="1级置顶"></el-option>
                        <el-option :value="2" label="2级置顶"></el-option>
                        <el-option :value="3" label="3级置顶"></el-option>
                        <el-option :value="4" label="4级置顶"></el-option>
                        <el-option :value="5" label="5级置顶"></el-option>
                        <el-option :value="6" label="6级置顶"></el-option>
                        <el-option :value="7" label="7级置顶"></el-option>
                        <el-option :value="8" label="8级置顶"></el-option>
                        <el-option :value="9" label="9级置顶"></el-option>
                        <el-option :value="10" label="10级置顶"></el-option>
                    </ui-select>
                    <span class="help-block">字段名分别为：IsGood，IsHot，IsTop，都是数值类型,写模板时候根据实际需求调用。</span>
                </el-form-item>

                <el-form-item label="点击数">
                    <el-input-number controls-position="right" :min="0" :max="99999999" v-model="formData.Clicks" id="Clicks"></el-input-number>
                    <span class="help-block"></span>
                </el-form-item>

                <el-form-item label="预上线日期">
                    <el-date-picker v-model="onlineDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="请选择日期"></el-date-picker>
                    <span class="help-block">实际日期大于预上线日期后，信息将自动上线（isOnline字段值更新为1），不填写则默认为上线状态</span>
                </el-form-item>

                <el-form-item label="到期日期">
                    <el-date-picker v-model="expireDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="请选择日期"></el-date-picker>
                    <span class="help-block">实际日期大于过期日期后，信息将自动过期（isExpire字段值更新为1），不填写则默认永不过期</span>
                </el-form-item>

                <el-form-item label="信息页模版">
                    <el-input placeholder="信息页模板文件" v-model="templateSet.TemplateDetail" clearable>
                        <template slot="append">
                            <el-button v-on:click="dialog({title:'选择内容页模板',url:'@Url.ActionUrl("Select","TemplateManager")?setData=parent.vue.templateSet.TemplateDetail',width:'600px',height:'90%',target:'self'})">选择</el-button>
                        </template>
                    </el-input>
                    <span class="help-block">不填写则继承栏目设置中的内容页模板</span>
                </el-form-item>

                <el-form-item label="自定义文件名">
                    <el-input v-model="urlSet.ZdyPath" maxlength="50" v-validate="{data:urlSet.ZdyPath,dataType:'string',ignoreEmpty:true,errorMsg:'只能填写英文和数字组成的字符！'}"></el-input>
                    <span class="help-block">不能填写纯数字，留空则采用Id作为文件名。</span>
                </el-form-item>

                <el-form-item label="自定义链接">
                    <el-input v-model="urlSet.ZdyUrl" maxlength="150"></el-input>
                    <span class="help-block">留空则系统默认</span>
                </el-form-item>

                <el-form-item label="发布IP" v-show="formData.Id>0">
                    <el-input v-model="formData.Ip" maxlength="150" disabled></el-input>
                    <span class="help-block">信息发布的客户端ip</span>
                </el-form-item>
            </el-form>
        </el-tab-pane>
    </el-tabs>
    <div class="footer-submit-bar" style="padding-left:170px">
        <el-button type="primary" v-on:click="postSubmit">提交保存</el-button>
        <el-button onclick="closeSelf()" v-if="@blockset==1">关闭</el-button>
        <el-button v-on:click="closeDrawer()" v-else>关闭</el-button>
    </div>
</div>
<script type="text/javascript">
    var action = "@action";
    var postUrl = "@postUrl";
    var vueData = {
        pageType:"admin",
        currentState:0,
        showSubColumn: false,
        activeNameList: [],//点击过的附属表选项卡
        activeName: "1",
        currentUser:@Html.RawModel(JsonHelper.JsonParse(user)),
        formData:@Html.RawModel((string)Model)
        ,seoSet:@Html.RawModel((string)ViewBag.SeoSet)
        ,templateSet:@Html.RawModel((string)ViewBag.TemplateSet)
        ,urlSet:@Html.RawModel((string)ViewBag.UrlSet)
        ,subColumnIdList:@Html.RawModel((string)ViewBag.SubColumnIdList)
        ,onlineDate:"@ViewBag.OnlineDate"
        ,expireDate: "@ViewBag.ExpireDate"
        ,tags:"@ViewBag.Tags"
    };
    vueData.formData.Guid = "@guid";
    if ("@action"=="add")
    {
        //刷新后保存上次的栏目id，避免再次选择
        var historyColumnId = @historyColumnId;
        if (historyColumnId!=0)
        {
            vueData.formData.ColumnId =historyColumnId;
        }
        vueData.formData.State = 1;
    } else {
        if (vueData.subColumnIdList.length > 0) {
            vueData.showSubColumn = true;
        }
    }
    vueData.currentState = vueData.formData.State;
    //提交前执行
    function beforeSubmitExecute() {
        @Html.Raw(beforeSubmitJs)
        return true;
    }

    var vue= new Vue({
          el: "#main",
          data: vueData,
          computed: {
              ignoreColumn: function ()
              {
                  return @(columnTree.Count())<=0;
              },
        },
        mounted: function () {
          @Html.Raw(mountedExecuteJs)
        },
        methods: {
              handleTabClick: function (tab, event) {
                  var activeName = this.activeName;
                  if (activeName.indexOf("subtable_") >= 0) {
                      var $iframe = document.getElementById("subtableIframe" + this.activeName.replace("subtable_", ""));
                      if ($iframe == null){
                          return;
                      }
                      else {
                          $iframe.height = document.documentElement.clientHeight-100-30;
                      }
                      if (!isNullOrEmpty($iframe.src)) { return; }
                      var dataSrc = $iframe.getAttribute("data-src");
                      $iframe.src = dataSrc;
                  }
              },
              postSubmit: function () {
                  var _this = this;
                  var serverData = {
                      formData:vueData.formData
                      ,seoSet:vueData.seoSet
                      ,templateSet:vueData.templateSet
                      ,urlSet:vueData.urlSet
                      ,onlineDate:vueData.onlineDate
                      ,expireDate:vueData.expireDate
                      ,tags:vueData.tags
                      ,subColumnIdList:vueData.subColumnIdList,
                  };
                  var validated = this.validateForm({ beforeSubmit: function () { return beforeSubmitExecute() } });//jquery表单验证
                  if (validated) {
                      validated = validateIframe();//验证附属表的表单
                  }else{
                        this.activeName = "1";
                  }
                  if (validated) {
                      var callback = function () {
                          _this.submit({ url: "@postUrl", data: serverData, contentType: "application/json", success: function (tipsInfo) { callBack(tipsInfo) } });
                      }
                      postAllForm(callback);
                  }
              },

          },
    });
      function callBack(tipsInfo) {
         if (action == "add") {
                location.href = "@Url.ActionUrl("Add")?table=@table&columnId=" + vueData.formData.ColumnId;
          }
          parent.loadData();
      }
      var subtableIframeIds = @Html.Raw(JsonHelper.JsonParse(subtableIframeIdList));//附属表框架集合
      ///检测iframe中的输入
      function validateIframe() {
          for (var i = 0; i < subtableIframeIds.length; i++) {
              var $iframe = document.getElementById("subtableIframe" + subtableIframeIds[i]);
              if ($iframe == null) { continue; }
              if ($iframe.contentWindow.vue == undefined) { continue; }
              var ifameValidate = $iframe.contentWindow.vue.validate;
              if (ifameValidate != undefined) {
                  var activeName = "subtable_" + subtableIframeIds[i];
                  var result = ifameValidate();
                  if (!result) {
                      vue.activeName = activeName;
                      return result;
                  }
              }
          }
          return true;
      }
      var subPostIdx = 0;
      //提交子框架中的表单
      function postAllForm(mainCallback) {
          if (subPostIdx == subtableIframeIds.length) {
              mainCallback();
              subPostIdx = 0;
              return;
          }
          var $iframe = document.getElementById("subtableIframe" + subtableIframeIds[subPostIdx]);
          var executing = false;
          if ($iframe != null && $iframe.contentWindow.submit != undefined) {
                  executing = true;
                  var callback = function () {
                      subPostIdx++;
                      postAllForm(mainCallback);
                  }
                  $iframe.contentWindow.submit(callback); //回调继续提交下一个
          }
          if (!executing) {//没有submit方法则继续下一个
              subPostIdx++;
              postAllForm(mainCallback)
          }
      }
</script>