{extend name="app/shop/view/base.html"/}
{block name="resources"}
<style>
    .len-input {
        width: 100%;
        max-width: 120px;
    }

    .layui-form-item .layui-input-inline.end-time {
        float: none;
    }

    .desc {
        margin-bottom: 15px;
        border: 1px dashed #ff8143;
        padding: 5px 10px;
        background: #fff0e9;
        color: #ff8143;
        width: 65%;
    }

    .goods-title {
        display: flex;
        align-items: center;
    }

    .goods-title .goods-img {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 55px;
        height: 55px;
        margin-right: 5px;
    }

    .goods-title .goods-img img {
        max-height: 100%;
        max-width: 100%;
    }

    .goods-title .goods-name {
        flex: 1;
        line-height: 1.6;
    }

    .form-wrap {
        position: relative;
    }

    .layui-carousel {
        position: absolute;
        top: 15px;
        left: 1325px;
        background: #fff;
    }

    .goods_num {
        padding-left: 20px;
    }
    .member-select {
        position: absolute;
        left: 400px;
        top: 175px;
    }
    .member-select-add{
        border:1px solid #ff6a00;
        padding: 5px 10px;
    }
    .layui-unselect.layui-form-radio.layui-form-radioed i:after {
        background-color: #fff;
    }
    .layui-table-body {
        max-height: 530px;
    }
    .inline{width: 205px;}
    .layui-input{width: 205px;}
    .layui-btn-primary{height: 32px; line-height: 32px; position: absolute; right: 1px; top: 1px; border-width: 0; border-left-width: 1px;}
