{include file="common/header"}
<link href="/static/admin/css/other.css" rel="stylesheet">
<main class="lyear-layout-content">
    <div class="container-fluid">
        <div class="row ant-menu-submenu">
            <div class="col-lg-12 col-b90">
                <div class="card">
                    <!-- <div class="right-card-header card-header">
                         <h4>悬浮窗口</h4>
                     </div>-->
                    <div class="card-body set_general consult">
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active">
                                <a href="#pc" role="tab" data-toggle="tab">PC悬浮窗配置</a>
                            </li>
                            <li role="presentation">
                                <a href="#mobile" role="tab" data-toggle="tab">手机悬浮窗配置</a>
                            </li>
                        </ul>
                        <form role="form" id="mForm">
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane active" id="pc">

                                    <div class="form-group">
                                        <label>缩放开关</label>
                                        <label class="lyear-switch switch-success">
                                            {if $set['web_is_zoom']}
                                            <input checked="" type="checkbox" name="web_is_zoom">
                                            {else}
                                            <input type="checkbox" name="web_is_zoom">
                                            {/if}
                                            <span></span>
                                        </label>
                                        <p class="help-block">关闭后悬浮窗无法收回，强制显示</p>
                                    </div>

                                    <div class="form-group">
                                        <label>默认缩放</label>
                                        <label class="lyear-switch switch-success">
                                            {if $set['web_default_zoom']}
                                            <input checked="" type="checkbox" name="web_default_zoom">
                                            {else}
                                            <input type="checkbox" name="web_default_zoom">
                                            {/if}
                                            <span></span>
                                        </label>

                                        <p class="help-block">加载时悬浮窗默认类型；关闭【缩放开关】失效</p>
                                    </div>

                                    <div class="form-group">
                                        <label>自动缩放</label>
                                        <label class="lyear-switch switch-success">
                                            {if $set['web_auto_zoom']}
                                            <input checked="" type="checkbox" name="web_auto_zoom">
                                            {else}
                                            <input type="checkbox" name="web_auto_zoom">
                                            {/if}
                                            <span></span>
                                        </label>

                                        <p class="help-block">开启时鼠标移动缩放；关闭则点击缩放，关闭【缩放开关】失效</p>
                                    </div>

                                    <div class="form-group">
                                        <label>显示位置</label>
                                        <div class="selected-box-bg clearfix">
                                            <div class="selected-box web">
                                                {foreach [1,3,2,4] as $v}
                                                {if $set['web_location'] == $v}
                                                <a href="javascript:;" class="active" data-id="{$v}"></a>
                                                {else}
                                                <a href="javascript:;" data-id="{$v}"></a>
                                                {/if}
                                                {/foreach}
                                            </div>
                                        </div>
                                        <p class="help-block">依次左上、右上、左中、右中</p>
                                    </div>
                                </div>

                                <div role="tabpanel" class="tab-pane" id="mobile">
                                    <div class="form-group">
                                        <label>显示位置</label>
                                        <div>
                                            {if $set['mobile_location'] == 1}
                                            <label class="radio-inline">
                                                <input type="radio" data-id="'1" value="1" name="mLocation" checked>顶部
                                            </label>
                                            <label class="radio-inline">
                                                <input type="radio" data-id="2" value="2" name="mLocation">底部
                                            </label>
                                            {else}
                                            <label class="radio-inline">
                                                <input type="radio" data-id="1" value="1" name="mLocation">顶部
                                            </label>
                                            <label class="radio-inline">
                                                <input type="radio" data-id="2" value="2" name="mLocation" checked>底部
                                            </label>
                                            {/if}

                                        </div>
                                        <p class="help-block">移动端悬浮位置</p>
                                    </div>
                                </div>
                            </div>
                            <!--                            <button type="button" id='submit' class="btn btn-default">提交</button>-->
                            <div class="form-group" style="padding:0px 24px">
                                <label>头像切换</label>
                                <div class="upload-avatar">
                                    <ul class="clearfix">
                                        <!-- li 内有a标签为自己上传的头像  -->
                                        {foreach :json_decode($set['upload_head'],1) as $v}
                                        {if $v['url'] == $set['head']}
                                        <li data-id="upload_{$v['id']}"  class="active">
                                            {else}
                                        <li data-id="upload_{$v['id']}">
                                        {/if}
                                            <img src="{$v['url']}"/>
                                            <a onclick="javascript:deleteAvatar(this);" href="javascript:;" data-id="upload_{$v['id']}"
                                               class="iconfont icon-delete"></a>
                                        </li>
                                        {/foreach}

                                        {foreach :json_decode($set['default_head'],1) as $v}
                                        {if $v['url'] == $set['head']}
                                        <li data-id="default_{$v['id']}"  class="active">
                                            {else}
                                        <li data-id="default_{$v['id']}">
                                            {/if}
                                            <img src="{$v['url']}"/>
                                        </li>
                                        {/foreach}
                                    </ul>
                                    <button class="btn btn-label btn-primary" id="upload_file">
                                        <label>
                                            <i class="iconfont icon-shangchuan"></i>
                                        </label>上传
                                        <input type="file" name="upload_file" accept="image/jpeg,image/png"/>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
{include file="common/footer"}
<script type="text/javascript" src="/static/admin/js/set.js"></script>
<script type="text/javascript" src="/static/admin/js/clipboard.min.js"></script>
<script type="text/javascript">
    var API = {
        // pc checkbox
        PC_SET: "{:adminUrl('admin/Consult/set')}",
        // pc 头像
        PC_AVATAR_SELECTED: "{:adminUrl('admin/Consult/selected')}",
        // pc 删除头像
        PC_AVATAR_DELETE: "{:adminUrl('admin/Consult/delete')}",
        // pc 上传头像
        PC_AVATAR_UPLOAD: "{:adminUrl('admin/Consult/img')}",
        // pc 位置
        PC_LOCATION: "{:adminUrl('admin/Consult/pc_location')}",
        // 移动位置
        M_LOCATION: "{:adminUrl('admin/Consult/m_location')}"
    }

    reloaded()
    $(function () {
        console.log('function');

        // 3个设置按钮更改
        $("input[type='checkbox']").on('change', function () {


            var value = $(this).is(":checked") ? 1 : 0;
            var field = $(this).attr('name');
            var index = loading();
            $.post(API.PC_SET, {value: value, field: field}, function (data) {
                console.log('set',data);
                layer.close(index);

                // 成功 失败都在msg里
                we_im_msg(data.msg);

                // 失败就刷新
                if (data.code != 0) {
                    setTimeout(function () {
                        location.reload();
                    }, 1000)
                }
            }, 'json')
        });

        // 切换头像
        $(".upload-avatar li").on('click', function () {

            if (!$(this).hasClass('active')) {
                var id = $(this).data('id');
                if (!id) return false;
                $(".upload-avatar li.active").removeClass('active');
                $(this).addClass('active');
                var index = loading();
                $.post(API.PC_AVATAR_SELECTED, {id: id}, function (data) {
                    layer.close(index);
                    // 成功 失败都在msg里
                    we_im_msg(data.msg);
                    // 失败就刷新
                    if (data.code != 0) {
                        setTimeout(function () {
                            location.reload();
                        }, 1000)
                    }
                }, 'json')
            }
        })

        // 上传图片
        $("#upload_file input").change(function () {
            console.log('upload_file');

            var formData = new FormData();
            formData.append('ajaxupfile', $('input[name="upload_file"]').get(0).files[0]);
            formData.append('user_id', 1);
            formData.append('user_type', 1);
            formData.append('field', 'ajaxupfile');
            $('input[name="upload_file"]').val('');
            var index = loading();
            $.ajax({
                url: API.PC_AVATAR_UPLOAD,
                method: 'post',
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                cache: false,
                async: false,
                success: function (res) {
                    console.log(res);
                    we_im_msg(res.msg);
                    layer.close(index);
                    // res.data.id 删除图片凭借
                    // res.data.src 图片地址
                    if (res.code == 0) {
                        var html = '<li data-id="' + res.data.id + '"><img src="' + res.data.src + '"/><a onclick="javascript:deleteAvatar(this)" class="iconfont icon-delete" href="javascript:;" data-id="' + res.data.id + '"></a></li>';
                        $(".upload-avatar ul").append(html);
                    } else {
                        setTimeout(function () {
                            location.reload();
                        }, 1000);
                    }
                }
            });
        });


        // 移动位置
        $("input[name='mLocation']").on('change', function () {
            var value = $(this).data('id');
            var index = loading();
            console.log(value);
            $.post(API.M_LOCATION, {value: value}, function (data) {
                layer.close(index);
                we_im_msg(data.msg);
                if (data.code != 0) {
                    setTimeout(function () {
                        location.reload();
                    }, 1000)
                }
            }, 'json');
        })

        // PC位置
        $(".selected-box a").on('click', function () {
            // var type = $(this).parents('.selected-box').hasClass('web') ? 'web' : 'mobile';
            if (!$(this).hasClass('active')) {
                var index = loading();
                var value = $(this).data('id');
                $('.selected-box a.active').removeClass('active');
                $(this).addClass('active');
                $.post(API.PC_LOCATION, {value: value}, function (data) {
                    layer.close(index);
                    we_im_msg(data.msg);
                    if (data.code != 0) {
                        setTimeout(function () {
                            location.reload();
                        }, 1000)
                    }
                }, 'json')
            }

        })
    });

    // 删除图片
    function deleteAvatar(obj) {
        bubbling();
        var id = $(obj).data('id');
        if (!id) return false;
        layer.confirm('确定要删除吗', function () {
            $(obj).parents('li').remove();
            $.post(API.PC_AVATAR_DELETE, {id: id}, function (data) {
                we_im_msg(data.msg);
                if (data.code != 0) {
                    setTimeout(function () {
                        location.reload();
                    }, 1000)
                }
            }, 'json')
        })
    }

    function loading() {
        return layer.load(1, {shade: [0.5, '#000']});
    }

    function bubbling() {
        window.event.stopPropagation();
    }
</script>