{extend name="app/shop/view/base.html"/}
{block name="resources"}
<style>
    .fenxiao-header {
        padding: 50px 0 100px 50px;
        font-size: 20px;
        font-weight: 600;
    }
    .layui-form {
        position: relative;
    }
    .layui-form-label {
        text-align: right;
        margin-left: 60px;
    }
    .layui-form-item {
        margin-bottom: 22px;
    }
    .fenxiao-select {
        position: absolute;
        left: 400px;
        top: 135px;
    }
    .member-select {
        position: absolute;
        left: 400px;
        top: 195px;
    }
    .layui-unselect.layui-form-radio.layui-form-radioed i:after {
        background-color: #fff;
    }
    .layui-table-body {
        max-height: 530px;
    }
</style>
{/block}
{block name="main"}
<div class="layui-form form">

    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>关联店铺：</label>
        <div class="layui-input-inline">
            <input type="text" id="store_name" name="search_text" disabled class="layui-input">
            <input type="hidden" id="site_id" name="site_id"  class="layui-input">
        </div>
        <button class="layui-btn layui-btn2 bg-color"  onclick="addMember()">选择店铺</button>
    </div>
    {notempty name="$wechatpay_value"}
    <div class="layui-card ns-card-common ns-card-brief">
        <div class="layui-card-header">
            <span class="ns-card-title">微信支付参数</span>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">支付API密钥：</label>
            <div class="layui-input-block">
                <input name="pay_signkey" class="layui-input len-long" value="">
            </div>
            <div class="word-aux"><span class="ns-text-color-red">[paySignKey]</span>微信商户API密钥 V2</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">支付证书cert：</label>
            <div class="layui-input-block">
                {notempty name="$info.value.apiclient_cert"}
                <p class="file-upload">已上传</p>
                {else/}
                <p class="file-upload">未上传</p>
                {/notempty}
                <button type="button" class="layui-btn bg-color" id="cert_upload">
                    <i class="layui-icon">&#xe67c;</i>上传文件
                </button>
                <input type="hidden" name="apiclient_cert" class="layui-input ns-len-long" value="{$info.value.apiclient_cert ?? ''}">
            </div>
            <div class="word-aux">上传apiclient_cert.pem文件</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">支付证书key：</label>
            <div class="layui-input-block">
                {notempty name="$info.value.apiclient_key"}
                <p class="file-upload">已上传</p>
                {else/}
                <p class="file-upload">未上传</p>
                {/notempty}
                <button type="button" class="layui-btn ns-bg-color" id="key_upload">
                    <i class="layui-icon">&#xe67c;</i>上传文件
                </button>
                <input type="hidden" name="apiclient_key" class="layui-input len-long" value="{$info.value.apiclient_key ?? ''}">
            </div>
            <div class="word-aux">上传apiclient_key.pem文件</div>
        </div>
    </div>
    {/notempty}
    <div class="form-row">
        <button class="layui-btn  bg-color" lay-submit lay-filter="save">保存</button>
        <button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
    </div>
</div>
    <div class="layui-card-header">
        <span class="ns-card-title">已绑定店铺</span>
    </div>
<table id="site_list" lay-filter="site_list"></table>
{/block}
{block name="script"}
<script type="text/html" id="addMember">
    <div class="layui-form">
        <div class="layui-input-inline" style="width: 205px;">
            <input type="text" style="width: 205px;" name="member_search" placeholder="请输入商家名称账号手机号" autocomplete="off" class="layui-input ">
            <button type="button" class="layui-btn layui-btn-primary member-search" style="height: 32px; line-height: 32px; position: absolute; right: 1px; top: 1px; border-width: 0; border-left-width: 1px;" lay-filter="search" lay-submit>
                <i class="layui-icon"></i>
            </button>
        </div>
        <table id="member_list" lay-filter="member_list"></table>
    </div>
