<?php
/**
 * 位置模块
 */
?>
<style>
    .location-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--card-color);
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
        z-index: 100;
        max-height: 80vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        animation: slideUp 0.3s ease;
    }
    
    @keyframes slideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    
    .location-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        border-bottom: 1px solid var(--border-color);
    }
    
    .location-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-color);
    }
    
    .location-close {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--background-color);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 20px;
        color: var(--text-secondary-color);
    }
    
    .location-map-container {
        height: 300px;
        background: #e9e9eb;
        position: relative;
    }
    
    .location-map-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary-color);
    }
    
    .location-pin {
        width: 48px;
        height: 48px;
        margin-bottom: 12px;
    }
    
    .location-address {
        padding: 16px;
        border-bottom: 1px solid var(--border-color);
    }
    
    .location-address-title {
        font-size: 14px;
        color: var(--text-secondary-color);
        margin-bottom: 8px;
    }
    
    .location-address-text {
        font-size: 15px;
        color: var(--text-color);
        line-height: 1.5;
    }
    
    .location-favorites {
        padding: 16px;
    }
    
    .location-favorites-title {
        font-size: 14px;
        color: var(--text-secondary-color);
        margin-bottom: 12px;
    }
    
    .location-favorite-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .location-favorite-item {
        display: flex;
        align-items: center;
        padding: 12px;
        background: var(--background-color);
        border-radius: 12px;
        cursor: pointer;
        transition: background 0.2s;
    }
    
    .location-favorite-item:hover {
        background: rgba(0,0,0,0.05);
    }
    
    .location-favorite-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        color: #fff;
    }
    
    .location-favorite-info {
        flex: 1;
    }
    
    .location-favorite-name {
        font-size: 15px;
        color: var(--text-color);
        margin-bottom: 2px;
    }
    
    .location-favorite-address {
        font-size: 12px;
        color: var(--text-secondary-color);
    }
    
    .location-action-btn {
        margin: 16px;
        height: 48px;
        background: var(--primary-color);
        color: #fff;
        border: none;
        border-radius: 24px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
    }
    
    .location-action-btn:hover {
        opacity: 0.9;
    }
</style>

