{extend name="app/shop/view/base.html"/}
{block name="resources"}
<style>
    .form-row{margin-top: 0;}
</style>
{/block}
{block name="main"}
<div class="layui-form">
    <div class="layui-card card-common card-brief">
        <div class="layui-card-header">
            <span class="card-title">开通卡券能力</span>
        </div>
        <div class="layui-card-body">
            <div class="layui-form-item">
                <label class="layui-form-label">商户名称：</label>
                <div class="layui-input-block ">
                    <input type="text" name="brand_name" autocomplete="off" class="layui-input len-long" value="{$info.brand_name ?? ''}">
                </div>
                <div class="word-aux">
                    <p> 可为店铺名、品牌名等，请确保与《微信卡券商户授权函》内填写的“商户名称”保持一致，此名称将显示在卡券券面上。</p>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商家LOGO：</label>
                <div class="layui-input-block img-upload">
                    <div class="upload-img-block">
                        <div class='upload-img-box {if condition="$info && $info.logo_url"}hover{/if}'>
                            <div class="upload-default" id="logoUrl" >
                                {if condition="$info && $info.logo_url"}
                                <div id="preview_logoUrl" class="preview_img">
                                    <img layer-src src="{:img($info.logo_url)}" class="img_prev"/>
                                </div>
                                {else/}
                                <div class="upload">
                                    <i class="iconfont iconshangchuan"></i>
                                    <p>点击上传</p>
                                </div>
                                {/if}
                            </div>
                            <div class="operation">
                                <div>
                                    <i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
                                    <i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
                                </div>
                                <div class="replace_img js-replace">点击替换</div>
                            </div>
                            <input type="hidden" class="layui-input" name="logo_url" value="{$info.logo_url ?? ''}"/>
                        </div>
                    </div>
                </div>
                <div class="word-aux">
                    <p>可为店铺照片或品牌Logo，请确保该Logo与子商户名称保持一致。</p>
                    <p>图片建议尺寸：300像素*300像素，大小不超过5MB。支持.jpg等格式的正方形照片。</p>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">经营分类：</label>
                <div class="layui-input-block">
                    <div class="layui-input-inline len-mid area-select">
                        <select name="city_id"  lay-filter="primary_category_id" lay-verify="primary_category_id">
                            <option value="">请选择一级分类</option>
                        </select>
                    </div>
                    <div class="layui-input-inline len-mid area-select">
                        <select name="district_id"  lay-filter="secondary_category_id" lay-verify="secondary_category_id">
                            <option value="">请选择二级分类</option>
                        </select>
                    </div>
                </div>
                <div class="word-aux">请根据商户实际提供的服务或商品选择经营类目。</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">授权函：</label>
                <div class="layui-input-block img-upload">
                    <div class="upload-img-block">
                        <div class='upload-img-box {if condition="$info && $info.protocol_url"}hover{/if}'>
                            <div class="upload-default" id="protocol" >
                                {if condition="$info && $info.protocol_url"}
                                <div id="protocol_protocol" class="preview_img">
                                    <img layer-src src="{:img($info.protocol_url)}" class="img_prev"/>
                                </div>
                                {else/}
                                <div class="upload">
                                    <i class="iconfont iconshangchuan"></i>
                                    <p>点击上传</p>
                                </div>
                                {/if}
                            </div>
                            <div class="operation">
                                <div>
                                    <i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
                                    <i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
                                </div>
                                <div class="replace_img js-replace">点击替换</div>
                            </div>
                            <input type="hidden" class="layui-input" name="protocol" value="{$info.protocol ?? ''}"/>
                        </div>
                    </div>
                </div>
                <div class="word-aux">
                    <p>若子商户为无公章的个体工商户，授权函可不盖章，但仍需经营者签名（与身份证一致）</p>
                    <p>手填完整后，上传彩色扫描件或彩照。支持.jpg等格式，大小不超过5M。下载模版<a href="https://mp.weixin.qq.com/zh_CN/htmledition/comm_htmledition/res/cardticket/wx_cardticket_assist_agent.pdf?token=999280899&lang=zh_CN">《微信卡券商户授权函》</a></p>
                    <p>同时请在下方《个体工商户营业执照》、经营者身份证处上传相应资料。</p>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">授权时间：</label>
                <div class="layui-input-block ">
                    <input type="text" name="brand_name" id="endTime" autocomplete="off" class="layui-input len-long" value="{$info.endTime ?? ''}">
                </div>
                <div class="word-aux">用户授权截止时间</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">省份证：</label>
                <div class="layui-input-block img-upload">
                    <div class="upload-img-block">
                        <div class='upload-img-box {if condition="$info && $info.agreement_media_url"}hover{/if}'>
                            <div class="upload-default" id="agreement" >
                                {if condition="$info && $info.agreement_media_url"}
                                <div id="preview_agreement" class="preview_img">
                                    <img layer-src src="{:img($info.agreement_media_url)}" class="img_prev"/>
                                </div>
                                {else/}
                                <div class="upload">
                                    <i class="iconfont iconshangchuan"></i>
                                    <p>点击上传</p>
                                </div>
                                {/if}
                            </div>
                            <div class="operation">
                                <div>
                                    <i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
                                    <i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
                                </div>
                                <div class="replace_img js-replace">点击替换</div>
                            </div>
                            <input type="hidden" class="layui-input" name="protocol" value="{$info.agreement_media_id ?? ''}"/>
                        </div>
                    </div>
                </div>
                <div class="word-aux">营业执照或个体工商户营业执照彩照或扫描件</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">营运执照：</label>
                <div class="layui-input-block img-upload">
                    <div class="upload-img-block">
                        <div class='upload-img-box {if condition="$info && $info.operator_media_url"}hover{/if}'>
                            <div class="upload-default" id="operator_media" >
                                {if condition="$info && $info.protocol_url"}
                                <div id="preview_operator_media" class="preview_img">
                                    <img layer-src src="{:img($info.operator_media_url)}" class="img_prev"/>
                                </div>
                                {else/}
                                <div class="upload">
                                    <i class="iconfont iconshangchuan"></i>
                                    <p>点击上传</p>
                                </div>
                                {/if}
                            </div>
                            <div class="operation">
                                <div>
                                    <i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
                                    <i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
                                </div>
                                <div class="replace_img js-replace">点击替换</div>
                            </div>
                            <input type="hidden" class="layui-input" name="protocol" value="{$info.operator_media_id ?? ''}"/>
                        </div>
                    </div>
                </div>
                <div class="word-aux">营业执照内登记的经营者身份证彩照或扫描件</div>
            </div>
        </div>
    </div>
    <div class="single-filter-box">
        <div class="form-row">
            <button class="layui-btn" lay-submit lay-filter="save">保存</button>
            <button type="reset" class="layui-btn layui-btn-primary" onclick="back()">返回</button>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    layui.use(['form','laydate'], function () {
        var form = layui.form;
        var laydate = layui.laydate;
        form.render();
        var endTime

        laydate.render({
             elem: '#endTime'
            ,value: endTime ? ns.time_to_date(endTime,'YYYY-MM-DD') : ''
        });


       var upload = new Upload({
            elem: '#logoUrl',
            callback: function(res) {
                // $("input[name=cert_image]").val(res.data.image_id);//坐标
                // $("input[name=cert_image_show_image]").val(res.data.pic_path);//坐标
            }
        });


        var protocol = new Upload({
            url:ns.url("wxoplatform://shop/card/image"),
            elem: '#protocol',
            callback: function(res) {
                // $("input[name=cert_image]").val(res.data.image_id);//坐标
                // $("input[name=cert_image_show_image]").val(res.data.pic_path);//坐标
            }
        });

        var operator_media = new Upload({
            url:ns.url("wxoplatform://shop/card/image"),
            elem: '#operator_media',
            callback: function(res) {
                // $("input[name=cert_image]").val(res.data.image_id);//坐标
                // $("input[name=cert_image_show_image]").val(res.data.pic_path);//坐标
            }
        });

        var preview_operator_media = new Upload({
            url:ns.url("wxoplatform://shop/card/image"),
            elem: '#preview_operator_media',
            callback: function(res) {
                // $("input[name=cert_image]").val(res.data.image_id);//坐标
                // $("input[name=cert_image_show_image]").val(res.data.pic_path);//坐标
            }
        });


        form.on('submit(save)', function(data) {
            // if (repeat_flag) return;
            // repeat_flag = true;
            //
            let field = data.field;
            // if(bankType == 1)
            //     field.bank_user_name = field.bank_user_name_weixin;
            // else if(bankType == 2){
            //     field.bank_user_name = field.bank_user_name_alipay;
            //     field.bank_type_account = field.bank_type_account_alipay;
            // }
            //
            // if(!isSettlementRate)
            //     field.settlement_rate = 0;
            $.ajax({
                type: 'POST',
                dataType: 'JSON',
                url: ns.url("wxoplatform://shop/card/submerchant"),
                data: field,
                success: function(res) {
                    // layer.msg(res.message);
                    // repeat_flag = false;
                    // if (res.code == 0) {
                    //     location.reload();
                    // }
                }
            });
        });



    });
    function back() {
        location.href = "{:addon_url('wechat://shop/wechat/setting')}";
    }
</script>
{/block}