<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="edit.aspx.cs" Inherits="wjdhcms_SAAS.module.category.edit" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>内容</title>
    <!-- start: CSS file-->
    <!-- Vendor CSS-->
    <link href="../static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../static/vendor/skycons/css/skycons.css" rel="stylesheet" />
    <link href="../static/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
    <!-- Plugins CSS-->
    <link href="../static/plugins/bootkit/css/bootkit.css" rel="stylesheet" />
    <!-- Theme CSS -->

    <!-- Page CSS -->   
    <link href="../static/css/style.css" rel="stylesheet" />
    <link href="../static/css/add-ons.min.css" rel="stylesheet" />

    <!-- end: CSS file--> 
    <!-- Head Libs -->
    <script src="../static/plugins/modernizr/js/modernizr.js"></script>
    
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="../static/js/html5shiv.min.js"></script>
      <script src="../static/js/respond.min.js"></script>
    <![endif]-->

</head>

<body class="mainbody">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12">
        <div class="panel wizard-type1" id="wizard2">

          <form id="form" data-toggle="formcache">
                <div class="panel-heading bk-bg-primary">
                  <ul class="steps">
                      <li><a href="#tab11" data-toggle="tab"><span class="badge badge-info"><i class="fa fa-file-text"></i></span>基本信息</a></li>
                      <li><a href="#tab12" data-toggle="tab"><span class="badge badge-info"><i class="fa fa-file-text"></i></span>扩展选项</a></li>
                    </ul>
                    <div class="progress thin progress-striped active">
                      <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                      </div>
                    </div>
                </div>
                <div class="panel-body">
                  <form class="form">
                    <div class="tab-content">
                      <div class="tab-pane" id="tab11">
                        <div class="row">
                          <div class="col-sm-12">
                            <div class="form-horizontal">
                              <div class="form-group">
                                <label class="col-md-1 control-label" for="text-input">栏目名称</label>
                                <div class="col-md-4">
                                  <input type="text" name="catname" id="catname" class="form-control" data-no-empty="true" value=""  onblur="ajaxdir()">
                                </div>
                                <div class="col-md-2">
                                  <span class="help-block text-right">*类别中文名称，15字符内</span>
                                </div>
                              </div>
                                <div class="form-group">
                                <label class="col-md-1 control-label" for="text-input">URL字符</label>
                                <div class="col-md-4">                          
                                  <input type="text" name="url" id="url" class="form-control" value="">
                                </div>
                                <div class="col-md-2">
                                  <span class="help-block text-right">*URL字符，只允许字母,<font color="red">不能修改</font></span>
                                </div>
                              </div>
                              <div class="form-group">
                                <label class="col-md-1 control-label" for="text-input">英文名称</label>
                                <div class="col-md-4">                          
                                  <input type="text" name="enname" id="enname" class="form-control" value="">
                                </div>
                                <div class="col-md-2">
                                  <span class="help-block text-right">*栏目文件夹的调用别名，只允许字母</span>
                                </div>
                              </div>

                              <div class="form-group">
                                <label class="col-md-1 control-label" for="parentlist">所属父类别</label>
                                <div class="col-md-4">
                                  <select class="form-control" id="parentlist" name="parentid">
                                      <option value="0">作为顶级栏目</option>
                                  </select>
                                </div>
                                <div class="col-md-2">
                                  <span class="help-block text-right">*请选择内容模板</span>
                                </div>
                              </div>
                              <div class="form-group">
                                <label class="col-md-1 control-label" for="text-input">排序数字</label>
                                <div class="col-md-4">                          
                                  <input type="text" name="listorder" id="listorder" class="form-control" data-no-empty="true" value="99">
                                </div>
                                <div class="col-md-2">
                                  <span class="help-block text-right">排序</span>
                                </div>
                              </div>

                              <div class="form-group">
                                <label class="col-md-1 control-label">栏目类型</label>
                                <div class="col-md-4 dfjb text-left">
                                  <div class="radio-custom radio-inline">
                                    <input type="radio" id="field_61_0" name="typeid" data-toggle-href="#type1" value="1" checked> 
                                    <label for="field_61_0">列表栏目</label>
                                  </div>
                                  <div class="radio-custom radio-inline">
                                    <input type="radio" id="field_61_1" name="typeid" data-toggle-href="#type2" value="2"> 
                                    <label for="field_61_1">单页面</label>
                                  </div>
                                  <div class="radio-custom radio-inline">
                                    <input type="radio" id="field_61_2" name="typeid" data-toggle-href="#type3" value="3"> 
                                    <label for="field_61_2">外部链接</label>
                                  </div>
                                </div>
                                <div class="col-md-2">
                                  <span class="help-block text-right">*请选择栏目类型</span>
                                </div>
                              </div>
                              <div class="type-tab">
                              <div id="type1">
                              <div class="form-group">
                                <label class="col-md-1 control-label" for="textarea-input">内容模型</label>
                                <div class="col-md-4">
                                  <select class="form-control" id="modelslist" name="modelid">
                                      <option value="0">┣请选择</option>
                                  </select>
                                </div>
                                <div class="col-md-2">
                                  <span class="help-block text-right">*请选择内容模板</span>
                                </div>
                              </div>
                              <div class="form-group">
                                <label class="col-md-1 control-label" for="text-input">列表模板</label>
                                <div class="col-md-4">
                                  <input type="text" name="list_tpl" id="list_tpl" class="form-control" value="">
                                </div>
                                <div class="col-md-2">
                                  <span class="help-block text-right">*前面为栏目调用模板，后面为可选模</span>
                                </div>
                              </div>
                              <div class="form-group">
                                <label class="col-md-1 control-label" for="text-input">内容模板</label>
                                <div class="col-md-4">
                                  <input type="text" name="show_tpl" id="show_tpl" class="form-control" value="">
                                </div>
                                <div class="col-md-2">
                                  <span class="help-block text-right">*前面为内容调用模板，后面为可选模</span>
                                </div>
                              </div>
                              </div>
                              <div id="type2" style="display:none">
                              <div class="form-group">
                                <label class="col-md-1 control-label" for="textarea-input">单页模板</label>
                                <div class="col-md-4">                             
                                  <input type="text" name="page_tpl" id="page_tpl" class="form-control"  value="Page_about.html">
                                </div>
                                <div class="col-md-2">
                                  <span class="help-block text-right">*请选择内容模板</span>
                                </div>
                              </div>
                              <div class="form-group">
                                <label class="col-md-1 control-label" for="textarea-input">内容</label>
                                <div class="col-md-11">
                                <textarea type="text" class="form-control" id="content" name="content">
                                </textarea>
                                </div>
                              </div>
                              </div>
                              <div id="type3" style="display:none">
                              <div class="form-group">
                                <label class="col-md-1 control-label" for="text-input">链接地址</label>
                                <div class="col-md-4">
                                  <input type="text" name="http" id="http" class="form-control" value="">
                                </div>
                                <div class="col-md-2">
                                  <span class="help-block text-right">*请使用http://开头 如http://www.wjdhcms.com</span>
                                </div>
                              </div>
                              </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="tab-pane" id="tab12">
                        <div class="row">
                          <div class="col-sm-12">
                            <div class="form-horizontal">

                              <div class="form-group">
                                <label class="col-md-1 control-label" for="text-input">是否导航</label>
                                <div class="col-md-4 dfjb text-left">
                                  <div class="checkbox-custom checkbox-inline">
                                    <input type="checkbox" id="top" name="top" value="1"> 
                                    <label for="top">PC顶部</label>
                                  </div>
                                  <div class="checkbox-custom checkbox-inline">
                                    <input type="checkbox" id="bottom" name="bottom" value="1"> 
                                    <label for="bottom">PC底部</label>
                                  </div>
                                  <div class="checkbox-custom checkbox-inline">
                                    <input type="checkbox" id="mobile" name="mobile" value="1"> 
                                    <label for="mobile">手机站</label>
                                  </div>
                                  <div class="checkbox-custom checkbox-inline">
                                    <input type="checkbox" id="weixin" name="weixin" value="1"> 
                                    <label for="weixin">小程序</label>
                                  </div>
                                </div>
                                <div class="col-md-2"></div>
                                <div class="col-md-2">
                                  <span class="help-block text-right"></span>
                                </div>
                              </div>

                              <div class="form-group">
                                <label class="col-md-1 control-label">图片显示模式</label>
                                <div class="col-md-4 dfjb text-left">
                                  <div class="radio-custom radio-inline">
                                    <input type="radio" id="shape_0" name="shape" data-toggle-href="#type1" value="0"> 
                                    <label for="shape_0">全局</label>
                                  </div>
                                  <div class="radio-custom radio-inline">
                                    <input type="radio" id="shape_1" name="shape" data-toggle-href="#type1" value="1"> 
                                    <label for="shape_1">拉伸</label>
                                  </div>
                                  <div class="radio-custom radio-inline">
                                    <input type="radio" id="shape_2" name="shape" data-toggle-href="#type2" value="2"> 
                                    <label for="shape_2">居中</label>
                                  </div>
                                  <div class="radio-custom radio-inline">
                                    <input type="radio" id="shape_3" name="shape" data-toggle-href="#type3" value="3"> 
                                    <label for="shape_3">平铺</label>
                                  </div>
                                </div>
                                <div class="col-md-2">
                                  <span class="help-block text-right">*请选择栏目类型</span>
                                </div>
                              </div>

                              <div class="form-group">
                                <label class="col-md-1 control-label" for="text-input">栏目banner</label>
                                <div class="col-md-4 img-upload">
                                  <input type="text" id="image" name="image" class="form-control" value="">
                                  <div class="upload-box upload-img"></div>
                                </div>
                                <div class="col-md-2">
                                  <span class="help-block text-right">(logoimage)</span>
                                </div>
                              </div>

                              <div class="form-group">
                                <label class="col-md-1 control-label" for="text-input">栏目小图标</label>
                                <div class="col-md-4 img-upload">
                                  <input type="text" id="simage" name="simage" class="form-control" value="">
                                  <div class="upload-box upload-img"></div>
                                </div>
                                <div class="col-md-2">
                                  <span class="help-block text-right">(logoimage)</span>
                                </div>
                              </div>

                              <div class="form-group">
                                <label class="col-md-1 control-label" for="text-input">SEO标题</label>
                                <div class="col-md-4">
                                  <input type="text" name="seo_title" id="seo_title" class="form-control" value="">
                                </div>
                                <div class="col-md-2">
                                  <span class="help-block text-right">*类别中文名称，15字符内</span>
                                </div>
                              </div>
                              <div class="form-group">
                                <label class="col-md-1 control-label" for="text-input">SEO关键词</label>
                                <div class="col-md-4">
                                  <input type="text" name="seo_keywords" id="seo_keywords" class="form-control" value="">
                                </div>
                                <div class="col-md-2">
                                  <span class="help-block text-right">*类别中文名称，15字符内</span>
                                </div>
                              </div>
                              <div class="form-group">
                                <label class="col-md-1 control-label" for="text-input">SEO描述</label>
                                <div class="col-md-4">
                                  <textarea type="text" name="seo_description" id="seo_description" class="form-control" rows="3"></textarea> 
                                </div>
                                <div class="col-md-2">
                                  <span class="help-block text-right">*类别中文名称，15字符内</span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      
                    </div>
                    <div class="navbar-fixed-bottom" style="padding: 0 25px;">
                    <div class="actions">       
                      
                      <input type="button" class="btn btn-info" id="submit" value="提交保存" />
                      <input type="button" class="btn btn-primary button-next" name="next" value="下一项" />
                    </div>
                    </div>
                  </form>
                </div>
                </form>
              </div>
      </div>
    </div>
  </div>

    <!-- start: JavaScript-->
    
    <!-- Vendor JS-->       
    <script src="../static/vendor/js/jquery-2.1.1.min.js"></script>
    <script src="../static/vendor/js/jquery-migrate-1.2.1.min.js"></script>
    <script src="../static/vendor/bootstrap/js/bootstrap.min.js"></script>
    
    <!-- Plugins JS-->
    <script src="../static/plugins/wizard/js/jquery.bootstrap.wizard.min.js"></script>
    <script src="../static/plugins/webuploader/webuploader.min.js"></script>
    <script src="../static/plugins/webuploader/imgupload.js"></script>    
    <script src="../static/plugins/editor/kindeditor.js"></script>

    
    <!-- Pages JS -->
    <script src="../static/js/pages/form-wizard.js"></script>
    <script src="../static/js/ajax.js"></script>
    
    <!-- end: JavaScript-->
    <script type="text/javascript">
         function ajaxdir() {
            var dir = $('#url').val();
            if (dir == '') {
                $.post('../../api/user.ashx?action=get_pinyin&id=' + Math.random(), { dir: $('#catname').val() }, function (data) { $('#url').val(data); });
            }
        }

        $(function () {
            var typeId = 0;
            $(".upload-img").InitUploader({ filesize: "20480", sendurl: "../../api/upload_ajax.ashx", swf: "../static/plugins/webuploader/uploader.swf", filetypes: "gif,jpg,png" });
            $('input[data-toggle-href]').on("click", function () {
                var href = $(this).attr('data-toggle-href');
                $(href).fadeIn('500').siblings().hide('0');
            });
            var Jsonurl = "../../api/category.ashx?action=getedit&id=" + $.getUrlParam('id')
            if ($.getUrlParam('action') == 'edit') {
                $('#url').prop('disabled', true);
                Jsonurl = "../../api/category.ashx?action=getedit&id=" + $.getUrlParam('id')
            } else {
                Jsonurl = "../../api/category.ashx?action=getadd"
            }
            var modelsJson = {};
            get_json(Jsonurl, function (data) {
                modelsJson = data.data.modelslist;
                if (data.data.typeid == '2') {
                    typeId = 1;
                }
                for (var attr in data.data) {
                    if (attr == 'parentlist') {
                        var list = '';
                        for (var i = 0; i < data.data.parentlist.length; i++) {
                            list += '<option value="' + data.data.parentlist[i].id + '" >┣' + data.data.parentlist[i].catname + '</option>';
                            if (data.data.parentlist[i].list != 0) {
                                for (var k = 0; k < data.data.parentlist[i].list.length; k++) {
                                    list += '<option value="' + data.data.parentlist[i].list[k].id + '">┃┣' + data.data.parentlist[i].list[k].catname + '</option>';
                                }
                            }
                        }
                        $('#' + attr).append(list);
                    } else if (attr == "parentid") {
                        $('#parentlist').find('option[value="' + data.data.parentid + '"]').prop('selected', true);
                    } else if (attr == "typeid") {
                        var that = $('input[name="typeid"][value="' + data.data.typeid + '"]');
                        that.prop('checked', true);
                        var href = that.attr('data-toggle-href');
                        $(href).fadeIn('500').siblings().hide('0');
                    } else if (attr == "modelslist") {
                        var list2 = '';
                        for (var j = 0; j < data.data.modelslist.length; j++) {
                            if (data.data.modelid == data.data.modelslist[j].model_id) {
                                list2 += '<option value="' + data.data.modelslist[j].model_id + '" data-list-tpl="' + data.data.modelslist[j].list_tpl + '" data-show-tpl="' + data.data.modelslist[j].show_tpl + '" selected>┣' + data.data.modelslist[j].model_name + '</option>';
                                if ($.getUrlParam('action') == 'edit') {
                                    $('#list_tpl').val(data.data.list_tpl);
                                    $('#show_tpl').val(data.data.show_tpl);
                                } else {
                                    $('#list_tpl').val(data.data.modelslist[j].list_tpl);
                                    $('#show_tpl').val(data.data.modelslist[j].show_tpl);
                                }
                            } else {
                                list2 += '<option value="' + data.data.modelslist[j].model_id + '" data-list-tpl="' + data.data.modelslist[j].list_tpl + '" data-show-tpl="' + data.data.modelslist[j].show_tpl + '">┣' + data.data.modelslist[j].model_name + '</option>'
                            }
                        }
                        $('#' + attr).append(list2);
                    } else if ($('#' + attr).is(':checkbox')) {
                        if (data.data[attr] == "1") {
                            $('#' + attr).prop('checked', true)
                        }
                    } else if ($('[name="' + attr + '"]').is(':radio')) {
                        $('[name="' + attr + '"][value="' + data.data[attr] + '"]').prop('checked', true)
                    } else {
                        $('#' + attr).val(data.data[attr]);
                        var editor = KindEditor.create('#content', {
                            width: '100%',
                            height: '350px',
                            filterMode: false, //默认不过滤HTML
                            resizeType: 1,
                            uploadJson: '../../api/upload_ajax.ashx',
                            fileManagerJson: '../tools/editor/server/file_manager_json.ashx',
                            allowFileManager: true,
                            syncType: form,
                            afterChange: function () {
                                this.sync();
                            }
                        });
                    }

                }
            });
            $("#modelslist").on("change", function () {
                var listTpl = $(this).find("option:selected").attr("data-list-tpl");
                var showTpl = $(this).find("option:selected").attr("data-show-tpl");
                $('#list_tpl').val(listTpl);
                $('#show_tpl').val(showTpl);
            });
            $('#submit').on("click", function () {
                noEmpty(function () {
                    var json = $('#form').serializeArray();
                    var a = JSON.stringify(json);
                    console.log(a);
                    send_json('../../api/category.ashx?action=' + $.getUrlParam('action') + "&id=" + $.getUrlParam('id'), json, function () {
                        //alert(typeId)
                        if (typeId != 1) {
                            window.location.href = document.referrer
                        }
                    })
                })
            });
        })
    </script>
</body>
</html>