<script>
    // 模拟位置数据
    const mockLocations = [
        { id: 1, name: '当前位置', address: '北京市朝阳区建国路88号', lat: 39.9042, lng: 116.4074 },
        { id: 2, name: '公司', address: '北京市海淀区中关村科技园', lat: 39.9842, lng: 116.3074 },
        { id: 3, name: '家', address: '北京市东城区王府井大街', lat: 39.9142, lng: 116.4174 },
        { id: 4, name: '学校', address: '北京市西城区西直门外大街', lat: 39.9342, lng: 116.3574 }
    ];
    
    /**
     * 显示位置选择面板
     */
    function showLocationPanel() {
        closeActionPanel();
        
        const overlay = document.createElement('div');
        overlay.className = 'panel-overlay show';
        overlay.id = 'locationOverlay';
        overlay.onclick = closeLocationPanel;
        document.body.appendChild(overlay);
        
        const panel = document.createElement('div');
        panel.className = 'location-panel';
        panel.id = 'locationPanel';
        
        panel.innerHTML = `
            <div class="location-header">
                <span class="location-title">发送位置</span>
                <div class="location-close" onclick="closeLocationPanel()">×</div>
            </div>
            <div class="location-map-container">
                <div class="location-map-placeholder">
                    <span class="location-pin"><span class="iconify" data-icon="mdi:map-marker" style="font-size:48px;color:#ff3b30;"></span></span>
                    <span>获取位置中...</span>
                </div>
            </div>
            <div class="location-address">
                <div class="location-address-title">我的位置</div>
                <div class="location-address-text" id="currentAddress">${mockLocations[0].address}</div>
            </div>
            <div class="location-favorites">
                <div class="location-favorites-title">常用地点</div>
                <div class="location-favorite-list" id="favoriteList"></div>
            </div>
            <button class="location-action-btn" onclick="sendCurrentLocation()">发送当前位置</button>
        `;
        
        document.body.appendChild(panel);
        
        // 渲染常用地点
        renderFavoriteLocations();
        
        // 加载 iconify
        loadIconify();
    }
    
    /**
     * 渲染常用地点
     */
    function renderFavoriteLocations() {
        const container = document.getElementById('favoriteList');
        if (!container) return;
        
        const icons = ['mdi:home', 'mdi:briefcase', 'mdi:school', 'mdi:map-marker'];
        
        mockLocations.slice(1).forEach((loc, index) => {
            const item = document.createElement('div');
            item.className = 'location-favorite-item';
            item.onclick = () => selectLocation(loc);
            item.innerHTML = `
                <div class="location-favorite-icon">
                    <span class="iconify" data-icon="${icons[index]}"></span>
                </div>
                <div class="location-favorite-info">
                    <div class="location-favorite-name">${loc.name}</div>
                    <div class="location-favorite-address">${loc.address}</div>
                </div>
            `;
            container.appendChild(item);
        });
    }
    
    /**
     * 选择位置
     */
    function selectLocation(location) {
        sendLocationMessage(location);
    }
    
    /**
     * 发送当前位置
     */
    function sendCurrentLocation() {
        sendLocationMessage(mockLocations[0]);
    }
    
    /**
     * 发送位置消息
     */
    function sendLocationMessage(location) {
        closeLocationPanel();
        
        fetch('<?php echo $this->url('mobileApi/sendMessage'); ?>', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                user_id: partnerId,
                content: `<div class="location-message" data-lat="${location.lat}" data-lng="${location.lng}">
                    <div class="location-icon"><span class="iconify" data-icon="mdi:map-marker"></span></div>
                    <div class="location-info">
                        <div class="location-name">${location.name}</div>
                        <div class="location-detail">${location.address}</div>
                    </div>
                </div>`
            })
        })
        .then(r => r.json())
        .then(data => {
            if (data.code === 0) {
                const container = document.getElementById('messagesContainer');
                const item = document.createElement('div');
                item.className = 'message-item me';
                item.innerHTML = `
                    <div class="message-content">
                        <div class="message-bubble">
                            <div class="location-message" style="display:flex;align-items:center;gap:12px;padding:8px;">
                                <div style="width:40px;height:40px;border-radius:50%;background:#ff3b30;display:flex;align-items:center;justify-content:center;color:#fff;">
                                    <span class="iconify" data-icon="mdi:map-marker"></span>
                                </div>
                                <div style="flex:1;">
                                    <div style="font-weight:500;font-size:14px;">${location.name}</div>
                                    <div style="font-size:12px;color:#666;">${location.address}</div>
                                </div>
                            </div>
                        </div>
                        <div class="message-time">刚刚</div>
                    </div>
                `;
                container.appendChild(item);
                scrollToBottom();
                showToast('位置发送成功');
            } else {
                showToast(data.message || '发送失败');
            }
        })
        .catch(() => {
            showToast('发送失败');
        });
    }
    
    /**
     * 关闭位置面板
     */
    function closeLocationPanel() {
        const overlay = document.getElementById('locationOverlay');
        const panel = document.getElementById('locationPanel');
        
        if (panel) {
            panel.style.transform = 'translateY(100%)';
            panel.style.transition = 'transform 0.3s';
            setTimeout(() => panel.remove(), 300);
        }
        
        if (overlay) {
            overlay.classList.remove('show');
            setTimeout(() => overlay.remove(), 300);
        }
    }
    
    function loadIconify() {
        if (!window.iconifyLoaded) {
            const script = document.createElement('script');
            script.src = 'https://code.iconify.design/1/1.0.7/iconify.min.js';
            document.head.appendChild(script);
            window.iconifyLoaded = true;
        }
    }
</script>