</script>
<script type="text/javascript">
    var new_fenxiao_id = 0;var new_member_id = 0;
    layui.use(['form', 'laytpl','table','laypage'], function() {
        laytpl = layui.laytpl;
        form = layui.form;
        laypage = layui.laypage;
        table = layui.table;
        repeat_flag = false;
        form.render();
        var cert_upload = new Upload({
            elem: '#cert_upload',
            url: ns.url("wechatpay://shop/pay/uploadwechatcert"), //改成您自己的上传接口
            accept: 'file',
            callback:function (res) {
                if (res.code >= 0) {
                    $("input[name='apiclient_cert']").val(res.data.path);
                    $("input[name='apiclient_cert']").siblings(".file-upload").text("已上传");
                }
            }
        });
        var key_upload = new Upload({
            elem: '#key_upload',
            url: ns.url("wechatpay://shop/pay/uploadwechatcert"), //改成您自己的上传接口
            accept: 'file',
            callback:function (res) {
                if (res.code >= 0) {
                    $("input[name='apiclient_key']").val(res.data.path);
                    $("input[name='apiclient_key']").siblings(".file-upload").text("已上传");
                }
            }
        });
        /**
         * 监听提交
         */
        form.on('submit(save)', function(data) {
            console.log(data);
            // repeat_flag = true;
            if(repeat_flag) return;
            $.ajax({
                url: location.href,
                data: data.field,
                dataType: 'JSON', //服务器返回json格式数据
                type: 'POST', //HTTP请求类型
                success: function(res) {
                    repeat_flag = false;
                    if (res.code == 0) {
                        layer.msg(res.message);
                        location.href = ns.url("saasagent://shop/pay/list")
                    } else {
                        layer.msg(res.message);
                    }
                }
            });
        });
    })
    function back() {
        location.href = ns.url("saasagent://shop/pay/list");
    }

    function addMember() {
        var add_attr2 = $("#addMember").html();
        form.on('radio(laymemberid)', function(obj){
            new_member_id = obj.value
            var title3 = ($(this).data('index'))
            console.log(title3);
            $('#store_name').val(title3)
            $('#site_id').val(obj.value)
        })
        laytpl(add_attr2).render({}, function(html) {
            add_attr_index2 = layer.open({
                title: '选择商家',
                skin: 'layer-tips-class',
                type: 1,
                area: ['1200px', '650px'],
                content: html,
                btn:["保存","返回"],
                yes: function(){
                    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: '#member_list',
            url: ns.url("saasagent://shop/saas/list"),
            page: {
                layout: ['count', 'limit', 'prev', 'page', 'next'],
                limit: 6,
                curr: $.cookie('currPage' + domain) || 1
            },
            cols: [
                [{
                    width: "12%",
                    title: '商家选择',
                    unresize: 'false',
                    templet: function(data) {
                        var html = '';
                        html += `
								<div>
								<input type="radio" name="layTableRadioc"  value="${data.site_id}" data-index="${data.contacts_name}" lay-type="layTableRadio" lay-filter="laymemberid">
								</div>
							`;
                        return html;
                    }
                },{
                    title: '商家名称',
                    width: '50%',
                    unresize: 'false',
                    templet: function(data) {
                        var html = '';
                        html += `
						 		<div>
						 		<img style="width:40px; height:40px; margin-right:20px;" layer-src src="SHOP_IMG/default_headimg.png"><span>${data.contacts_name}</span>
						 		</div>
						 	`;
                        return html;
                    }
                }, {
                        title: '账号',
                        width: '50%',
                        unresize: 'false',
                        field: 'username',
                    },
                    {
                        title: '店铺名称',
                        width: '50%',
                        unresize: 'false',
                        field: 'site_name',
                    }
                ]
            ],
        });
        /**
         * 搜索功能
         */
        form.on('submit(search)', function (data) {
            table.reload({
                page: {
                    curr: 1
                },
                where: data.field
            });
        });
        $(document).keydown(function (event) {
            if (event.keyCode == 13) {
                $(".member-search").trigger("click");
            }
        });
    }
    var table = new Table({
        elem: '#site_list',
        url: ns.url("saasagent://shop/saas/list?shop_id="+location.search.substr(1).split("=")[1]),
        cols: [
            [
                {
                    title: '用户名',
                    field:'username',
                    unresize: 'false',
                    width: '8%',
                },
                {
                    title: '联系人',
                    field:'contacts_name',
                    unresize: 'false',
                    width: '8%',
                },
                {
                    title: '手机号',
                    field:'contacts_mobile',
                    unresize: 'false',
                    width: '10%'
                },
                {
                    title: '会员总数',
                    unresize: 'false',
                    field:'member_count',
                    width: '8%',
                },
                {
                    title: '订单数量',
                    unresize: 'false',
                    field:'order_count',
                    width: '5%',
                },
                {
                    title: '类型',
                    unresize: 'false',
                    field:'sub_num',
                    width: '10%',
                    templet: function (data) {
                        if(data.is_experience==0){
                            return '正式商户'
                        }else {
                            return '体验商户'
                        }
                    }
                },
                {
                    title: '套餐类型',
                    unresize: 'false',
                    field:'group_name',
                    width: '10%',
                },
                {
                    title: '到期时间',
                    unresize: 'false',
                    field:'expire_time',
                    width: '10%',
                    templet: function (data) {
                        return ns.time_to_date(data.expire_time);
                    }
                },
                {
                    title: '邮箱',
                    unresize: 'false',
                    field:'email',
                    width: '10%',
                },
            ]
        ]
    });
</script>
{/block}