<div class="pageheader">
    <div class="media">
        <div class="pageicon pull-left">
            <i class="fa fa-th-list"></i>
        </div>
        <div class="media-body">
            <ul class="breadcrumb">
                <li><a href="#"><i class="glyphicon glyphicon-home"></i></a></li>
                <li><a href="#">商品基础规则</a></li>
                <li>商品属性管理</li>
            </ul>
            <h4>产品属性列表</h4>
        </div>
    </div>
    <!-- media -->
</div>

<div class="contentpanel">
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-default noborder pattrscroll">
                <div class="panel-body">
                    <div class="pannel-scroll">
                        <ul class="list-group">
                            {{# data}}
                            <li class="list-group-item level{{sortLevel}} {{# child}}hidden{{/ child}}" data-parent="{{parentId}}" data-val="{{id}}" data-status="close">
                                <span class="icon expand-icon glyphicon glyphicon-plus"></span>
                                {{sortName}}
                            </li>
                            {{/ data}}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="panel panel-default">
                <div class="panel-heading noborder">
                    <button class="btn btn-success model-attr-btn" disabled data-toggle="modal" id="add-attri" data-target="#addAttr">
                        <i class="glyphicon-plus"></i>添加属性
                    </button>
                </div>
            </div>
            <div id="attr-table" class="table-responsive">
                <!--<table class="table table-bordered">
                    <thead>
                    <tr>
                        <th width="15%">属性名称</th>
                        <th width="15%">属性类型</th>
                        <th width="15%">输入类型</th>
                        <th width="15%">是否必选</th>
                        <th width="15%">是否可搜索</th>
                        <th width="25%">操作</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>-->
            </div>
        </div>
    </div>
</div>


<script type="text/template" id="template">
    <form id="add-attr-form" class="form-horizontal form-bordered" method="post" action="/product/attr/add" style="height: 400px;overflow: auto">
        <div class="form-group">
            <label class="col-md-3 control-label">
                属性名称<i class="red">*</i>
            </label>

            <div class="col-md-6">
                <input id="attributeName" value="{attributeName}" class="form-control width300" type="text" placeholder="属性名称" required="required">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-3 control-label">
                销售类型<i class="red">*</i>
            </label>

            <div class="col-md-6">
                <select id="saleType"  class="attr-select width300" data-placeholder="销售类型" value="{saleType}" required="required">
                    <option value="">请选择</option>
                    <option value="1">销售属性</option>
                    <option value="2">非销售属性</option>
                    <option value="3">扩展属性</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-3 control-label">
                输入类型<i class="red">*</i>
            </label>

            <div class="col-md-6">
                <select id="inputType" class="attr-select width300" data-placeholder="输入类型" value="{inputType}" required="required">
                    <option value="">请选择</option>
                    <option value="radio">单选按钮</option>
                    <option value="checkbox">复选框</option>
                    <option value="select">下拉列表</option>
                    <option value="text">单行文本框</option>
                    <option value="textarea">多行文本框</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-3 control-label">
                是否必选
            </label>

            <div class="col-md-6">
                <select id="isMust" value="{isMust}" class="attr-select width300" data-placeholder="是否必选">
                    <option value="">请选择</option>
                    <option value="Y">是</option>
                    <option value="N">否</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-3 control-label">
                启用搜索
            </label>

            <div class="col-md-6">
                <select id="isSearch" value="{isSearch}" class="attr-select width300" data-placeholder="启用搜索">
                    <option value="0">请选择</option>
                    <option value="Y">是</option>
                    <option value="N">否</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-3 control-label">
                最大输入值
            </label>

            <div class="col-md-6">
                <input id="maxValueLen" class="form-control width300" value="{maxValueLen}" type="text" placeholder="最大输入值">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-3 control-label">
                是否允许别名
            </label>

            <div class="col-md-6">
                <select id="isAllowAlias" value="{isAllowAlias}" class="attr-select width300" data-placeholder="是否允许别名">
                    <option value="">请选择</option>
                    <option value="Y">是</option>
                    <option value="N">否</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-3 control-label">
                排序
            </label>

            <div class="col-md-6">
                <input id="orderBy" class="form-control width300" type="text" value="{orderBy}" placeholder="排序">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-3 control-label">
                属性值<i class="red">*</i>
            </label>

            <div class="col-md-6">
                <input id="attributeValues" value="{attributeValues}" class="form-control width300" type="text" placeholder="属性值" required="required">
            </div>
        </div>

        <!--新增-->
        <div class="form-group">
            <label class="col-md-3 control-label">
                展示位置
            </label>

            <div class="col-md-6">
                <select id="displayPosition" value="{displayPosition}" class="attr-select width300" data-placeholder="展示位置">
                    <option value="">请选择</option>
                    <option value="1">基础商品-非销售属性</option>
                    <option value="2">网售信息-上架后补全信息</option>
                    <option value="3">网售信息-商品参数</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-3 control-label">
                备注
            </label>

            <div class="col-md-6">
                <textarea id="remark" value="{remark}" class="form-control width300" rows="2" name="remark"></textarea>
            </div>
        </div>


        <div class="form-group hidden">
            <label class="col-md-3 control-label">
                ID<i>*</i>
            </label>

            <div class="col-md-6">
                <input id="categoryId" class="form-control width300" value="" type="text" placeholder="ID">
            </div>
        </div>
        <div class="form-group hidden">
            <label class="col-md-3 control-label">
                attributeId<i class="red">*</i>
            </label>

            <div class="col-md-6">
                <input id="attributeId" class="form-control width300" value="" type="text" placeholder="attributeId">
            </div>
        </div>
    </form>

</script>