</style>
{/block}
{block name="main"}
<div class="layui-form form-wrap" lay-filter="areaform">
    <div class="layui-card card-common card-brief">
        <div class="layui-card-header">
            <div>
                <span class="card-title">关联店铺</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>选择店铺：</label>
            <div class="layui-input-block">
                <input type="text" name="username" disabled value="{$info.username??''}" lay-verify="required" autocomplete="off" class="layui-input len-long" onclick="addSite()">
                <input type="hidden" name="bing_site_id" lay-verify="required" value="{$info.site_id??''}">
                <button class="layui-btn layui-btn" onclick="addSite()">选择店铺</button>
            </div>
        </div>
    </div>
    <div class="layui-card card-common card-brief">
        <div class="layui-card-header">
            <div>
                <span class="card-title">支付资料</span>
            </div>
        </div>
        <div class="layui-card-body">
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>支付宝结算账号：</label>
                <div class="layui-input-block">
                    <input type="hidden" name="business_code" value="{$info.business_code??''}">
                    <input type="text" name="binding_alipay_logon_id" value="{$info.binding_alipay_logon_id??''}" lay-verify="required|email" autocomplete="off"
                           class="layui-input len-long" maxlength="40">
                </div>
                <div class="word-aux">
                    <p>填写商家支付宝账号,一般填写邮箱,请让商户注册支付宝并完成实名认证</p>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>商户简称：</label>
                <div class="layui-input-block">
                    <input type="text" name="alias_name" value="{$info.alias_name??''}" lay-verify="required" autocomplete="off"  class="layui-input len-long">
                </div>
                <div class="word-aux">
                    <p>填写商家收款中显示的商户简称</p>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="required">*</span>经营类目：</label>
                    <div class="layui-input-inline len-mid area-select">
                        <select name="code" lay-filter="alipay_category" lay-verify="required"  >
                            <option value="{$info.code??''}">请选择类别</option>
                            {foreach $alipay_category as $k => $v}
                              <option value="{$k}" {notempty name="$info.code"} {if $info.code==$k} selected{/if} {/notempty}>{$k}</option>
                            {/foreach}
                        </select>
                    </div>
                    <div class="layui-input-inline ns-len-mid area-select">
                        <select name="mcc" lay-filter="mcc" lay-filter="mccCode" lay-verify="required"  >
                            {notempty name="$info.mcc"}
                              <option value="{$info.mcc??''}">{$info.mcc??''}</option>
                            {/notempty}
                            <option value="">请选二级分类</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>客服电话：</label>
                <div class="layui-input-block">
                    <input type="text" name="service_phone" value="{$info.service_phone??''}" lay-verify="required" autocomplete="off" class="layui-input len-long" maxlength="40">
                </div>
                <div class="word-aux">
                    <p>填写商家对外客服电话</p>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-card card-common card-brief">
        <div class="layui-card-header">
            <div>
                <span class="card-title">联系人</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>姓名：</label>
            <div class="layui-input-block">
                <input type="text" name="contact_infos[name]" value="{$info.contact_infos['name']??''}" lay-verify="required" autocomplete="off"
                       class="layui-input len-long" maxlength="40">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>联系手机：</label>
            <div class="layui-input-block">
                <input type="text" name="contact_infos[mobile]" value="{$info.contact_infos['mobile']??''}" lay-verify="required" autocomplete="off"
                       class="layui-input len-long" maxlength="40">
            </div>
        </div>
    </div>
    <div class="layui-card card-common card-brief">
        <div class="layui-card-header">
            <div>
                <span class="card-title">开通信息</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>开通类型：</label>
            <div class="layui-input-block">
                <input type="checkbox" name="service[]" value="当面付" title="当面付" lay-skin="primary" checked>
                <input type="checkbox" name="service[]" value="app支付" title="app支付" lay-skin="primary" checked>
                <input type="checkbox" name="service[]" value="线上资金预授权" title="线上资金预授权" lay-skin="primary" checked>
                <input type="checkbox" name="service[]" value="新当面资金授权" title="新当面资金授权" lay-skin="primary" checked>
                <input type="checkbox" name="service[]" value="商户代扣" title="商户代扣" lay-skin="primary" checked>
                <input type="checkbox" name="service[]" value="小程序支付" title="小程序支付" lay-skin="primary" checked>
                <input type="checkbox" name="service[]" value="wap支付" title="wap支付" lay-skin="primary">
                <input type="checkbox" name="service[]" value="电脑支付" title="电脑支付" lay-skin="primary">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>APP名称：</label>
            <div class="layui-input-block">
                <input type="hidden" name="sites[0][site_type]" value="02">
                <input type="text" name="sites[0][site_name]" value="{$info.sites['0']['site_name']??''}" lay-verify="required" autocomplete="off"
                       class="layui-input len-long" maxlength="40">
            </div>
            <div class="word-aux">
                <p>APP应用名称</p>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>小程序名称：</label>
            <div class="layui-input-block">
                <input type="hidden" name="sites[1][site_type]" value="06">
                <input type="text" name="sites[1][site_name]" value="{$info.sites['1']['site_name']??''}" lay-verify="required" autocomplete="off"
                       class="layui-input len-long" maxlength="40">
            </div>
            <div class="word-aux">
                <p>小程序名称</p>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label img-upload-lable"><span class="required">*</span>门头照片：</label>
            <div class="layui-input-block img-upload">
                <div class="upload-img-block icon">
                    <div class="upload-img-box {if !empty($info.outdoor_store_images)}hover{/if}" >
                        <div class="upload-default" id="outdoorStoreUpload">
                            {if empty($info.outdoor_store_images)}
                            <div class="upload">
                                <i class="iconfont iconshangchuan"></i>
                                <p>点击上传</p>
                            </div>
                            {else/}
                            <div id="preview_outdoorStoreUpload" class="preview_img">
                                <img layer-src src="{:img($info.outdoor_store_images)}" class="img_prev"/>
                            </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" name="outdoor_store_images" value="{$info.outdoor_store_images??''}">
                        <input type="hidden" name="out_door_images" value="{$info.out_door_images??''}">
                    </div>
                </div>
            </div>
            <div class="word-aux">
                <p>门店图片在PC及移动端对应页面及列表作为门店标志出现。</p>
                <p>建议图片尺寸：100 * 100像素，图片格式：jpg、png、jpeg。</p>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label img-upload-lable"><span class="required">*</span>室内照片：</label>
            <div class="layui-input-block img-upload">
                <div class="upload-img-block icon">
                    <div class="upload-img-box {if !empty($info.indoor_store_image)}hover{/if}" >
                        <div class="upload-default" id="indoorStoreUpload">
                            {if empty($info.indoor_store_image)}
                            <div class="upload">
                                <i class="iconfont iconshangchuan"></i>
                                <p>点击上传</p>
                            </div>
                            {else/}
                            <div id="preview_indoorStoreUpload" class="preview_img">
                                <img layer-src src="{:img($info.indoor_store_image)}" class="img_prev"/>
                            </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" name="indoor_store_image" value="{$info.indoor_store_image??''}">
                        <input type="hidden" name="in_door_images" value="{$info.in_door_images??''}">
                    </div>
                </div>
            </div>
            <div class="word-aux">
                <p>门店图片在PC及移动端对应页面及列表作为门店标志出现。</p>
                <p>建议图片尺寸：100 * 100像素，图片格式：jpg、png、jpeg。</p>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>店铺所在：</label>
                <div class="layui-input-inline len-mid area-select">
                    <select name="province_id" lay-filter="province_id" lay-verify="province_id">
                        <option value="">请选择省份</option>
                        {foreach $province_list as $k => $v}
                        <option value="{$v.id}"  >{$v.name}</option>
                        {/foreach}
                    </select>
                </div>
                <div class="layui-input-inline ns-len-mid area-select">
                    <select name="city_id" lay-filter="city_id" lay-verify="city_id">
                        <option value="">请选择城市</option>
                    </select>
                </div>
                <div class="layui-input-inline ns-len-mid area-select">
                    <select name="district_id" lay-filter="district_id" lay-verify="district_id">
                        <option value="">请选择地区</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>详细地址：</label>
                <div class="layui-input-block">
                    <input type="text"   name="business_address[address]" value="{$info.business_address['address']??''}" lay-verify="required" autocomplete="off" class="layui-input len-long">
                </div>
            </div>
        </div>
    </div>
    <div class="form-row">
        <button class="layui-btn" lay-submit lay-filter="save">保存</button>
        <button class="layui-btn  layui-bg-blue" lay-submit lay-filter="saveDrafts">保存草稿箱</button>
        <button class="layui-btn " style="background-color: #ccc" onclick="back()">返回</button>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/html" id="toolbarOperation">

