extends /admin/include/layout.pug

block content
    include head
    .layui-tab
        .layui-tab-content
            .layui-tab-item.layui-show
                form.layui-form(method="post", key="set-mine", enctype="multipart/form-data", action="/admin/webim/invote/save.html")
                    include hidden
                    .row
                        .col-lg-12
                            .ukefu-customer-div.setting-wrapper
                                .box.default-box
                                    .box-header
                                        h3.box-title 邀请框设置
                                    .box-body.ukefu-im-theme
                                        .row
                                            .col-lg-7
                                                .ukefu-webim-prop
                                                    .ukefu-webim-tl(style="clear:both;") 1、启用访客邀请功能
                                                    .box-item
                                                        .row
                                                            .col-lg-8
                                                                p 访客自动弹出邀请框，可以设置邀请文字和邀请按钮
                                                                p(style="color:#888888;font-size:13px;margin-top:10px;") 默认启用访客邀请功能
                                                            .col-lg-4(style="text-align:right;")
                                                                input(type="checkbox", title="启用", name="consult_invite_enable", value="1", checked=invitedata.consult_invite_enable)

                                                .ukefu-webim-prop
                                                    .ukefu-webim-tl(style="clear:both;") 2、邀请提示文字
                                                    .box-item
                                                        .row
                                                            .col-lg-12
                                                                textarea.layui-input(name="consult_invite_content", autocomplete="off", onkeyup="$('#ukefu-cousult-invite-content').text($(this).val())", resize="false", style="height:90px;line-height:22px;resize: none;")= inviteData.consult_invite_content ? inviteData.consult_invite_content : '欢迎来到本网站，请问有什么可以帮您？'
                                                .ukefu-webim-prop
                                                    .ukefu-webim-tl(style="clear:both;") 3、选择邀请框背景
                                                    .box-item
                                                        input#consult_invite_color(type="hidden", name="consult_invite_color", value=(inviteData.consult_invite_color ? inviteData.consult_invite_color : 1))
                                                        .item-cnt.ukefu-im-ping-color(style="display: block;")
                                                            .ukefu-im-item.theme1(class={'ukefu-im-checked': !inviteData.consult_invite_color || inviteData.consult_invite_color == '1'}, data-class="theme1", data-value="1")
                                                                i.layui-icon.ukefu-im-check 
                                                            .ukefu-im-item.theme2(class={'ukefu-im-checked': inviteData.consult_invite_color == '2'}, data-class="theme2", data-value="2")
                                                                i.layui-icon.ukefu-im-check 
                                                            .ukefu-im-item.theme3(class={'ukefu-im-checked': inviteData.consult_invite_color == '3'}, data-class="theme3", data-value="3")
                                                                i.layui-icon.ukefu-im-check 
                                                            .ukefu-im-item.theme4(class={'ukefu-im-checked': inviteData.consult_invite_color == '4'}, data-class="theme4", data-value="4")
                                                                i.layui-icon.ukefu-im-check 
                                                            .ukefu-im-item.theme5(class={'ukefu-im-checked': inviteData.consult_invite_color == '5'}, data-class="theme5", data-value="5")
                                                                i.layui-icon.ukefu-im-check 
                                                            .ukefu-im-item.theme6(class={'ukefu-im-checked': inviteData.consult_invite_color == '6'}, data-class="theme6", data-value="6")
                                                                i.layui-icon.ukefu-im-check 
                                                .ukefu-webim-prop
                                                    .ukefu-webim-tl(style="clear:both;") 4、显示“现在咨询”按钮
                                                    .box-item
                                                        .row
                                                            .col-lg-8
                                                                p 启用访客邀请功能，在弹出的邀请框里显示“接受邀请”的按钮
                                                                p(style="color:#888888;font-size:13px;margin-top:10px;") 默认提示文本是：现在咨询
                                                            .col-lg-4
                                                                input.layui-input(type="text", name="consult_invite_accept", value=(inviteData.consult_invite_accept ? inviteData.consult_invite_accept : '现在咨询'), autocomplete="off", onkeyup="$('#consult_invite_accept').text($(this).val())", onchange="$('#consult_invite_accept').text($(this).val())")
                                                .ukefu-webim-prop
                                                    .ukefu-webim-tl(style="clear:both;") 5、显示“稍后咨询”按钮
                                                    .box-item
                                                        .row
                                                            .col-lg-8
                                                                p 启用访客邀请功能，在弹出的邀请框里显示“稍后咨询”的按钮”
                                                                p(style="color:#888888;font-size:13px;margin-top:10px;") 默认提示文本是：稍后咨询
                                                            .col-lg-4
                                                                input#consult_invite_later.layui-input(type="text", name="consult_invite_later", value=(inviteData.consult_invite_later ? inviteData.consult_invite_later : '稍后再说'), autocomplete="off", onkeyup="$('#consult_invite_later').text($(this).val())", onchange="$('#consult_invite_later').text($(this).val())")
                                                .ukefu-webim-prop
                                                    .ukefu-webim-tl(style="clear:both;") 6、延时弹出邀请框
                                                    .box-item
                                                        .row
                                                            .col-lg-8
                                                                p 延时弹出访客邀请框
                                                                p(style="color:#888888;font-size:13px;margin-top:10px;") 默认延时：5秒
                                                            .col-lg-4
                                                                select(name="consult_invite_delay")
                                                                    option(value="0", selected=(!inviteData.consult_invite_delay || inviteData.consult_invite_delay == 0)) 无延时
                                                                        for i in [1,2,3,4,5,10]
                                                                            option(value=i * 1000, selected=inviteData.consult_invite_delay == i * 1000) #{i}秒

                                                .ukefu-webim-prop
                                                    - var invite_bg = inviteData.consult_invite_bg?('/res/image.html?id=' + inviteData.consult_invite_bg):'/im/img/webwxgetmsgimg.jpg';
                                                    .ukefu-webim-tl 7、自定义访客邀请框背景图片 （建议尺寸：273*230）
                                                    .box-item(style="position: relative;")
                                                        span.ukefu-logo
                                                            img#invite_show(src=invite_bg, style="height:175px;")
                                                        .layui-box.layui-upload-button(style="position:absolute;left: 290px;")
                                                            input#invoteupdata.layui-upload-file(type="file", name="invotebg", accept="image/gif, image/jpeg, image/png", lay-ext="jpg|png|gif", onchange="$('#invotebg').html($(this).val());$('.invite_close').show()")
                                                            span.layui-upload-icon
                                                                i.layui-icon 
                                                                | 上传图片
                                                        div(style="display: inline-block;margin-left: 70px")
                                                            span#invotebg(style="float: left")
                                                            i.layui-icon.invite_close(style="display: none;float: left;margin-top: -5px;cursor:pointer;", onclick="  $('#invotebg').html('');$('#invite_show').attr('src','" + invite_bg + "'); $('.invite_close').hide(); clearInvoteupdata()") ဆ
                                            .col-md-5
                                                #ukefu-point.ukefu-im-preview(style="height:183px;position: absolute;")
                                                    #ukefu-cousult-invite-dialog.ukefu-im-preview-bar.ukefu-cousult-invite-dialog.ukefu-theme-color(class="theme" + (inviteData.consult_invite_color ? inviteData.consult_invite_color : 1), style="padding:5px;height:160px;width:400px;background:url('" + invite_bg + "'</#if>') no-repeat")
                                                        span(style="float:right;")
                                                            i.layui-icon(style="font:size:12px;color:#ffffff;") ဆ
                                                        #ukefu-cousult-invite-content.ukefu-cousult-invite-content= inviteData.consult_invite_content
                                                        .ukefu-cousult-invite-btn
                                                            button#invite-btn.layui-btn.layui-btn-original(class="theme" + (inviteData.consult_invite_color ? inviteData.consult_invite_color : 1), style="border-color:#FFFFFF !important;color:#FFFFFF;")= inviteData.consult_invite_later ? inviteData.consult_invite_later : '稍后再说'
                                                            button.layui-btn.layui-btn-original= inviteData.consult_invite_accept ? inviteData.consult_invite_accept : '现在咨询'
                    .row
                        .col-lg-3
                        .col-lg-9
                            .layui-form-item
                                .layui-input-block
                                    button.layui-btn(lay-submit="", lay-filter="formDemo") 保存
                                    button.layui-btn.layui-btn-original(type="reset") 重置
    script(language="javascript").
        function clearInvoteupdata() {
            invoteupdata.outerHTML = invoteupdata.outerHTML;
        }
        layui.use('form', function () {
            var form = layui.form();
            form.render('select'); //刷新select选择框渲染
        });
        $(document)
            .ready(
                function () {
                    $('.ukefu-im-ping-color .ukefu-im-item')
                        .click(
                            function () {
                                var theme = $(this).attr(
                                    'data-class');
                                $('#ukefu-point .ukefu-theme-color , #invite-btn')
                                    .each(
                                        function () {
                                            $(this)
                                                .removeClass(
                                                    "theme1 theme2 theme3 theme4 theme5 theme6")
                                                .addClass(
                                                    theme);
                                        });
                                $('.ukefu-im-ping-color .ukefu-im-item')
                                    .removeClass(
                                        'ukefu-im-checked');
                                $(this).addClass('ukefu-im-checked');
                                $('#consult_invite_color').val($(this).attr('data-value'));
                            });
                });



