{extend name="app/shop/view/base.html"/}
{block name="resources"}
<style>
    .printer-box{display: flex;}
    .printer-box > .layui-form{flex: 1;}
    .printer-box .preview{width: 310px;margin: 0 20px;}
    .printer-box .preview .layui-card-body{margin: 20px;padding: 0 10px;border: 1px solid #ededed;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
    .printer-box .preview .layui-card-body div{font-size: 12px;color: #333;}
    .printer-box .preview .layui-card-body div ~ div{border-top: 1px dashed #ededed ;}
    .printer-box .preview .receipt-name{text-align: center;line-height: 40px;}
    .printer-box .preview .shopping-name{line-height: 40px;font-size: 16px !important;text-align: center;}
    .printer-box .preview .order-info, .printer-box .preview .goods-info, .printer-box .preview .price-info, .printer-box .preview .buyer-info, .printer-box .preview .shopping-info{padding: 8px 0;}
    .printer-box .preview .order-info span{display: block;line-height: 2.5;}
    .printer-box .preview .goods-info table{width: 100%;}
    .printer-box .preview .goods-info table tr{line-height: 2.5;}
    .printer-box .preview .goods-info table th{font-weight: normal;}
    .printer-box .preview .price-info p{display: flex;line-height: 2.5;justify-content: space-between;}
    .printer-box .preview .buyer-info span, .printer-box .preview .shopping-info span{display: block;line-height: 2;}
    .printer-box .preview .buyer-message,.printer-box .preview .merchant-message{padding: 10px 0;line-height: 1.5;}
    .preview .button-info{height: 40px;line-height: 40px;text-align: center}
    .preview .shopping-code{text-align: center;}
    .preview .shopping-code img{width: 100px;height: 100px;margin: 10px 0;}
    .commodity-type-box{
        display: flex;
    }

    .commodity-type-item{
        margin-right: 15px;
        padding: 0px 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border: 1px solid #e5e5e5;
        cursor: pointer;
        /* background: #e5e5e5; */
    }
    .goods_code_show td{line-height: 1;padding-bottom: 5px}
</style>
{/block}
{block name="main"}
<div class="layui-collapse tips-wrap">
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">操作提示</h2>
        <ul class="layui-colla-content layui-show">
            <li>管理员可以在此页操作打印模板</li>
        </ul>
    </div>
</div>

<div class="printer-box">
    <div class="layui-form form-wrap">
        <div class="layui-card card-common card-brief">
            <div class="layui-card-header">
                <span class="card-title">模板信息</span>
            </div>
            <div class="layui-card-body">
                {if empty($info)}
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="required">*</span>模板类型：</label>
                    <div class="layui-input-block commodity-type-box">
                        {foreach $template_type as $k => $v}
                        <div class="commodity-type-item {if $type == $k} border-color{/if}" onclick="location.href = ns.url('printer://shop/template/add', {'type' : '{$v['type']}'})">
                            <span class="{if $type == $k} text-color{/if}">{$v['type_name']}</span>
                        </div>
                        {/foreach}
                    </div>
                </div>
                <input type="hidden" name="type_name" value="{$template_type[$type]['type_name']}">
                <input type="hidden" name="type" value="{$type}">
                {/if}
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="required"></span>模板名称：</label>
                    <div class="layui-input-block">
                        <input type="text"  name="template_name" lay-verify="required" {if !empty($info)} value="{$info['template_name']}" {/if} autocomplete="off" class="layui-input len-long">
                    </div>
                </div>
            </div>
        </div>

        <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="title" {if !empty($info)} value="{$info['title']}"{else/}  value="小票名称" {/if}   lay-verify="required" autocomplete="off" class="layui-input len-long">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">商城名称：</label>
                    <div class="layui-input-block">
                        <input type="radio" lay-filter="shop_name"  name="head" value="1" title="显示" {if (!empty($info) && $info['head'] == 1) || empty($info) } checked {/if}  autocomplete="off" class="layui-input len-long">
                        <input type="radio" lay-filter="shop_name" name="head" value="0" title="不显示" {if !empty($info) && !$info['head']} checked {/if} autocomplete="off" class="layui-input len-long">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">买家信息：</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="buy_name" value="1" lay-filter="buyer_name"  lay-skin="primary" title="姓名" {if (!empty($info) && $info['buy_name']) || empty($info) } checked {/if}>
<!--                        <input type="checkbox" name="buy_mobile" value="1" lay-filter="buyer_phone"  lay-skin="primary" title="联系方式" {if (!empty($info) && $info['buy_mobile']) || empty($info) } checked {/if}>-->
<!--                        <input type="checkbox" name="buy_address" value="1" lay-filter="buyer_addres"  lay-skin="primary" title="地址" {if (!empty($info) && $info['buy_address']) || empty($info) } checked {/if}>-->
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">商城信息：</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="shop_mobile" value="1" lay-filter="shopping_phone" lay-skin="primary" title="联系方式" {if (!empty($info) && $info['shop_mobile'])} checked {/if}>
                        <input type="checkbox" name="shop_address" value="1" lay-filter="shopping_addres" lay-skin="primary" title="地址" {if (!empty($info) && $info['shop_address'])} checked {/if}>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">商城二维码：</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="shop_qrcode" value="1" lay-filter="shop_qrcode" lay-skin="primary" title="商城二维码" {if (!empty($info) && $info['shop_qrcode']) || empty($info) } checked {/if}>
                    </div>
                </div>

                <div class="layui-form-item qrcode_url">
                    <label class="layui-form-label"><span class="required">*</span>商城二维码链接：</label>
                    <div class="layui-input-block">
                        <input type="text"  name="qrcode_url" lay-verify="required" autocomplete="off" class="layui-input len-long" {if (!empty($info) && $info['qrcode_url'])} value="{$info['qrcode_url']}" {/if}>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">底部信息：</label>
                    <div class="layui-input-block">
                        <input type="text"  name="bottom" {if (!empty($info) && $info['bottom'])} value="{$info['bottom']}"{else /} value="谢谢惠顾，欢迎下次光临" {/if} lay-verify="required" placeholder="" autocomplete="off" class="layui-input len-long">
                    </div>
                </div>

            </div>
        </div>
        {if !empty($info)}
        <input type="hidden" name="template_id" value="{$info['template_id']}">
        {/if}
        <div class="form-row">
            <button class="layui-btn" lay-submit lay-filter="save">保存</button>
            <button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
        </div>
    </div>

    <div class="preview">
        <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="receipt-name">小票名称</div>
                <div class="shopping-name">商城名称</div>
                <div class="order-info">
                    <span>订单编号：ME20180702231831547866</span>
                    <span>支付方式：微信支付</span>
                </div>
                <div class="goods-info">

                <div class="price-info">
                    <p>
                        <span>充值金额</span>
                        <span>￥100</span>
                    </p>
                    <p>
                        <span>支付金额</span>
                        <span>￥95</span>
                    </p>
                    <p>
                        <span>会员余额</span>
                        <span>￥230</span>
                    </p>
                </div>
                <div class="buyer-message">买家留言：物流很快</div>
                <div class="merchant-message layui-hide">卖家留言：欢迎下次购买</div>

                <div class="buyer-info">
                    <span class="name">会员：王二</span>
<!--                    <span class="phone">15135669878</span>-->
<!--                    <span class="addres">山西省 太原市 小店区 创业街</span>-->
                </div>
                <div class="shopping-info layui-hide">
                    <span class="phone layui-hide">4008867993 </span>
                    <span class="addres layui-hide">山西省 太原市 小店区 创业街 世纪中心4单元1025</span>
                </div>
                <div class="shopping-code">
                    <img src="SHOP_IMG/shopping_code.png" alt="">
                </div>
                <div class="button-info">谢谢惠顾，欢迎下次光临</div>
            </div>

        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    layui.use(['form'], function() {
        var form = layui.form,
            repeat_flag = false;

        form.render();

        /**
         * 表单验证
         */
        form.verify({
            time: function(value) {
                var now_time = (new Date()).getTime();
                var start_time = (new Date($("#start_time").val())).getTime();
                var end_time = (new Date(value)).getTime();
                if (now_time > end_time) {
                    return '结束时间不能小于当前时间!'
                }
                if (start_time > end_time) {
                    return '结束时间不能小于开始时间!';
                }
            },
            flnum: function(value) {
                var arrMen = value.split(".");
                var val = 0;
                if (arrMen.length == 2) {
                    val = arrMen[1];
                }
                if (val.length > 2) {
                    return '保留小数点后两位！'
                }
            },
            int: function(value) {
                if (value <= 1 || value % 1 != 0) {
                    return '请输入大于1的正整数！'
                }
            }
        });

        form.on('checkbox(shop_qrcode)', function(data){

            var value = data.elem.checked;
            if(value == true){
                $(".preview .shopping-code").removeClass("layui-hide");
                $(".qrcode_url").removeClass('layui-hide');
                $("input[name='qrcode_url']").attr("lay-verify", "required");
            }else{
                $(".preview .shopping-code").addClass("layui-hide");
                $(".qrcode_url").addClass('layui-hide');
                $("input[name='qrcode_url']").attr("lay-verify", "");
            }
        });

        /**
         * 表单提交
         */
        form.on('submit(save)', function(data){

            var field = data.field;
            if(repeat_flag) return;
            repeat_flag = true;
            let url = ns.url("printer://shop/template/add");
            if(parseInt(field.template_id) > 0 ) url = ns.url("printer://shop/template/edit");

            $.ajax({
                type: 'POST',
                dataType: 'JSON',
                url: url,
                data: field,
                async: false,
                success: function(res){
                    repeat_flag = false;

                    if (res.code == 0) {
                        layer.confirm('操作成功', {
                            title:'操作提示',
                            btn: ['返回列表', '{$info ? "继续编辑" : "继续添加"}'],
                            closeBtn: 0,
                            yes: function(){
                                location.href = ns.url("printer://shop/template/lists");
                            },
                            btn2: function() {
                                window.location.reload();
                            }
                        });
                    }else{
                        layer.msg(res.message);
                    }
                }
            })
        });

        /*
        * 效果图
        * */

        // 小票打印
        $("input[name='title']").bind("input propertychange",function(event){
            $(".preview .receipt-name").text($("input[name='title']").val());
        });

        //商城名称
        form.on('radio(shop_name)', function(data){
            if (parseInt(data.value)) $(".shopping-name").removeClass("layui-hide");
            else $(".shopping-name").addClass("layui-hide");
        });
        //商品价格
        form.on('checkbox(goods_price_show)', function(data){
            if (data.elem.checked) {
                $(".goods_price_show").removeClass("layui-hide");
                $('.goods_price_type').removeClass("layui-hide");
            }else {
                $('.goods_price_type').addClass("layui-hide");
                $(".goods_price_show").addClass("layui-hide");
            }
        });
        //商品编码
        form.on('checkbox(goods_code_show)', function(data){
            if (data.elem.checked) $(".goods_code_show").removeClass("layui-hide");
            else $(".goods_code_show").addClass("layui-hide");
        });
        //表单
        form.on('checkbox(form_show)', function(data){
            if (data.elem.checked) $(".form_show").removeClass("layui-hide");
            else $(".form_show").addClass("layui-hide");
        });
        //买家留言
        form.on('checkbox(buyer_message)', function(data){
            if(data.elem.checked)
                $(".buyer-message").removeClass("layui-hide");
            else
                $(".buyer-message").addClass("layui-hide");
        });
        //卖家留言
        form.on('checkbox(merchant_message)', function(data){
            if(data.elem.checked)
                $(".merchant-message").removeClass("layui-hide");
            else
                $(".merchant-message").addClass("layui-hide");
        });

        var buyerName = true,buyerPhone=true,buyerAddres=true;
        //买家姓名
        form.on('checkbox(buyer_name)', function(data){
            buyerName = data.elem.checked;

            if(data.elem.checked)
                $(".buyer-info .name").removeClass("layui-hide");
            else
                $(".buyer-info .name").addClass("layui-hide");

            buyerFn();
        });
        //买家手机号
        form.on('checkbox(buyer_phone)', function(data){
            buyerPhone = data.elem.checked;

            if(data.elem.checked)
                $(".buyer-info .phone").removeClass("layui-hide");
            else
                $(".buyer-info .phone").addClass("layui-hide");

            buyerFn();
        });
        //买家地址
        form.on('checkbox(buyer_addres)', function(data){
            buyerAddres= data.elem.checked;
            if(data.elem.checked)
                $(".buyer-info .addres").removeClass("layui-hide");
            else
                $(".buyer-info .addres").addClass("layui-hide");
            buyerFn();
        });

        function buyerFn() {
            if (!buyerName )
                $(".buyer-info").addClass("layui-hide");
            else
                $(".buyer-info").removeClass("layui-hide");
        }

        var shoppingPhone=false,shoppingAddress=false;
        //商家手机号
        form.on('checkbox(shopping_phone)', function(data){
            shoppingPhone = data.elem.checked;

            if(data.elem.checked)
                $(".shopping-info .phone").removeClass("layui-hide");
            else
                $(".shopping-info .phone").addClass("layui-hide");

            shoppingFn();
        });
        //商家地址
        form.on('checkbox(shopping_addres)', function(data){
            shoppingAddress= data.elem.checked;

            if(data.elem.checked)
                $(".shopping-info .addres").removeClass("layui-hide");
            else
                $(".shopping-info .addres").addClass("layui-hide");
            shoppingFn();
        });

        function shoppingFn() {
            if (!shoppingPhone && !shoppingAddress)
                $(".shopping-info").addClass("layui-hide");
            else
                $(".shopping-info").removeClass("layui-hide");
        }

        // 底部信息
        $("input[name='bottom']").bind("input propertychange",function(event){
            $(".preview .button-info").text($("input[name='bottom']").val());
        });
    });

    function back() {
        location.href = ns.url("printer://shop/template/lists");
    }

</script>
{if !empty($info)}
<script>
    let shop_qrcode = {$info['shop_qrcode']};
    if(shop_qrcode){
        $(".preview .shopping-code").removeClass("layui-hide");
        $(".qrcode_url").removeClass('layui-hide');
        $("input[name='qrcode_url']").attr("lay-verify", "required");
    }else{
        $(".preview .shopping-code").addClass("layui-hide");
        $(".qrcode_url").addClass('layui-hide');
        $("input[name='qrcode_url']").attr("lay-verify", "");
    }

    let head = {$info['head']};
    if (head) {
        $(".shopping-name").removeClass("layui-hide");
    }else {
        $(".shopping-name").addClass("layui-hide");
    }

    let goods_price_show = {$info['goods_price_show']};
    if (goods_price_show) {
        $(".goods_price_show").removeClass("layui-hide");
        $('.goods_price_type').removeClass("layui-hide");
    }else {
        $('.goods_price_type').addClass("layui-hide");
        $(".goods_price_show").addClass("layui-hide");
    }

    let goods_code_show = {$info['goods_code_show']};
    if (goods_code_show) $(".goods_code_show").removeClass("layui-hide");
    else $(".goods_code_show").addClass("layui-hide");

    let form_show = {$info['form_show']};
    if (form_show) $(".form_show").removeClass("layui-hide");
    else $(".form_show").addClass("layui-hide");

    let buy_notes = {$info['buy_notes']};
    if(buy_notes) $(".buyer-message").removeClass("layui-hide");
    else $(".buyer-message").addClass("layui-hide");

    let seller_notes = {$info['seller_notes']};
    if(seller_notes) $(".merchant-message").removeClass("layui-hide");
    else $(".merchant-message").addClass("layui-hide");

    buyerName = {$info['buy_name']},buyerPhone={$info['buy_mobile']},buyerAddres={$info['buy_address']};
    if(buyerName) $(".buyer-info .name").removeClass("layui-hide");
    else $(".buyer-info .name").addClass("layui-hide");

    if(buyerPhone) $(".buyer-info .phone").removeClass("layui-hide");
    else $(".buyer-info .phone").addClass("layui-hide");

    if(buyerAddres) $(".buyer-info .addres").removeClass("layui-hide");
    else $(".buyer-info .addres").addClass("layui-hide");

    if (!buyerName ) $(".buyer-info").addClass("layui-hide");
    else $(".buyer-info").removeClass("layui-hide");

    shoppingPhone= {$info['shop_mobile']},shoppingAddress= {$info['shop_address']};

    //商家手机号
    if(shoppingPhone)$(".shopping-info .phone").removeClass("layui-hide");
    else $(".shopping-info .phone").addClass("layui-hide");

    //商家地址
    if(shoppingAddress) $(".shopping-info .addres").removeClass("layui-hide");
    else $(".shopping-info .addres").addClass("layui-hide");

    if (!shoppingPhone && !shoppingAddress) $(".shopping-info").addClass("layui-hide");
    else $(".shopping-info").removeClass("layui-hide");

</script>
{/if}
{/block}