<?php

/**
 * @id 15
 * @name 网站右侧客服
 * @version 1.0.0
 * @description 提供网站在线客服功能，支持多种联系方式，包括微信或QQ等，可自由选择显示位置
 * @price 0
 * @type 插件
 * @website 
 * @width 480
 * @height 430
 * @thumbnail /img/id15.png
 * @tpl templates/footer.html         
 */

// 插件配置参数
$plugin_config = <<<EOT
[config_params]
插件开关 = false
显示位置 = 右侧
[/config_params]

[Plugin Instructions]
1. 此插件的联系方式配置需要在 admin\Plugin\28_contactset.php 中完成，可选择在网站左侧或右侧显示，可启用和关闭的操作。
[/Plugin Instructions]
EOT;

// 定义网站客服插件函数
function qk_website_service($params = array())
{
    // 获取本插件开关配置
    $plugin_switch = isset($params['插件开关']) ? filter_var($params['插件开关'], FILTER_VALIDATE_BOOLEAN) : true;
    // 获取显示位置配置
    $position = isset($params['显示位置']) ? $params['显示位置'] : '右侧';

    // 如果插件开关关闭，则不显示
    if (!$plugin_switch) {
        return '';
    }

    // 输出客服HTML代码
    ob_start();
?>
    <style>
        /* 客服插件样式 */
        .qk-website-service {
            position: fixed;
            <?php echo $position == '左侧' ? 'left: 0;' : 'right: 0;'; ?>top: 50%;
            transform: translateY(-50%);
            z-index: 9;
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 10px 0;
        }

        .qk-service-item {
            position: relative;
            display: flex;
            align-items: center;
        }

        .qk-service-btn {
            width: 65px;
            height: 50px;
            border-radius: <?php echo $position == '左侧' ? '0 10px 10px 0' : '10px 0 0 10px'; ?>;
            border: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: #fff;
            position: relative;
            transition: all 0.3s ease;
            overflow: hidden;
        }

        .qk-service-btn:hover {
            z-index: 10001;
            filter: brightness(1.05);
        }

        /* 微信客服按钮 */
        .qk-service-item:first-child .qk-service-btn {
            background: #07C160;
        }

        /* QQ客服按钮 */
        .qk-service-item:nth-child(2) .qk-service-btn {
            background: #12B7F5;
        }

        /* 在线客服按钮 */
        .qk-service-item:nth-child(3) .qk-service-btn {
            background: #FF6B6B;
            height: 40px;
        }

        /* 45度丝滑扫光效果 */
        .qk-service-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -150%;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 0.1) 30%,
                    rgba(255, 255, 255, 0.5) 50%,
                    rgba(255, 255, 255, 0.1) 70%,
                    rgba(255, 255, 255, 0) 100%);
            transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1;
            transform: skewX(-25deg);
            /* 增加倾斜感 */
        }

        .qk-service-btn:hover::before {
            left: 150%;
        }

        .qk-service-btn>* {
            position: relative;
            z-index: 2;
        }

        /* 图标样式 */
        .qk-service-btn svg {
            object-fit: contain;
            flex-shrink: 0;
            transition: transform 0.3s ease;
        }

        .qk-service-btn:hover svg {
            transform: scale(1.1);
        }

        /* 文字按钮样式 */
        .qk-service-text {
            font-size: 12px;
            font-weight: 500;
            text-align: center;
            padding: 5px;
            line-height: 1.3;
            color: #fff;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }

        /* 二维码样式 */
        .qk-qrcode {
            position: absolute;
            <?php echo $position == '左侧' ? 'left: 100%;' : 'right: 100%;'; ?>top: 0;
            width: 100px;
            height: 100px;
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 0px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 8px;
            display: none;
            z-index: 10000;
        }

        .qk-qrcode img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* 悬停显示二维码 */
        .qk-service-item:hover .qk-qrcode {
            display: block;
        }

        /* 确保二维码在悬停时保持显示 */
        .qk-qrcode:hover {
            display: block;
        }
    </style>

    <div class="qk-website-service">
        <!-- 客服1：微信 -->
        <div class="qk-service-item">
            <a href="javascript:void(0);" class="qk-service-btn qk-wechat-btn">
                <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 -194 2048 1668" fill="currentColor">
                    <path d="M555 270.50Q580 246 580 205Q580 164 555 139Q530 114 489 114Q446 114 413 139.50Q380 165 380 205Q380 244 413 269.50Q446 295 489 295Q530 295 555 270.50ZM1323 712Q1323 684 1297.50 662Q1272 640 1232 640Q1205 640 1182.50 662.50Q1160 685 1160 712Q1160 740 1182.50 762.50Q1205 785 1232 785Q1272 785 1297.50 763Q1323 741 1323 712ZM1062.50 270.50Q1087 246 1087 205Q1087 164 1062.50 139Q1038 114 997 114Q954 114 921 139.50Q888 165 888 205Q888 244 921 269.50Q954 295 997 295Q1038 295 1062.50 270.50ZM1722 712Q1722 684 1696 662Q1670 640 1631 640Q1604 640 1581.50 662.50Q1559 685 1559 712Q1559 740 1581.50 762.50Q1604 785 1631 785Q1670 785 1696 763Q1722 741 1722 712ZM1456 315Q1425 311 1386 311Q1217 311 1075 388Q933 465 851.50 596.50Q770 728 770 884Q770 962 793 1036Q758 1039 725 1039Q699 1039 675 1037.50Q651 1036 620 1031Q589 1026 575.50 1024Q562 1022 521 1013.50Q480 1005 471 1003L218 1130L290 912Q0 709 0 422Q0 253 97.50 111Q195-31 361.50-112.50Q528-194 725-194Q901-194 1057.50-128Q1214-62 1319.50 54.50Q1425 171 1456 315ZM2048 876Q2048 993 1979.50 1099.50Q1911 1206 1794 1293L1849 1474L1650 1365Q1500 1402 1432 1402Q1263 1402 1121 1331.50Q979 1261 897.50 1140Q816 1019 816 876Q816 733 897.50 612Q979 491 1121 420.50Q1263 350 1432 350Q1593 350 1735 420.50Q1877 491 1962.50 612.50Q2048 734 2048 876Z" />
                </svg>
            </a>
            <!-- 微信二维码 -->
            <div class="qk-qrcode qk-wechat-qrcode">
                <img src="{qk_Plugin:ID28_'微信二维码'}" alt="微信二维码" onerror="this.style.display='none';this.parentElement.innerHTML='<div style=display:flex;align-items:center;justify-content:center;height:100%;font-size:12px;color:#999;>暂无二维码</div>';">
            </div>
        </div>

        <!-- 客服2：QQ -->
        <div class="qk-service-item">
            <a href="javascript:void(0);" class="qk-service-btn qk-qq-btn" target="_blank">
                <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12.003 2c-2.265 0-6.29 1.364-6.29 7.325v1.195S3.55 14.96 3.55 17.474c0 .665.17 1.025.281 1.025.114 0 .902-.484 1.748-2.072 0 0-.18 2.197 1.904 3.967 0 0-1.77.495-1.77 1.182 0 .686 4.078.43 6.29.43 2.21 0 6.287.257 6.287-.43 0-.687-1.768-1.182-1.768-1.182 2.085-1.77 1.905-3.967 1.905-3.967.845 1.588 1.634 2.072 1.746 2.072.111 0 .283-.36.283-1.025 0-2.514-2.166-6.954-2.166-6.954V9.325C18.29 3.364 14.268 2 12.003 2z" />
                </svg>
            </a>
            <!-- QQ二维码 -->
            <div class="qk-qrcode qk-qq-qrcode">
                <img src="{qk_Plugin:ID28_'QQ号1二维码'}" alt="QQ二维码" onerror="this.style.display='none';this.parentElement.innerHTML='<div style=display:flex;align-items:center;justify-content:center;height:100%;font-size:12px;color:#999;>暂无二维码</div>';">
            </div>
        </div>

        <!-- 客服3：在线客服 -->
        <div class="qk-service-item">
            <a href="{qk_Plugin:ID28_'在线客服链接'}" class="qk-service-btn" target="_blank">
                <span class="qk-service-text">联系我</span>
            </a>
        </div>
    </div>
<?php

    return ob_get_clean();
}

// 如果直接调用插件文件，则执行函数
if (!isset($_POST['plugin'])) {
    echo qk_website_service($config_params);
}
?>