{extend name="base" /}
{block name="style"}
<link rel="stylesheet" href="__ADMIN__/assets/vendors/dropzone/css/dropzone.css">
<style>
    .dropzone {
        width: 190px;
    }
</style>
{/block}
{block name="main"}
<div id="page-container">
    <div class="page-content main-content my-main-content">
        <div class="main-content-inner">
            <form class="form" action="{$admin_root}/goods" method="post">
                <!-- 新鲜的图 -->
                <input type="hidden" name="qrcodeImage" id="image"/>
                <!-- 原始的图 -->
                <input type="hidden" name="sourceImage" id="sourceImage" value="{$goods.image|default=''}"/>
                <!-- 显示的图 -->
                <input type="hidden" id="showImage" value="{:createOutFileUrl($goods.image??'')}"/>

                <input type="hidden" name="id" value="{$goods.id|default=''}"/>
                <div class="row">
                    <!-- data 表格 -->
                    <div class="col-lg-8 col-sm-12">
                        <div class="card">
                            <div class="card-body">
                                <h5>商品信息</h5>

<!--                                <b class="text-muted mb-3 mt-4 d-block">类别</b>-->

                                <div class="form-group">
                                    <label>类别</label>
                                    <select class="form-control" name="cls_id">
                                        {foreach $goodsCls as $cls}
                                            <option {if isset($goods.cls_id) && $goods.cls_id == $cls.id} checked {/if} value="{$cls->id}">{$cls->name}</option>
                                        {/foreach}
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label>名称</label>
                                    <input name="name" class="form-control" value="{$goods.name|default=''}">
                                </div>

                                <div class="form-group">
                                    <label>描述</label>
                                    <input name="descr" class="form-control" value="{$goods.descr|default=''}">
                                </div>

                                <div class="form-group">
                                    <label>成本</label>
                                    <input name="cost" class="form-control" value="{$goods.cost|default=''}">
                                </div>

                                <div class="form-group">
                                    <label>销售价</label>
                                    <input name="price" class="form-control" value="{$goods.price|default=''}">
                                </div>

                                <div class="form-group">
                                    <label>市场价</label>
                                    <input name="mprice" class="form-control" value="{$goods.mprice|default=''}">
                                </div>



                                <b class="text-muted mb-3 mt-4 d-block">图片</b>

                                <div class="mt-4">
                                    <div class="dropzone dropzone-light" id="qrcode">
                                        <div class="dz-default dz-message">
                                            <span><i class="ti-image"></i></span>
                                        </div>
                                    </div>
                                </div>

                                <b class="text-muted mb-3 mt-4 d-block">状态</b>

                                <div class="form-group">
                                    <div class="custom-control custom-radio primary-radio custom-control-inline">
                                        <input type="radio" value="0" {if isset($goods.status) && $goods.status === 0 || !isset($goods.status)} checked {/if} id="status1" name="status"
                                               class="custom-control-input">
                                        <label class="custom-control-label" for="status1">下架</label>
                                    </div>

                                    <div class="custom-control custom-radio primary-radio custom-control-inline">
                                        <input type="radio" value="1" id="status2" {if isset($goods.status) && $goods.status == 1 } checked {/if} name="status"
                                               class="custom-control-input">
                                        <label class="custom-control-label" for="status2">上架</label>
                                    </div>
                                </div>

                                <b class="text-muted mb-3 mt-4 d-block">发布类型</b>

                                <div class="form-group">
                                    <div class="custom-control custom-radio primary-radio custom-control-inline">
                                        <input type="radio" value="0" {if isset($goods.type) && $goods.type == '0' || !isset($goods.type)} checked {/if} id="type1" name="type"
                                               class="custom-control-input">
                                        <label class="custom-control-label" for="type1">连接</label>
                                    </div>

                                    <div class="custom-control custom-radio primary-radio custom-control-inline">
                                        <input type="radio" value="1" {if isset($goods.type) && $goods.type == '1'} checked {/if} id="type2" name="type"
                                               class="custom-control-input">
                                        <label class="custom-control-label" for="type2">html</label>
                                    </div>

                                    <div class="custom-control custom-radio primary-radio custom-control-inline">
                                        <input type="radio" value="2" {if isset($goods.type) && $goods.type == '2'} checked {/if} id="type3" name="type"
                                        class="custom-control-input">
                                        <label class="custom-control-label" for="type3">卡密</label>
                                    </div>

                                </div>

                                <div class="form-group type-item" {if  isset($goods.type) && $goods.type != '0' } style="display: none;" {/if}>
                                    <input type="text" name="url" value="{$goods.url|default=''}" placeholder="请填写发布连接" value="" class="form-control" />
                                </div>

                                <div class="form-group type-item" {if !isset($goods.type) || $goods.type != '1'} style="display: none;" {/if}>
                                    <div name="html" class="editor" >
                                        {$goods.html|default=''|raw}
                                    </div>
                                </div>

                                <small class="form-text text-muted">商品添加成功后列表添加卡密</small>


                                <button  type="submit" class="btn btn-primary ladda-button ladda_btn btn-fixed-w mt-4"
                                         data-style="expand-right">
                                    <span class="ladda-label">确认保存</span>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- data 表格 -->
                </div>
            </form>
        </div>
    </div>
</div>
{/block}
{block name='script'}
<script src="__ADMIN__/js/ckeditor.js"></script>
<script src="__ADMIN__/js/ckeditorInit.js"></script>
<script src="__ADMIN__/assets/vendors/dropzone/js/dropzone.js"></script>
<script>
    Dropzone.autoDiscover = false;
    $(function () {

        $f.ajaxSubmitCallback = function(data){
            if( data.code == 0 ){
                $alert.success('保存成功').then(function(){
                    location.href='{$admin_root}/goods';
                });
            }
        }

        $("input[name='type']").on('change',function(){
            var v = $(this).val();
            $(".type-item").hide();
            $(".type-item:eq("+v+")").show() ;
        })

        $('#qrcode').dropzone({
            url: "{$admin_root}/upload/image",
            paramName: 'image',
            init: function () {
                serverImageInit(this);
                this.on('removedfile', function (file) {
                    var deleteId = $("#image").val();
                    $("#image").prop('value','');
                    $api.get('{$admin_root}/upload/delete',{file:deleteId});
                    this.enable();
                })
            },
            maxFiles:1,
            acceptedFiles: "image/*",
            addRemoveLinks: true,
            dictCancelUpload: '取消',
            dictRemoveFile: '删除',
            sending:function(data,xhr){
                xhr.setRequestHeader('X-CSRF-TOKEN',$('meta[name="csrf-token"]').attr('content'));
            },
            success: function (file, data) {
                this.disable();

                refreshToken(function(){
                    if( data.code == 0 ){
                        $("#image").prop('value',data.data) ;
                    }
                });

                if (file.previewElement) {
                    return file.previewElement.classList.add("dz-success");
                }
            },
            error: function () {
                $("#image").prop('value','');
                refreshToken();
            },
        });
    });

    function serverImageInit(obj){
        var imageUrl = $("#showImage").val() ;
        console.log(imageUrl);
        if( !imageUrl ){
            console.log('有图还是无图');
            return false;
        }
        var mockFile = {
            name:imageUrl.split('/').pop(),
            status:"success",
            url:imageUrl,
            accepted:true,
            processing:true,
        };
        obj.disable();
        obj.emit("addedfile",mockFile);
        obj.emit("thumbnail",mockFile,imageUrl);
        obj.emit("complete",mockFile,imageUrl);
    }
</script>
{/block}