{if $showEditor}
<link href="__CDN__/assets/addons/qiyicontract/libs/summernote/summernote.min.css" rel="stylesheet">
{/if}
<style>
.qiyi-box{padding:20px;}
.thumb-preview{max-width:160px;max-height:120px;border:1px solid #ddd;margin-top:8px;display:none;}
.thumb-preview.show{display:block;}
.help-danger{color:#c00;margin-top:6px;}
.note-editor.note-frame{width:100%!important;}
.qiyi-toolbar{margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.qiyi-pager{margin-top:16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.qiyi-pager .muted{color:#888;font-size:13px;}
.qiyi-pager .btns a,.qiyi-pager .btns span{display:inline-block;padding:6px 12px;margin-left:6px;border:1px solid #ddd;border-radius:3px;background:#fff;color:#333;text-decoration:none;}
.qiyi-pager .btns a:hover{background:#f5f5f5;}
.qiyi-pager .btns .disabled{color:#aaa;cursor:not-allowed;background:#fafafa;}
.qiyi-pager .btns .cur{background:#3c8dbc;border-color:#3c8dbc;color:#fff;}
</style>
<div class="qiyi-box">
    <h3>积分商城商品管理</h3>

{if $showEditor}
    {if $isEdit}
    <div class="alert alert-warning" id="shop-edit-banner">
        正在编辑商品：<b>{$editRow.name|htmlentities}</b>（ID {$editRow.id}）
        <a href="{:url('qiyicontract.tenantpanel/shopgoods')}" class="pull-right">返回列表</a>
    </div>
    {else /}
    <div class="alert alert-info">
        新增商品（请先在「分类管理」创建分类）
        <a href="{:url('qiyicontract.tenantpanel/shopgoods')}" class="pull-right">返回列表</a>
    </div>
    {/if}

    <form method="post" class="well" id="shopgoods-form" onsubmit="return QiyiShopSync();">
        <input type="hidden" name="action" value="{if $isEdit}edit{else /}add{/if}">
        {if $isEdit}<input type="hidden" name="id" value="{$editRow.id}">{/if}

        <div class="form-group">
            <label><span class="text-danger">*</span> 分类名称</label>
            <select class="form-control" name="type_id" required>
                <option value="">请选择分类</option>
                {volist name="types" id="t"}
                <option value="{$t.id}" {if $editRow.type_id==$t.id}selected{/if}>{$t.name|htmlentities}</option>
                {/volist}
            </select>
        </div>
        <div class="form-group">
            <label><span class="text-danger">*</span> 名称</label>
            <input class="form-control" name="name" required value="{$editRow.name|default=''|htmlentities}">
        </div>
        <div class="form-group">
            <label><span class="text-danger">*</span> 封面</label>
            <div class="input-group">
                <input class="form-control" name="image" id="c-shop-image" required value="{$editRow.image|default=''|htmlentities}">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" class="btn btn-primary fachoose" data-input-id="c-shop-image" data-mimetype="image/*" data-multiple="false" data-url="{:url('user/attachment')}"><i class="fa fa-list"></i> 选择图片</button></span>
                    <span><button type="button" class="btn btn-danger faupload" data-input-id="c-shop-image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false"><i class="fa fa-upload"></i> 上传</button></span>
                </div>
            </div>
            <img class="thumb-preview{if $editRow.image} show{/if}" id="shop-image-preview" src="{$editRow.image|default=''|htmlentities}" alt="">
            <p class="help-danger">*注：封面大小建议 140×110</p>
        </div>
        <div class="form-group">
            <label>详情图</label>
            <div class="input-group">
                <input class="form-control" name="images" id="c-shop-images" value="{$editRow.images|default=''|htmlentities}">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" class="btn btn-primary fachoose" data-input-id="c-shop-images" data-mimetype="image/*" data-multiple="false" data-url="{:url('user/attachment')}"><i class="fa fa-list"></i> 选择图片</button></span>
                    <span><button type="button" class="btn btn-danger faupload" data-input-id="c-shop-images" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false"><i class="fa fa-upload"></i> 上传</button></span>
                </div>
            </div>
            <img class="thumb-preview{if $editRow.images} show{/if}" id="shop-images-preview" src="{$editRow.images|default=''|htmlentities}" alt="">
            <p class="help-danger">*注：详情图大小建议 414×260</p>
        </div>
        <div class="form-group">
            <label>介绍</label>
            <textarea class="form-control" name="summary" rows="3">{$editRow.summary|default=''|htmlentities}</textarea>
        </div>
        <div class="form-group">
            <label><span class="text-danger">*</span> 原价</label>
            <input class="form-control" name="price_origin" required value="{$editRow.price_origin|default=''|htmlentities}">
        </div>
        <div class="form-group">
            <label><span class="text-danger">*</span> 现价（积分）</label>
            <input class="form-control" name="price_points" type="number" required value="{$editRow.price_points|default=''}">
        </div>
        <div class="form-group">
            <label><span class="text-danger">*</span> 商品类型</label>
            <label class="radio-inline"><input type="radio" name="goods_type" value="physical" {if !isset($editRow.goods_type) || $editRow.goods_type!='virtual'}checked{/if}> 实物商品</label>
            <label class="radio-inline"><input type="radio" name="goods_type" value="virtual" {if isset($editRow.goods_type) && $editRow.goods_type=='virtual'}checked{/if}> 虚拟商品</label>
            <span class="help-block">实物需填写收货地址；虚拟兑换无需收货地址</span>
        </div>
        <div class="form-group">
            <label>库存</label>
            <input class="form-control" name="stock" type="number" value="{$editRow.stock|default='0'}">
        </div>
        <div class="form-group">
            <label><span class="text-danger">*</span> 详情</label>
            <textarea id="shop-content" name="content" class="form-control" rows="12">{$editRow.content|default=''|htmlentities}</textarea>
            <div id="shop-char-count" style="text-align:right;color:#666;margin-top:6px;font-size:12px;">字符统计：0</div>
        </div>
        <div class="form-group">
            <label><span class="text-danger">*</span> 排序</label>
            <input class="form-control" name="weigh" type="number" required value="{$editRow.weigh|default='255'}">
            <span class="help-block">值越大越在后面显示</span>
        </div>
        <div class="form-group">
            <label>是否启用</label>
            <label class="radio-inline"><input type="radio" name="status" value="hidden" {if $editRow.status!='normal'}checked{/if}> 否</label>
            <label class="radio-inline"><input type="radio" name="status" value="normal" {if $editRow.status=='normal'}checked{/if}> 是</label>
        </div>
        <button class="btn btn-primary" type="submit">{if $isEdit}提交保存{else /}提交{/if}</button>
        <a class="btn btn-default" href="{:url('qiyicontract.tenantpanel/shopgoods')}">返回列表</a>
    </form>

{else /}
    <div class="qiyi-toolbar">
        <form class="form-inline" method="get" action="{:url('qiyicontract.tenantpanel/shopgoods')}" style="margin:0;">
            <div class="form-group" style="margin-right:8px;">
                <label>分类</label>
                <select class="form-control input-sm" name="type_id">
                    <option value="0">全部</option>
                    {volist name="types" id="t"}
                    <option value="{$t.id}" {if $filterType==$t.id}selected{/if}>{$t.name|htmlentities}</option>
                    {/volist}
                </select>
            </div>
            <div class="form-group" style="margin-right:8px;">
                <label>名称</label>
                <input class="form-control input-sm" name="name" value="{$kw|htmlentities}">
            </div>
            <div class="form-group" style="margin-right:8px;">
                <label>每页</label>
                <select class="form-control input-sm" name="pagesize" onchange="this.form.submit()">
                    {volist name="pageSizeOptions" id="ps"}
                    <option value="{$ps}" {if $pageSize==$ps}selected{/if}>{$ps}</option>
                    {/volist}
                </select>
            </div>
            <input type="hidden" name="page" value="1">
            <button class="btn btn-default btn-sm" type="submit"><i class="fa fa-search"></i> 搜索</button>
        </form>
        <a class="btn btn-success btn-sm" href="{:url('qiyicontract.tenantpanel/shopgoods')}?add=1"><i class="fa fa-plus"></i> 新增商品</a>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">商品列表</div>
        <div class="panel-body" style="overflow:auto;">
            <table class="table table-bordered table-striped text-center">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>分类名称</th>
                    <th>名称</th>
                    <th>封面</th>
                    <th>原价</th>
                    <th>现价</th>
                    <th>类型</th>
                    <th>排序</th>
                    <th>是否启用</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {volist name="list" id="vo"}
                <tr>
                    <td>{$vo.id}</td>
                    <td>{$vo.type_name|htmlentities}</td>
                    <td>{$vo.name|htmlentities}</td>
                    <td>{if $vo.image}<img src="{$vo.image|htmlentities}" style="max-width:100px;max-height:70px;">{else /}-{/if}</td>
                    <td>{$vo.price_origin}</td>
                    <td>{$vo.price_points}</td>
                    <td>{if isset($vo.goods_type) && $vo.goods_type=='virtual'}<span class="label label-info">虚拟</span>{else /}<span class="label label-primary">实物</span>{/if}</td>
                    <td>{$vo.weigh}</td>
                    <td>{if $vo.status=='normal'}<span class="label label-success">是</span>{else /}<span class="label label-default">否</span>{/if}</td>
                    <td>
                        <a class="btn btn-xs btn-primary" href="{:url('qiyicontract.tenantpanel/shopgoods')}?edit={$vo.id}">编辑</a>
                        <form method="post" style="display:inline" onsubmit="return confirm('确认删除？')">
                            <input type="hidden" name="action" value="del">
                            <input type="hidden" name="id" value="{$vo.id}">
                            <button class="btn btn-xs btn-danger" type="submit">删除</button>
                        </form>
                    </td>
                </tr>
                {/volist}
                {empty name="list"}
                <tr><td colspan="10" class="text-muted">暂无商品，请点击「新增商品」</td></tr>
                {/empty}
                </tbody>
            </table>
            <div class="qiyi-pager">
                <span class="muted">第 {$page}/{$pages} 页（共 {$total} 条，每页 {$pageSize} 条）</span>
                <div class="btns">
                    {if $page > 1}
                    <a href="{:url('qiyicontract.tenantpanel/shopgoods',['page'=>$page-1,'pagesize'=>$pageSize,'type_id'=>$filterType,'name'=>$kw])}">上一页</a>
                    {else /}
                    <span class="disabled">上一页</span>
                    {/if}
                    <span class="cur">{$page}</span>
                    {if $page < $pages}
                    <a href="{:url('qiyicontract.tenantpanel/shopgoods',['page'=>$page+1,'pagesize'=>$pageSize,'type_id'=>$filterType,'name'=>$kw])}">下一页</a>
                    {else /}
                    <span class="disabled">下一页</span>
                    {/if}
                </div>
            </div>
        </div>
    </div>
{/if}
</div>

{if $showEditor}
<script>
(function () {
  function bindPreview(inputId, previewId) {
    var input = document.getElementById(inputId);
    var preview = document.getElementById(previewId);
    if (!input || !preview) return;
    function sync() {
      var v = (input.value || '').trim();
      if (v) { preview.src = v; preview.classList.add('show'); }
      else { preview.removeAttribute('src'); preview.classList.remove('show'); }
    }
    input.addEventListener('change', sync);
    input.addEventListener('input', sync);
    setInterval(sync, 800);
  }
  bindPreview('c-shop-image', 'shop-image-preview');
  bindPreview('c-shop-images', 'shop-images-preview');

  var uploadUrl = "{:url('ajax/upload')}";
  var editorJs = "__CDN__/assets/addons/qiyicontract/js/qiyi-editor.js?v=20260727a";
  var galleryUrl = "{:url('user/attachment')}";
  function loadScript(src, cb) {
    var s = document.createElement('script');
    s.src = src;
    s.onload = function () { cb && cb(); };
    document.head.appendChild(s);
  }
  function waitJquery(cb) {
    if (window.jQuery) return cb(window.jQuery);
    var n = 0;
    var t = setInterval(function () {
      n++;
      if (window.jQuery) { clearInterval(t); cb(window.jQuery); }
      else if (n > 120) clearInterval(t);
    }, 50);
  }
  window.QiyiShopSync = function () {
    if (window.QiyiEditor) QiyiEditor.sync('#shop-content');
    return true;
  };
  waitJquery(function () {
    function startEditor() {
      if (!window.QiyiEditor) { loadScript(editorJs, startEditor); return; }
      QiyiEditor.init('#shop-content', {
        height: 360,
        charCount: '#shop-char-count',
        placeholder: '请输入商品详情…',
        uploadUrl: uploadUrl,
        galleryUrl: galleryUrl
      });
    }
    startEditor();
  });
})();
</script>
{/if}