</script>
<script type="text/html" id="addSite">
    <div class="layui-form">
        <div class="layui-input-inline inline">
            <input type="text"  name="site_search" placeholder="请输入店铺名称" autocomplete="off" class="layui-input ">
            <button type="button" class="layui-btn layui-btn-primary member-search"  lay-filter="search" lay-submit>
                <i class="layui-icon"></i>
            </button>
        </div>
        <table id="site_list" lay-filter="site_list"></table>
    </div>
</script>
<script type="text/javascript" src="SHOP_JS/address.js"></script>
<script>
    var goodsId = {}, selectedGoodsId = [], sku_list = [],form, laydate, repeat_flag, currentDate, minDate,laytpl;
    layui.use(['form', 'laydate','laytpl'], function () {
        form = layui.form;
        laytpl = layui.laytpl;
        laydate = layui.laydate;
        repeat_flag = false;
        currentDate = new Date();
        minDate = "";
        form.render();
        var out_door_images = new Upload({
            elem: '#outdoorStoreUpload',
            url: ns.url("saasagent://shop/pay/image")
            , callback: function (res) {
                console.log(res);
                if (res.code >= 0) {
                    $("input[name='outdoor_store_images']").val(res.data.pic_path);
                    $("input[name='out_door_images']").val(res.data.image_id);
                }
            }
        });
        var in_door_images = new Upload({
            elem: '#indoorStoreUpload',
            url: ns.url("saasagent://shop/pay/image")
            , callback: function (res) {
                console.log(res);
                if (res.code >= 0) {
                    $("input[name='indoor_store_image']").val(res.data.pic_path);
                    $("input[name='in_door_images']").val(res.data.image_id);
                }
            }
        });
        //初始化联系地址
        {notempty name="$info['business_address']"}
          var initdata = {province_id : '{$info.business_address.province_code}', city_id : '{$info.business_address.city_code}', district_id : '{$info.business_address.district_code}'};
           console.log(11111)
           initAddress(initdata, "areaform");
        {/notempty}
        //省 - 监听地址操作
        form.on('select(alipay_category)', function (obj) {
            let value = obj.value;
            $.ajax({
                type: "POST",
                dataType: 'JSON',
                url: ns.url("saasagent://shop/alipay/getalicategory"),
                data: {name: value},
                async: false,
                success: function (res) {
                    console.log(res);
                    if (res.code == 0) {
                        $("select[name=mcc] option:gt(0)").remove();
                        $.each(res.data, function (name, value) {
                            $("select[name=mcc]").append("<option value='" + value.code + "'>" + value.two_name + "</option>");
                        });
                    } else {
                        layer.msg(res.message);
                    }
                    form.render();
                }
            });
        });

        //省 - 监听地址操作
        form.on('select(mccCode)', function (obj) {
            let value = obj.value;
            console.log(obj)
        });
        /**
         * 表单验证
         */
        form.verify({
            mccCode:function () {

            }
        });
        /**
         * 监听提交
         */
        form.on('submit(save)', function (data) {
            var field = data.field;
            if (repeat_flag) return;
            repeat_flag = true;
            field['isDrafts'] = 0;
            $.ajax({
                type: 'POST',
                dataType: 'JSON',
                url: location.href,
                data: field,
                async: false,
                success: function (res) {
                    console.log(res)
                    repeat_flag = false;
                    if (res.code == 0) {
                        layer.confirm('添加成功', {
                            title: '操作提示',
                            btn: ['返回列表', '继续添加'],
                            closeBtn: 0,
                            yes: function () {
                                location.href = ns.url("saasagent://shop/pay/list");
                            },
                            btn2: function () {
                                location.href = ns.url("saasagent://shop/pay/reg");
                            }
                        });
                    } else {
                        layer.msg(res.message);
                    }
                }
            })
        });
        form.on('submit(saveDrafts)', function (data) {
            var field = data.field;
             field['isDrafts'] = 1;
            if (repeat_flag) return;
            repeat_flag = true;
            $.ajax({
                type: 'POST',
                dataType: 'JSON',
                url: location.href,
                data: field,
                async: false,
                success: function (res) {
                    repeat_flag = false;
                    if (res.code == 0) {
                        layer.confirm('添加成功', {
                            title: '操作提示',
                            btn: ['返回列表', '继续添加'],
                            closeBtn: 0,
                            yes: function () {
                                location.href = ns.url("saasagent://shop/pay/list");
                            },
                            btn2: function () {
                                location.href = ns.url("saasagent://shop/pay/reg");
                            }
                        });
                    } else {
                        layer.msg(res.message);
                    }
                }
            })
        });
    });
     var add_attr_radioState2 = 0;
     var new_site_id = '';
    function addSite() {
            let _this = this;
            var add_attr2 = $("#addSite").html();
            form.on('radio(laymemberid)', function(obj){
                new_site_id = obj.value;
                console.log(new_site_id)
                _this.add_attr_radioState2 = obj.value;
            });
            laytpl(add_attr2).render({}, function(html) {
                add_attr_index2 = layer.open({
                    title: '选择店铺',
                    skin: 'layer-tips-class',
                    type: 1,
                    area: ['800px', '580px'],
                    content: html,
                    btn:["保存","返回"],
                    yes: function(){
                        $.ajax({
                            url: ns.url("saasagent://shop/saas/searchShop"),
                            data:{site_id: new_site_id},
                            dataType: 'JSON',
                            type: 'POST',
                            success: function(res) {
                                if (res.code == 0) {
                                    $("input[name='username']").val(res.data.username);
                                    $("input[name='bing_site_id']").val(res.data.site_id);
                                    $("input[name='service_phone").val(res.data.contacts_mobile);
                                    $("input[name='contact_infos[name]']").val(res.data.contacts_name);
                                    $("input[name='contact_infos[mobile]']").val(res.data.contacts_mobile);
                                    layer.close(add_attr_index2);
                                } else {
                                    layer.msg(res.message);
                                }
                            }
                        });
                        // memberDetail(res.data);
                        // layer.close(add_attr_index2);
                    }
                });
            });
            var post_url = ns.url("saasagent://shop/saas/list");
            var post_where = undefined;
            var domain = window.location.href + '/s' + (window.ns_url.siteid ? window.ns_url.siteid : 0)+post_url + JSON.stringify(post_where);
            //展示已知数据
            table = new Table({
                elem: '#site_list',
                url: ns.url("saasagent://shop/saas/list"),
                page: {
                    layout: ['count', 'limit', 'prev', 'page', 'next'],
                    limit: 6,
                    curr: $.cookie('currPage' + domain) || 1
                },
                data:{isBingSite:'NO'},
                cols: [
                    [
                      {
                        width: "20%",
                        title: '店铺选择',
                        unresize: 'false',
                        templet: function(data) {
                            var html = '';
                            if(data.site_id == Number(add_attr_radioState2)){
                                html += `
									<div>
									<input type="radio" name="layTableRadioc" checked = true  value="${data.site_id}" data-index="${data.username}" lay-type="layTableRadio" lay-filter="laymemberid">
									</div>
								`;
                            }else{
                                html += `
									<div>
									<input type="radio" name="layTableRadioc" value="${data.site_id}" data-index="${data.username}" lay-type="layTableRadio" lay-filter="laymemberid">
									</div>
								`;
                            }
                            return html;
                        }
                    },{
                        title: '店铺账号',
                        width: '30%',
                        field: 'username',
                        unresize: 'false'
                    },
                    {
                            title: '联系人',
                            width: '50%',
                            unresize: 'false',
                            field: 'contacts_name',
                    }
                    ]
                ],
            });
            /**
             * 搜索功能
             */
            form.on('submit(search)', function (data) {
                table.reload({
                    page: {
                        curr: 1
                    },
                    where: data.field
                });
            });
            $(document).keydown(function (event) {
                if (event.keyCode == 13) {
                    $(".site-search").trigger("click");
                }
            });
        }
    function back() {
        location.href = ns.url("saasagent://shop/pay/list");
    };
</script>
{/block}