{template 'common/header'}
<div class="main">
    <div class="col-lg-12">
        <div class="panel panel-danger">
            <div class="main">
                <ul class="nav nav-tabs">
                    <li {if $_GPC[ 'op']=='' }class="active" {/if}>
                        <a href="{php echo $this->createWebUrl('menu')}">列表</a>
                    </li>
                    <li {if $_GPC[ 'op']=='add' }class="active" {/if}>
                        <a href="{php echo $this->createWebUrl('menu', array('op' => 'add'))}">添加</a>
                    </li>
                    {if $_GPC[ 'op']=='edit' }
                    <li class="active">
                        <a href="javascript:void(0);">编辑</a>
                    </li> {/if}
                </ul>
            </div>
            <div class="panel-body">
                {if $_GPC['op'] == ''}
                <table>
                    <thead>
                        <tr>
                            <th style="width:10%">菜单名称</th>
                            <th style="width:20%">说明文字</th>
                            <th style="width:10%">图标图片</th>
                            <th style="width:10%">类型</th>
                            <th style="width:30%">链接/小程序appid</th>
                            <th style="width:10%">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {loop $menus $menu}
                        <tr>
                            <td>{$menu['menuname']}</td>
                            <td>{$menu['menudesctitle']}</td>
                            <td><img src="{media $menu['menuiconurl']}" style="width: 144px;height: 72px;"></td>
                            <td>{if $menu['menutype']==1}小程序{else}网页{/if}</td>
                            <td>{$menu['menuurl']}</td>
                            <td>
                                <a href="{php echo $this->createWebUrl('menu', array('op' => 'edit', 'ids' => $menu['id']))}" class="btn btn-xs btn-warning">编辑</a>
                                <a href="javascript:void(0);" class="btn btn-xs btn-danger" onclick="if (confirm('确定删除？')) { location.href = '{php echo $this->createWebUrl('menu', array('op' => 'delete', 'ids' => $menu['id']))}'; }">删除</a>
                            </td>
                        </tr>
                        {/loop}
                    </tbody>
                </table>
                {/if} {if $_GPC['op'] == 'add'}
                <form action="{php echo $this->createWebUrl('menu', array('op' => 'create'))}" method="post">
                    <div class="form-inline">
                        <div class="col-xs-6 form-group">
                            <label>菜单名称：</label>
                            <input type="text" name="menuname" class="form-control" placeholder="显示在首页菜单名称">
                            <span class="help-block"></span>
                        </div>
                        <div class="col-xs-6 form-group">
                            <label>菜单字体颜色：</label>
                            <input type="text" name="menunamecolor" id="remark1" class="form-control" readonly="readonly">
                            <input class="form-control" data-id="1" name="color" placeholder="颜色" />
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-inline">
                        <div class="col-xs-6 form-group">
                            <label>说明文字：</label>
                            <input type="text" name="menudesctitle" class="form-control" placeholder="菜单说明文字">
                            <span class="help-block"></span>
                        </div>
                        <div class="col-xs-6 form-group">
                            <label>说明文字颜色：</label>
                            <input type="text" name="menudesccolor" id="remark2" class="form-control" readonly="readonly">
                            <input class="form-control" data-id="2" name="color" placeholder="颜色" />
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-inline">
                        <div class="col-xs-6 form-group">
                            <label>图标背景颜色：</label>
                            <input type="text" name="menuiconcolor" id="remark4" class="form-control" readonly="readonly">
                            <input class="form-control" data-id="4" name="color" placeholder="颜色" />
                            <span class="help-block"></span>
                        </div>
                        <div class="col-xs-6 form-group">
                            <label>菜单背景颜色：</label>
                            <input type="text" name="menubackcolor" id="remark3" class="form-control" readonly="readonly">
                            <input class="form-control" data-id="3" name="color" placeholder="颜色" />
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class=" form-group">
                            <label>图标图片：</label>
                            {php echo tpl_form_field_image('menuiconurl');}
                            <div class="help-block">图标大小 50x50 px</div>
                        </div>
                    </div>
                    <div class="col-xs-12 form-group">
                        <label class="col-xs-12 col-sm-2 col-md-2  control-label">类型</label>
                        <div class="col-sm-8">
                            <input type="radio" name="menutype" value="1">小程序
                            <input type="radio" name="menutype" value="2">网页
                            <div class="help-block">请按照添加的选择小程序或网页链接，否则跳转失败！网页链接需要在微信小程序后台添加业务域名！</div>
                        </div>
                    </div>
                    <div class="col-xs-12 form-group">
                        <label class="col-xs-12 col-sm-2 col-md-2  control-label">链接/小程序appid</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="menuurl" />
                            <div class="help-block">如果是网页需要填写完整且需在小程序后台配置域名！如果链接过长，请转换短连接 列如：https://m.baidu.com   小程序跳转：小程序APPID  小程序路径：APPID||路径</div>
                        </div>
                    </div>
                    <div class="col-xs-12 form-group">
                        <input type="submit" value="提交" class="btn btn-primary">
                    </div>
                </form>
                <script type="text/javascript">
                require(["jquery", "util"], function($, util) {
                    $(function() {
                        $("input[name^=color]").each(function() {
                            var ele = this;
                            var ids = $(this).attr("data-id");
                            util.colorpicker(ele, function(color) {
                                $("#remark" + ids).val(color.toString());
                            });
                        });
                    });
                });
                </script>
                {/if} {if $_GPC['op'] == 'edit'}
                <form action="{php echo $this->createWebUrl('menu', array('op' => 'create'))}" method="post">
                    <div class="form-inline">
                        <div class="col-xs-6 form-group">
                            <label>菜单名称：</label>
                            <input type="text" name="menuname" class="form-control" placeholder="显示在首页菜单名称" value="{$edit['menuname']}">
                            <span class="help-block"></span>
                        </div>
                        <div class="col-xs-6 form-group">
                            <label>菜单字体颜色：</label>
                            <input type="text" name="menunamecolor" id="remark1" class="form-control" value="{$edit['menunamecolor']}" readonly="readonly">
                            <input class="form-control" data-id="1" name="color" placeholder="颜色" />
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-inline">
                        <div class="col-xs-6 form-group">
                            <label>说明文字：</label>
                            <input type="text" name="menudesctitle" class="form-control" placeholder="菜单说明文字" value="{$edit['menudesctitle']}">
                            <span class="help-block"></span>
                        </div>
                        <div class="col-xs-6 form-group">
                            <label>说明文字颜色：</label>
                            <input type="text" name="menudesccolor" id="remark2" class="form-control" value="{$edit['menudesccolor']}" readonly="readonly">
                            <input class="form-control" data-id="2" name="color" placeholder="颜色" />
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-inline">
                        <div class="col-xs-6 form-group">
                            <label>图标背景颜色：</label>
                            <input type="text" name="menuiconcolor" id="remark4" class="form-control" value="{$edit['menuiconcolor']}" readonly="readonly">
                            <input class="form-control" data-id="4" name="color" placeholder="颜色" />
                            <span class="help-block"></span>
                        </div>
                        <div class="col-xs-6 form-group">
                            <label>菜单背景颜色：</label>
                            <input type="text" name="menubackcolor" id="remark3" class="form-control" value="{$edit['menubackcolor']}" readonly="readonly">
                            <input class="form-control" data-id="3" name="color" placeholder="颜色" />
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class=" form-group">
                            <label>图标图片：</label>
                            {php echo tpl_form_field_image('menuiconurl', $edit['menuiconurl']);}
                            <div class="help-block">图标大小 50x50 px</div>
                        </div>
                    </div>
                    <div class="col-xs-12 form-group">
                        <label class="col-xs-12 col-sm-2 col-md-2  control-label">类型</label>
                        <div class="col-sm-8">
                            <input type="radio" name="menutype" value="1" {if $edit[ 'menutype']==1 }checked{/if}>小程序
                            <input type="radio" name="menutype" value="2" {if $edit[ 'menutype']==2 }checked{/if}>网页
                            <div class="help-block">请按照添加的选择小程序或网页链接，否则跳转失败！网页链接需要在微信小程序后台添加业务域名！</div>
                        </div>
                    </div>
                    <div class="col-xs-12 form-group">
                        <label class="col-xs-12 col-sm-2 col-md-2  control-label">链接/小程序appid</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="menuurl" value="{$edit['menuurl']}" />
                           <div class="help-block">如果是网页需要填写完整且需在小程序后台配置域名！如果链接过长，请转换短连接 列如：https://m.baidu.com   小程序跳转：小程序APPID  小程序路径：APPID||路径</div>
                        </div>
                    </div>
                    <div class="col-xs-12 form-group">
                        <input type="hidden" name="ids" value="{$edit['id']}">
                        <input type="submit" value="提交" class="btn btn-primary">
                    </div>
                </form>
                <script type="text/javascript">
                require(["jquery", "util"], function($, util) {
                    $(function() {
                        $("input[name^=color]").each(function() {
                            var ele = this;
                            var ids = $(this).attr("data-id");
                            util.colorpicker(ele, function(color) {
                                $("#remark" + ids).val(color.toString());
                            });
                        });
                    });
                });
                </script>
                {/if}
                <div>
                </div>
            </div>
        </div>
        {template 'common/footer'}