{layout name="layout/food" /}
<link rel="stylesheet" href="/addons/food/css/hema.goods.css?v={$version}">
<link rel="stylesheet" href="/assets/plugins/umeditor/themes/default/css/umeditor.css?v={$version}">
<div class="row-content am-cf">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title am-fl">编辑商品</div>
                </div>
                <form id="my-form" class="am-form tpl-form-line-form" method="post">
                    <div class="widget-body">
                        <fieldset>
                        <div class="j-tabs am-tabs" data-am-tabs="{noSwipe: 1}">
                            <ul class="am-tabs-nav am-nav am-nav-tabs">
                                <li class="am-active"><a href="#tab1">基本信息</a></li>
                                <li><a href="#tab2">商品规格</a></li>
                                <li><a href="#tab3">商品详情</a></li>
                                <li><a href="#tab4">其他设置</a></li>
                            </ul>
                            <div class="am-tabs-bd am-padding-xs hm-p-t-20">
                                <div class="am-tab-panel am-padding-0 am-active" id="tab1">
                                    <div class="am-form-group">
                                        <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">商品名称 </label>
                                        <div class="am-u-sm-9 am-u-end">
                                            <input type="text" class="tpl-form-input" name="data[goods_name]" value="{$model['goods_name']}" required>
                                        </div>
                                    </div>
                                    <div class="am-form-group">
                                        <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">商品分类 </label>
                                        <div class="am-u-sm-9 am-u-end">
                                            <select name="data[category_id]" required  style="width:200px;">
                                                {if isset($category)}
                                                    {foreach $category as $item}
                                                    <option value="{$item['category_id']}" {$model['category_id'] == $item['category_id'] ? 'selected' : ''}>
                                                        {$item['name']}</option>
                                                    {/foreach}
                                                {/if}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="am-form-group">
                                        <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">商品图片 </label>
                                        <div class="am-u-sm-9 am-u-end">
                                            <div class="am-form-file">
                                                <button type="button"
                                                        class="upload-file am-btn am-btn-secondary am-radius">
                                                    <i class="am-icon-cloud-upload"></i> 选择图片
                                                </button>
                                                <div class="uploader-list am-cf">
                                                    {foreach $model['image'] as $item}
                                                        <div class="file-item">
                                                            <a href="{$item['url']}" title="点击查看大图" target="_blank">
                                                                <img src="{$item['url']}">
                                                            </a>
                                                            <input type="hidden" name="data[images][]"
                                                                   value="{$item['image_id']}">
                                                            <i class="iconfont iconshanchu file-item-delete"></i>
                                                        </div>
                                                    {/foreach}
                                                </div>
                                            </div>
                                            <div class="help-block am-margin-top-sm">
                                                <small>尺寸750x750像素以上，大小2M以下 (可拖拽图片调整显示顺序 )</small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="am-form-group">
                                        <label class="am-u-sm-3 am-u-lg-2 am-form-label">商品卖点 </label>
                                        <div class="am-u-sm-9 am-u-end">
                                            <input type="text" class="tpl-form-input" name="data[selling_point]"
                                                   value="{$model['selling_point']}">
                                            <small>选填，商品卖点简述，例如：此款商品美观大方 性价比较高 不容错过</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="am-tab-panel am-padding-0" id="tab2">
                                    <div class="am-form-group">
                                        <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">商品规格 </label>
                                        <div class="am-u-sm-9 am-u-end">
                                            <label class="am-radio-inline">
                                                <input type="radio" name="data[spec_type]" value="10" data-am-ucheck
                                                    {$model['spec_type'] == 10 ? 'checked' : ''}>
                                                单规格
                                            </label>
                                            <label class="am-radio-inline">
                                                <input type="radio" name="data[spec_type]" value="20" data-am-ucheck
                                                    {$model['spec_type'] == 20 ? 'checked' : ''}>
                                                <span>多规格</span>
                                            </label>
                                        </div>
                                    </div>
        
                                    <!-- 商品多规格 -->
                                    <div id="many-app" v-cloak class="goods-spec-many am-form-group"
                                         v-bind:style="{display: '<?= $model['spec_type'] == 20 ? 'block' : 'none' ?>'}">
                                        <div class="goods-spec-box am-u-sm-9 am-u-sm-push-2 am-u-end">
                                            <!-- 规格属性 -->
                                            <div class="spec-attr">
                                                <div v-for="(item, index) in spec_attr" class="spec-group-item">
                                                    <div class="spec-group-name">
                                                        <span>{{ item.group_name }}</span>
                                                        <i v-if="!isSpecLocked" @click="onDeleteGroup(index)"
                                                           class="spec-group-delete iconfont iconshanchu" title="点击删除"></i>
                                                    </div>
                                                    <div class="spec-list am-cf">
                                                        <div v-for="(val, i) in item.spec_items" class="spec-item am-fl">
                                                            <span>{{ val.spec_value }}</span>
                                                            <i v-if="!isSpecLocked" @click="onDeleteValue(index, i)"
                                                               class="spec-item-delete iconfont iconshanchu" title="点击删除"></i>
                                                        </div>
                                                        <div v-if="!isSpecLocked" class="spec-item-add am-cf am-fl">
                                                            <input type="text" v-model="item.tempValue"
                                                                   class="ipt-specItem am-fl am-field-valid">
                                                            <button @click="onSubmitAddValue(index)" type="button"
                                                                    class="am-btn am-fl">添加
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
        
                                            <!-- 添加规格组：按钮 -->
                                            <div v-if="showAddGroupBtn && !isSpecLocked" class="spec-group-button">
                                                <button @click="onToggleAddGroupForm" type="button"
                                                        class="am-btn">添加规格
                                                </button>
                                            </div>
        
                                            <!-- 添加规格：表单 -->
                                            <div v-if="showAddGroupForm" class="spec-group-add">
                                                <div class="spec-group-add-item am-form-group">
                                                    <label class="am-form-label form-require">规格名 </label>
                                                    <input type="text" class="input-specName tpl-form-input"
                                                           v-model="addGroupFrom.specName"
                                                           placeholder="请输入规格名称">
                                                </div>
                                                <div class="spec-group-add-item am-form-group">
                                                    <label class="am-form-label form-require">规格值 </label>
                                                    <input type="text" class="input-specValue tpl-form-input"
                                                           v-model="addGroupFrom.specValue"
                                                           placeholder="请输入规格值">
                                                </div>
                                                <div class="spec-group-add-item am-margin-top">
                                                    <button @click="onSubmitAddGroup" type="button"
                                                            class="am-btn am-btn-xs am-btn-secondary"> 确定
                                                    </button>
                                                    <button @click="onToggleAddGroupForm" type="button"
                                                            class="am-btn am-btn-xs am-btn-default"> 取消
                                                    </button>
                                                </div>
                                            </div>
        
                                            <!-- 商品多规格sku信息 -->
                                            <div v-if="spec_list.length > 0" class="goods-sku am-scrollable-horizontal">
                                                <!-- 分割线 -->
                                                <div class="goods-spec-line am-margin-top-lg am-margin-bottom-lg"></div>
                                                <!-- sku 批量设置 -->
                                                <div class="spec-batch am-form-inline">
                                                    <div class="am-form-group">
                                                        <label class="am-form-label">批量设置</label>
                                                    </div>
                                                    <div class="am-form-group">
                                                        <input type="number" v-model="batchData.goods_price" placeholder="商品售价">
                                                    </div>
                                                    <div class="am-form-group">
                                                        <input type="number" v-model="batchData.line_price" placeholder="划线价">
                                                    </div>
                                                    <div class="am-form-group">
                                                        <input type="text" v-model="batchData.stock_num" placeholder="商品库存">
                                                    </div>
                                                    <div class="am-form-group">
                                                        <button @click="onSubmitBatchData" type="button"
                                                                class="am-btn am-btn-sm am-btn-secondaryam-radius">确定
                                                        </button>
                                                    </div>
                                                </div>
                                                <!-- sku table -->
                                                <table class="spec-sku-tabel am-table am-table-bordered am-table-centered
                                             am-margin-bottom-xs am-text-nowrap">
                                                    <tbody>
                                                    <tr>
                                                        <th v-for="item in spec_attr">{{ item.group_name }}</th>
                                                        <th>规格图片</th>
                                                        <th>商品售价</th>
                                                        <th>划线价</th>
                                                        <th>商品库存</th>
                                                    </tr>
                                                    <tr v-for="(item, index) in spec_list">
                                                        <td v-for="td in item.rows" class="td-spec-value am-text-middle"
                                                            :rowspan="td.rowspan">
                                                            {{ td.spec_value }}
                                                        </td>
                                                        <td class="am-text-middle spec-image">
                                                            <div v-if="item.form.image_id" class="j-selectImg data-image"
                                                                 v-bind:data-index="index">
                                                                <img :src="item.form.image_url" alt="">
                                                                <i class="iconfont iconshanchu image-delete"
                                                                   @click.stop="onDeleteSkuImage(index)"></i>
                                                            </div>
                                                            <div v-else class="j-selectImg upload-image"
                                                                 v-bind:data-index="index">
                                                                <i class="iconfont icontianjia"></i>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <input type="number" class="ipt-w80" name="goods_price"
                                                                   v-model="item.form.goods_price" required>
                                                        </td>
                                                        <td>
                                                            <input type="number" class="ipt-w80" name="line_price"
                                                                   v-model="item.form.line_price">
                                                        </td>
                                                        <td>
                                                            <input type="text" class="ipt-goods-no" name="stock_num"
                                                                   v-model="item.form.stock_num">
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
        
                                    <!-- 商品单规格 -->
                                    <div class="goods-spec-single"
                                         style="display: <?= $model['spec_type'] == 10 ? 'block' : 'none' ?>;">
                                        <div class="am-form-group">
                                            <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">商品售价 </label>
                                            <div class="am-u-sm-9 am-u-end">
                                                <input type="number" class="tpl-form-input" name="data[spec][goods_price]"
                                                       value="{$model['spec'][0]['goods_price']}" required>
                                            </div>
                                        </div>
                                        <div class="am-form-group">
                                            <label class="am-u-sm-3 am-u-lg-2 am-form-label">商品划线价 </label>
                                            <div class="am-u-sm-9 am-u-end">
                                                <input type="number" class="tpl-form-input" name="data[spec][line_price]"
                                                       value="{$model['spec'][0]['line_price']}">
                                            </div>
                                        </div>
                                        <div class="am-form-group">
                                            <label class="am-u-sm-3 am-u-lg-2 am-form-label">商品库存 </label>
                                            <div class="am-u-sm-9 am-u-end">
                                                <input type="text" class="tpl-form-input" name="data[spec][stock_num]"
                                                       value="{$model['spec'][0]['stock_num']}">
                                                <small>商品库存开启有效，<a href="{:url('food.setting/other')}">去设置</a></small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="am-tab-panel am-padding-0" id="tab3">
                                    <div class="am-form-group">
                                        <label class="am-u-sm-3 am-u-lg-2 am-form-label">商品详情 </label>
                                        <div class="am-u-sm-9 am-u-end">
                                            <!-- 加载编辑器的容器 -->
                                            <textarea id="container" name="data[content]">{$model['content']}</textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="am-tab-panel am-padding-0" id="tab4">
                                    <div class="am-form-group">
                                        <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">商品状态 </label>
                                        <div class="am-u-sm-9 am-u-end">
                                            <label class="am-radio-inline">
                                                <input type="radio" name="data[goods_status]" value="10" data-am-ucheck
                                                    {$model['goods_status']['value'] == 10 ? 'checked' : ''} >
                                                上架
                                            </label>
                                            <label class="am-radio-inline">
                                                <input type="radio" name="data[goods_status]" value="20" data-am-ucheck
                                                    {$model['goods_status']['value'] == 20 ? 'checked' : ''} >
                                                下架
                                            </label>
                                        </div>
                                    </div>
                                    <div class="am-form-group">
                                        <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">是否推荐 </label>
                                        <div class="am-u-sm-9 am-u-end">
                                            <label class="am-radio-inline">
                                                <input type="radio" name="data[is_recommend]" value="0" data-am-ucheck
                                                    {$model['is_recommend']['value'] == 0 ? 'checked' : ''} >
                                                否
                                            </label>
                                            <label class="am-radio-inline">
                                                <input type="radio" name="data[is_recommend]" value="1" data-am-ucheck
                                                    {$model['is_recommend']['value'] == 1 ? 'checked' : ''} >
                                                是
                                            </label>
                                        </div>
                                    </div>
                                    <div class="am-form-group">
                                        <label class="am-u-sm-3 am-u-lg-2 am-form-label">起售数量 </label>
                                        <div class="am-u-sm-9 am-u-end">
                                            <input type="number" min="1" class="tpl-form-input" value="{$model['start_sale']}" name="data[start_sale]" >
                                        </div>
                                    </div>
                                    <div class="am-form-group">
                                        <label class="am-u-sm-3 am-u-lg-2 am-form-label">包装费用 </label>
                                        <div class="am-u-sm-9 am-u-end">
                                            <input type="number" class="tpl-form-input" value="{$model['pack_price']}" name="data[pack_price]" >
                                                <small>外卖、自取有效，0=不收取</small>
                                        </div>
                                    </div>
                                    <div class="am-form-group">
                                        <label class="am-u-sm-3 am-u-lg-2 am-form-label">初始销量</label>
                                        <div class="am-u-sm-9 am-u-end">
                                            <input type="number" class="tpl-form-input" name="data[sales_initial]"
                                                   value="{$model['sales_initial']}">
                                        </div>
                                    </div>
                                    <div class="am-form-group">
                                        <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">商品排序 </label>
                                        <div class="am-u-sm-9 am-u-end">
                                            <input type="number" class="tpl-form-input" name="data[goods_sort]"
                                                   value="{$model['goods_sort']}" required>
                                            <small>数字越小越靠前</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 表单提交按钮 -->
                        <div class="am-form-group">
                            <div class="am-u-sm-9 am-u-sm-push-3 am-margin-top-lg">
                                <button type="submit" class="j-submit am-btn am-btn-secondary am-btn-sm">提交
                                </button>
                            </div>
                        </div>
                        </fieldset>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 图片文件列表模板 -->
{include file="../addons/upload/view/template/tpl_file_item_id.html" /}
<!-- 文件库弹窗 -->
{include file="../addons/upload/view/template/file_library.html" /}
<script src="/assets/plugins/vue/vue.min.js?v={$version}"></script>
<script src="/addons/food/js/ddsort.js?v={$version}"></script>
<script src="/assets/plugins/umeditor/umeditor.config.js?v={$version}"></script>
<script src="/assets/plugins/umeditor/umeditor.min.js?v={$version}"></script>
<script src="/addons/food/js/goods.spec.js?v={$version}"></script>
<script>
    $(function () {
        // 富文本编辑器
        UM.getEditor('container', {
            initialFrameWidth: 375 + 15,
            initialFrameHeight: 600
        });
        // 选择图片
        $('.upload-file').selectImages({
            name: 'data[images][]'
            , multiple: true
        });
        // 图片列表拖动
        $('.uploader-list').DDSort({
            target: '.file-item',
            delay: 100, // 延时处理，默认为 50 ms，防止手抖点击 A 链接无效
            floatStyle: {
                'border': '1px solid #ccc',
                'background-color': '#fff'
            }
        });
        // 切换单/多规格
        $('input:radio[name="data[spec_type]"]').change(function (e) {
            var $goodsSpecMany = $('.goods-spec-many')
                , $goodsSpecSingle = $('.goods-spec-single');
            if (e.currentTarget.value === '10') {
                $goodsSpecMany.hide() && $goodsSpecSingle.show();
            } else {
                $goodsSpecMany.show() && $goodsSpecSingle.hide();
            }
        });
        // 注册商品多规格组件
        var specMany = new GoodsSpec({
            el: '#many-app',
            baseData: <?= $specData ?>
        });
        /**
         * 表单验证提交
         * @type {*}
         */
        $('#my-form').formPost({
            // 获取多规格sku数据
            buildData: function () {
                var specData = specMany.appVue.getData();
                return {
                    data: {
                        spec_many: {
                            spec_attr: specData.spec_attr,
                            spec_list: specData.spec_list
                        }
                    }
                };
            },
            // 自定义验证
            validation: function () {
                var specType = $('input:radio[name="data[spec_type]"]:checked').val();
                if (specType === '20') {
                    var isEmpty = specMany.appVue.isEmptySkuList();
                    isEmpty === true && layer.msg('商品规格不能为空');
                    return !isEmpty;
                }
                return true;
            }
        });
    });
</script>