<?php include_once(mvc::$cfg['PATH_TPL'].'public/headBase.php');?>
<link rel="stylesheet" href="<?=mvc::$cfg['SELF_URL']?>static/css/wxTxl.css">
<div class="wx-txl-page">
    <div class="wx-txl-layout">
        <div class="wx-txl-sidebar">
            <div class="wx-txl-shell">
                <div class="wx-txl-header">
                    <div class="wx-txl-title-row">
                        <div class="wx-txl-title" id="wxUserHeader">
                            <span class="wx-txl-title-avatar">
                                <img id="wxUserHeaderAvatar" src="<?=mvc::$cfg['SELF_URL']?>static/images/noimg.png" alt="当前微信用户头像" onerror="this.onerror=null;this.src='<?=mvc::$cfg['SELF_URL']?>static/images/noimg.png';">
                            </span>
                            <span class="wx-txl-title-text" id="wxUserHeaderName">当前微信用户</span>
                        </div>
                        <button type="button" class="wx-txl-filter-toggle" id="toolbarToggleBtn" aria-expanded="false" title="展开筛选栏">
                            <span class="wx-txl-filter-toggle-icon" aria-hidden="true">
                                <span class="wx-txl-filter-toggle-circle"></span>
                                <span class="wx-txl-filter-toggle-handle"></span>
                            </span>
                        </button>
                    </div>
                    <div class="wx-txl-header-actions" id="txlHeaderActions">
                        <button type="button" class="wx-txl-header-btn" id="txlMultiToggleBtn">多选</button>
                        <div class="wx-txl-header-multi-actions" id="txlHeaderMultiActions">
                            <button type="button" class="wx-txl-header-btn" id="txlSelectAllBtn">全选</button>
                            <button type="button" class="wx-txl-header-btn" id="txlClearSelectionBtn">取消全选</button>
                            <button type="button" class="wx-txl-header-btn wx-txl-header-btn-primary" id="txlFinishSelectionBtn">完成</button>
                        </div>
                    </div>
                </div>
                <div class="wx-txl-toolbar" id="txlToolbar">
                    <div class="wx-txl-form-item wx-txl-switch-row">
                        <span class="wx-txl-switch-label">仅看未绑定</span>
                        <button type="button" class="wx-txl-custom-switch" id="bindedSwitch" aria-checked="false" title="切换绑定筛选">
                            <span class="wx-txl-custom-switch-knob"></span>
                        </button>
                    </div>
                    <div class="wx-txl-form-item wx-txl-search-row">
                        <input type="text" class="layui-input" id="mobileKeyword" placeholder="输入手机号 / 宜配账号后自动筛选">
                    </div>
                    <div class="wx-txl-form-item wx-txl-search-row">
                        <input type="text" class="layui-input" id="nicknameKeyword" placeholder="输入微信昵称后自动筛选">
                    </div>
                    <div class="wx-txl-actions">
                        <button type="button" class="layui-btn layui-btn-primary" id="resetBtn">重置</button>
                    </div>
                </div>
                <div class="wx-txl-body">
                    <div class="wx-txl-scroll" id="txlContainer">
                        <div class="wx-txl-status">
                            <!-- <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop">&#xe63d;</i>
                            <span>通讯录加载中...</span> -->
                        </div>
                    </div>
                    <div class="wx-txl-loading" id="txlLoading">
                        <div class="wx-txl-loading-box">
                            <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop">&#xe63d;</i>
                            <span>筛选中...</span>
                        </div>
                    </div>
                    <div class="wx-txl-index" id="txlIndex"></div>
                </div>
                <div class="wx-txl-footer">
                    <div class="wx-txl-batch-actions" id="txlBatchActions">
                        <div class="wx-txl-selection-info" id="txlSelectionInfo">已选 <em id="txlSelectedCount">0</em> 位</div>
                        <button type="button" class="layui-btn layui-btn-primary" id="txlBatchAllowBtn">批量设为可推送</button>
                        <button type="button" class="layui-btn layui-btn-primary" id="txlBatchBlockBtn">批量禁止推送</button>
                    </div>
                    <div class="wx-txl-footer-info">
                        <div class="wx-txl-update-info" id="txlUpdateInfo">
                            <span class="wx-txl-update-title">更新</span>
                            <span class="wx-txl-update-item">全量：<em id="txlUpdateFull">--</em></span>
                            <span class="wx-txl-update-item">部分：<em id="txlUpdatePartial">--</em></span>
                        </div>
                        <div class="wx-txl-count" id="txlCount">0 位联系人</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="wx-txl-content">
            <div class="wx-txl-detail-body" id="txlDetailPanel">
            </div>
        </div>
        <div class="wx-txl-content wx-txl-extra">
            <div class="wx-txl-side-panel-body" id="txlYpPanel">
            </div>
        </div>  
    </div>
</div>    
<?php include_once(mvc::$cfg['PATH_TPL'].'public/footBase.php');?>
<script type="text/javascript">
var defaultAvatar = '<?=mvc::$cfg['SELF_URL']?>static/images/noimg.png';
var txlFilters = {
    unbinded: 0,
    mobile: '',
    nickname: ''
};
var autoSearchTimer = null;
var txlContacts = [];
var currentSelectedId = 0;
var detailLayer = null;
var isToolbarOpen = false;
var isMultiSelectMode = false;
var txlSelectedMap = {};
var ypLogoBase = '<?=mvc::$cfg['FILE_CENTER']['yp']['url_get']?>&c=yp_logo&f=';
var ypLogoSuffix = '<?=mvc::$cfg['FILE_CENTER']['yp']['get_uri']?>';
var wxUserInfo = null;

function escapeHtml(str){
    return String(str || '').replace(/[&<>"']/g, function(match){
        return {
            '&':'&amp;',
            '<':'&lt;',
            '>':'&gt;',
            '"':'&quot;',
            "'":'&#39;'
        }[match];
    });
}

function renderStatus(text, icon){
    $('#txlContainer').html(
        '<div class="wx-txl-status">' +
            '<i class="layui-icon">' + icon + '</i>' +
            '<span>' + escapeHtml(text) + '</span>' +
        '</div>'
    );
    $('#txlIndex').html('');
}

function renderDetailPlaceholder(title, desc){
    $('#txlDetailPanel').html('');
}

function renderYpPlaceholder(title, desc){
    $('#txlYpPanel').html('');
}

function toggleLoading(show, text){
    if(text){
        $('#txlLoading span').text(text);
    }
    $('#txlLoading').toggleClass('is-show', !!show);
}

function setToolbarState(isOpen){
    isToolbarOpen = !!isOpen;
    $('#txlToolbar').toggleClass('is-open', isToolbarOpen);
    $('#toolbarToggleBtn')
        .toggleClass('is-active', isToolbarOpen)
        .attr('aria-expanded', isToolbarOpen ? 'true' : 'false')
        .attr('title', isToolbarOpen ? '收起筛选栏' : '展开筛选栏');
}

function formatAddressUpdateDate(value){
    var raw = normalizeText(value);
    var matched = raw.match(/(\d{4})[-\/](\d{1,2})[-\/](\d{1,2})/);
    var date = null;
    if(matched){
        date = new Date(parseInt(matched[1], 10), parseInt(matched[2], 10) - 1, parseInt(matched[3], 10));
    }else if(/^\d+$/.test(raw)){
        var timestamp = parseInt(raw, 10);
        if(raw.length === 10){
            timestamp *= 1000;
        }
        date = new Date(timestamp);
    }else if(raw){
        date = new Date(raw.replace(/-/g, '/'));
    }
    if(!date || isNaN(date.getTime())){
        return '--';
    }
    return (date.getMonth() + 1) + '月' + date.getDate() + '日';
}

function renderUpdateInfo(info){
    var fullText = '--';
    var partialText = '--';
    if(info){
        fullText = formatAddressUpdateDate(info.wu_address_utime);
        partialText = formatAddressUpdateDate(info.wu_address_utime2);
    }
    $('#txlUpdateFull').text(fullText);
    $('#txlUpdatePartial').text(partialText);
}

function renderWxUserHeader(info){
    var avatar = defaultAvatar;
    var name = '当前微信用户';
    if(info){
        avatar = normalizeImageUrl(info.wu_headimg) || defaultAvatar;
        name = normalizeText(info.wu_nickname) || '未设置昵称';
    }
    $('#wxUserHeaderAvatar')
        .attr('src', avatar)
        .attr('alt', name);
    $('#wxUserHeaderName').text(name);
}

function getSortInitial(item){
    var initial = (item.initial || '#').toUpperCase();
    return /^[A-Z]$/.test(initial) ? initial : '#';
}

function getDisplayName(item){
    return item.display_name || item.wu_rename || item.wu_nickname || '未设置昵称';
}

function normalizeText(value){
    return $.trim(String(value == null ? '' : value));
}

function normalizeImageUrl(url){
    return normalizeText(url).replace(/^[`"' ]+|[`"' ]+$/g, '');
}

function getContactById(contactId){
    var id = parseInt(contactId, 10) || 0;
    var matched = null;
    $.each(txlContacts, function(_, item){
        if((parseInt(item.wu_id, 10) || 0) === id){
            matched = item;
            return false;
        }
    });
    return matched;
}

function getActionContactById(contactId){
    var contact = getContactById(contactId);
    var id = parseInt(contactId, 10) || 0;
    if(contact){
        return contact;
    }
    if(wxUserInfo && (parseInt(wxUserInfo.wu_id, 10) || 0) === id){
        return wxUserInfo;
    }
    return null;
}

function getContactAutoSendValue(contact){
    return parseInt(contact && contact.wua_autosend, 10) === 1 ? 1 : -1;
}

function getContactAutoSendText(contact){
    return getContactAutoSendValue(contact) === 1 ? '可推送' : '禁止推送';
}

function getTargetAutoSendValue(contact){
    return getContactAutoSendValue(contact) === 1 ? -1 : 1;
}

function renderAutoSendSwitch(wuaId, autoSendValue, extraClass){
    wuaId = parseInt(wuaId, 10) || 0;
    autoSendValue = parseInt(autoSendValue, 10) === 1 ? 1 : -1;
    return '' +
        '<button type="button" class="wx-txl-custom-switch js-toggle-autosend-switch' + (autoSendValue === 1 ? ' is-on' : '') + (extraClass ? (' ' + extraClass) : '') + '"' +
            ' data-wua-id="' + wuaId + '"' +
            ' data-autosend="' + (autoSendValue === 1 ? -1 : 1) + '"' +
            ' aria-checked="' + (autoSendValue === 1 ? 'true' : 'false') + '"' +
            ' title="切换推送状态">' +
            '<span class="wx-txl-custom-switch-text wx-txl-custom-switch-text-off">禁止推送</span>' +
            '<span class="wx-txl-custom-switch-text wx-txl-custom-switch-text-on">可推送</span>' +
            '<span class="wx-txl-custom-switch-knob"></span>' +
        '</button>';
}

function getVisibleSelectableIds(){
    var ids = [];
    $.each(txlContacts, function(_, item){
        var wuaId = parseInt(item.wua_id, 10) || 0;
        if(wuaId){
            ids.push(wuaId);
        }
    });
    return ids;
}

function getSelectedWuaIds(){
    return Object.keys(txlSelectedMap).filter(function(key){
        return !!txlSelectedMap[key];
    }).map(function(key){
        return parseInt(key, 10) || 0;
    }).filter(function(id){
        return !!id;
    });
}

function pruneSelectedContacts(list){
    var validMap = {};
    $.each(list || [], function(_, item){
        var wuaId = parseInt(item.wua_id, 10) || 0;
        if(wuaId){
            validMap[wuaId] = true;
        }
    });
    $.each(Object.keys(txlSelectedMap), function(_, key){
        if(!validMap[key]){
            delete txlSelectedMap[key];
        }
    });
}

function updateMultiSelectUi(){
    var selectedIds = getSelectedWuaIds();
    var visibleIds = getVisibleSelectableIds();
    $('#txlHeaderActions').toggleClass('is-multi-mode', isMultiSelectMode);
    $('#txlSelectionInfo, #txlBatchActions').toggleClass('is-show', isMultiSelectMode);
    $('#txlSelectedCount').text(selectedIds.length);
    $('#txlSelectAllBtn').prop('disabled', !visibleIds.length || selectedIds.length === visibleIds.length);
    $('#txlClearSelectionBtn, #txlBatchAllowBtn, #txlBatchBlockBtn').prop('disabled', !selectedIds.length);
}

function setMultiSelectMode(isOn){
    isMultiSelectMode = !!isOn;
    if(!isMultiSelectMode){
        txlSelectedMap = {};
    }
    updateMultiSelectUi();
    renderList(txlContacts || []);
}

function toggleContactSelection(wuaId){
    wuaId = parseInt(wuaId, 10) || 0;
    if(!wuaId){
        return;
    }
    if(txlSelectedMap[wuaId]){
        delete txlSelectedMap[wuaId];
    }else{
        txlSelectedMap[wuaId] = true;
    }
    updateMultiSelectUi();
    renderList(txlContacts || []);
}

function selectAllContacts(){
    $.each(getVisibleSelectableIds(), function(_, wuaId){
        txlSelectedMap[wuaId] = true;
    });
    updateMultiSelectUi();
    renderList(txlContacts || []);
}

function clearSelectedContacts(){
    txlSelectedMap = {};
    updateMultiSelectUi();
    renderList(txlContacts || []);
}

function getSexIcon(sex){
    sex = parseInt(sex, 10) || 0;
    if(sex === 1){
        return '<span class="wx-txl-sex wx-txl-sex-male" title="男">&#9794;</span>';
    }
    if(sex === 2){
        return '<span class="wx-txl-sex wx-txl-sex-female" title="女">&#9792;</span>';
    }
    return '';
}

function formatRegion(detail){
    var regionParts = [];
    $.each([detail.province, detail.city], function(_, part){
        part = normalizeText(part);
        if(part && $.inArray(part, regionParts) === -1){
            regionParts.push(part);
        }
    });
    return regionParts.join(' ');
}

function getContactAvatar(item, useBig){
    var detail = item.detail_info || {};
    var avatar = useBig
        ? (detail.bigHead || detail.smallHead || item.wu_headimg)
        : (detail.smallHead || item.wu_headimg || detail.bigHead);
    avatar = normalizeImageUrl(avatar);
    return avatar || defaultAvatar;
}

function getYpLogoUrl(ypInfo){
    if(!ypInfo || !normalizeText(ypInfo.u_logo)){
        return defaultAvatar;
    }
    return ypLogoBase + encodeURIComponent(normalizeText(ypInfo.u_logo)) + ypLogoSuffix;
}

function syncActiveContact(){
    $('#txlContainer .wx-txl-item').removeClass('is-active');
    if(!currentSelectedId){
        return;
    }
    $('#txlContainer .wx-txl-item[data-id="' + currentSelectedId + '"]').addClass('is-active');
}

function renderDetail(contact){
    if(!contact){
        renderDetailPlaceholder();
        return;
    }
    var detail = contact.detail_info || {};
    var remark = normalizeText(detail.remark || contact.wu_rename);
    var nickname = normalizeText(detail.nickName || contact.wu_nickname || '未设置昵称');
    var title = remark || nickname || '未设置昵称';
    var aliasName = normalizeText(detail.aliasName);
    var wxid = normalizeText(detail.userName);
    var region = formatRegion(detail);
    var mobile = normalizeText(detail.mobile || contact.mobile);
    var signature = normalizeText(detail.signature);
    var avatarSmall = getContactAvatar(contact, false);
    var avatarBig = getContactAvatar(contact, true);
    var bindBtnText = contact.is_bind ? '改绑宜配账号' : '绑定宜配账号';
    var friendRows = [
        {label: '备注', value: remark || '未设置'},
        {
            label: '手机号',
            value: mobile || '未设置',
            // className: 'js-edit-mobile',
            // dataAttrs: ' data-mobile="' + escapeHtml(mobile) + '" data-wu-id="' + (parseInt(contact.wu_id, 10) || 0) + '" data-wua-id="' + (parseInt(contact.wua_id, 10) || 0) + '"',
            // hint: '<span class="wx-txl-detail-edit-hint">点击修改</span>'
        },
        // {
        //     label: '推送设置',
        //     rawHtml: (parseInt(contact.wua_id, 10) || 0)
        //         ? (
        //             '<div class="wx-txl-detail-switch-line">' +
        //                 '<span class="wx-txl-detail-switch-state">' + escapeHtml(getContactAutoSendText(contact)) + '</span>' +
        //                 renderAutoSendSwitch(contact.wua_id, getContactAutoSendValue(contact), 'wx-txl-detail-switch-btn') +
        //             '</div>'
        //         )
        //         : escapeHtml(getContactAutoSendText(contact))
        // },
        {label: '个性签名', value: signature || '未设置'},
    ];
    var buildRows = function(rows){
        var html = '';
        $.each(rows, function(_, row){
            var rowClassName = row.className ? (' ' + row.className) : '';
            var dataAttrs = row.dataAttrs || '';
            html += '' +
                '<div class="wx-txl-detail-row' + rowClassName + '"' + dataAttrs + '>' +
                    '<div class="wx-txl-detail-label">' + escapeHtml(row.label) + '</div>' +
                    '<div class="wx-txl-detail-value">' + (row.rawHtml || (escapeHtml(row.value) + (row.hint || ''))) + '</div>' +
                '</div>';
        });
        return html;
    };

    $('#txlDetailPanel').html(
        '<div class="wx-txl-detail-card">' +
            '<div class="wx-txl-card-head">' +
                '<div class="wx-txl-card-head-main">' +
                    '<div class="wx-txl-card-head-title">微信账号详情</div>' +
                    '<div class="wx-txl-card-head-desc">展示当前联系人的微信资料与添加信息</div>' +
                '</div>' +
                '<button type="button" class="wx-txl-head-action-btn js-bind-yp-btn" data-wu-id="' + (parseInt(contact.wu_id, 10) || 0) + '" data-bind-text="' + escapeHtml(bindBtnText) + '">' + escapeHtml(bindBtnText) + '</button>' +
            '</div>' +
            '<div class="wx-txl-profile">' +
                '<div class="wx-txl-profile-main">' +
                    '<div class="wx-txl-profile-avatar js-avatar-preview" data-avatar="' + escapeHtml(avatarBig) + '" data-name="' + escapeHtml(title) + '">' +
                        '<img src="' + escapeHtml(avatarSmall) + '" alt="' + escapeHtml(title) + '" onerror="this.onerror=null;this.src=\'' + defaultAvatar + '\';">' +
                    '</div>' +
                    '<div class="wx-txl-profile-info">' +
                        '<div class="wx-txl-profile-name-row">' +
                            '<div class="wx-txl-profile-name">' + escapeHtml(title) + '</div>' +
                            getSexIcon(detail.sex) +
                        '</div>' +
                        '<div class="wx-txl-profile-meta">' +
                            ('<span><span class="wx-txl-profile-meta-label">昵称:</span>' + escapeHtml(nickname) + '</span>') +
                            '<span><span class="wx-txl-profile-meta-label">微信号:</span>' + escapeHtml(aliasName || wxid) + '</span>' +
                            '<span><span class="wx-txl-profile-meta-label">地区:</span>' + escapeHtml(region || '未设置') + '</span>' +
                        '</div>' +
                    '</div>' +
                '</div>' +
            '</div>' +
            '<div class="wx-txl-detail-section">' +
                '<div class="wx-txl-detail-section-title">详细信息</div>' +
                buildRows(friendRows) +
            '</div>' +
        '</div>'
    );
}

function renderYpInfo(contact){
    var ypInfo = contact && contact.ypu_info ? contact.ypu_info : {};
    if($.isEmptyObject(ypInfo)){
        renderYpPlaceholder('未找到相关宜配账号信息', '当前联系人未匹配到宜配账号资料，请确认绑定关系或稍后再试。');
        return;
    }
    var accountName = normalizeText(ypInfo.u_nickname || ypInfo.u_name || '未设置宜配账号名称');
    var loginName = normalizeText(ypInfo.u_name);
    var realName = normalizeText(ypInfo.u_real_name);
    var mobile = normalizeText(ypInfo.u_mobile);
    var ctr_comname = normalizeText(ypInfo.ctr_comname);
    var email = normalizeText(ypInfo.u_email);
    var userId = parseInt(ypInfo.u_id, 10) || 0;
    var logo = getYpLogoUrl(ypInfo);
    var rows = [
        {label: '用户名', value: loginName || '未设置'},
        {label: '真实姓名', value: realName || '未设置'},
        {label: '手机号', value: mobile || '未设置'},
        {label: '公司名称', value: ctr_comname || '未设置'},
        {label: '邮箱', value: email || '未设置'}
    ];
    var html = '' +
        '<div class="wx-txl-yp-card">' +
            '<div class="wx-txl-card-head">' +
                '<div class="wx-txl-card-head-title">宜配账号详情</div>' +
                '<div class="wx-txl-card-head-desc">展示当前联系人已匹配的宜配账号资料</div>' +
            '</div>' +
            '<div class="wx-txl-yp-top">' +
                '<div class="wx-txl-yp-logo">' +
                    '<img src="' + escapeHtml(logo) + '" alt="' + escapeHtml(accountName) + '" onerror="this.onerror=null;this.src=\'' + defaultAvatar + '\';">' +
                '</div>' +
                '<div class="wx-txl-yp-main">' +
                    '<div class="wx-txl-yp-name">' + escapeHtml(accountName) + '</div>' +
                    '<div class="wx-txl-yp-subname">' + escapeHtml(loginName || '未设置登录名') + '</div>' +
                    '<div class="wx-txl-yp-tag">已匹配宜配账号</div>' +
                '</div>' +
            '</div>' +
            '<div class="wx-txl-yp-section">' +
                '<div class="wx-txl-yp-section-title">账号资料</div>';
    $.each(rows, function(_, row){
        html += '' +
            '<div class="wx-txl-yp-row">' +
                '<div class="wx-txl-yp-label">' + escapeHtml(row.label) + '</div>' +
                '<div class="wx-txl-yp-value">' + escapeHtml(row.value) + '</div>' +
            '</div>';
    });
    html += '' +
            '</div>' +
        '</div>';
    $('#txlYpPanel').html(html);
}

function syncDetailAfterList(){
    if(!txlContacts.length){
        currentSelectedId = 0;
        renderDetailPlaceholder('暂无联系人详情', '当前筛选条件下没有联系人，调整左侧筛选后再试。');
        renderYpPlaceholder('未找到相关宜配账号信息', '当前筛选条件下没有联系人，因此没有可展示的宜配账号资料。');
        return;
    }
    if(currentSelectedId){
        var selected = getContactById(currentSelectedId);
        if(selected){
            renderDetail(selected);
            renderYpInfo(selected);
            syncActiveContact();
            return;
        }
    }
    currentSelectedId = 0;
    syncActiveContact();
    renderDetailPlaceholder();
    renderYpPlaceholder();
}

function previewAvatar(url, name){
    url = normalizeImageUrl(url);
    if(!url){
        return;
    }
    if(detailLayer && detailLayer.open){
        detailLayer.open({
            type: 1,
            title: escapeHtml(name || '头像预览'),
            shadeClose: true,
            closeBtn: 1,
            offset: '40px',
            area: ['auto', 'auto'],
            maxWidth: $(window).width() - 40,
            maxHeight: $(window).height() - 24,
            skin: 'layui-layer-no-border wx-txl-avatar-layer',
            content: '<div class="wx-txl-avatar-preview-box"><img src="' + escapeHtml(url) + '" alt="' + escapeHtml(name || '头像预览') + '" onerror="this.onerror=null;this.src=\'' + defaultAvatar + '\';"></div>'
        });
        return;
    }
    window.open(url, '_blank');
}

function sortContacts(list){
    return list.slice().sort(function(a, b){
        var initialA = getSortInitial(a);
        var initialB = getSortInitial(b);
        if(initialA === '#' && initialB !== '#') return 1;
        if(initialA !== '#' && initialB === '#') return -1;
        if(initialA !== initialB) return initialA.localeCompare(initialB);
        return getDisplayName(a).localeCompare(getDisplayName(b), 'zh-CN');
    });
}

function buildGroups(list){
    var groups = {};
    $.each(sortContacts(list), function(_, item){
        var initial = getSortInitial(item);
        if(!groups[initial]){
            groups[initial] = [];
        }
        groups[initial].push(item);
    });
    return groups;
}

function renderIndex(letters){
    if(!letters.length){
        $('#txlIndex').html('');
        return;
    }
    var html = '';
    $.each(letters, function(_, letter){
        html += '<a href="javascript:;" data-letter="' + letter + '">' + letter + '</a>';
    });
    $('#txlIndex').html(html);
}

function renderList(list){
    txlContacts = list || [];
    pruneSelectedContacts(txlContacts);
    updateMultiSelectUi();
    if(!list.length){
        renderStatus('暂无匹配的通讯录联系人', '&#xe69c;');
        $('#txlCount').text('0 位联系人');
        syncDetailAfterList();
        return;
    }
    var groups = buildGroups(list);
    var letters = Object.keys(groups);
    var html = '';
    $.each(letters, function(_, letter){
        html += '<div class="wx-txl-group" id="group-' + letter + '">';
        html += '<div class="wx-txl-group-title">' + letter + '</div>';
        html += '<ul class="wx-txl-list">';
        $.each(groups[letter], function(index, item){
            var nickname = escapeHtml(item.wu_nickname || '未设置昵称');
            var displayName = escapeHtml(getDisplayName(item));
            var avatar = escapeHtml(getContactAvatar(item, false));
            var bindTag = item.is_bind
                ? '<span class="wx-txl-tag wx-txl-tag-bind">已绑定</span>'
                : '<span class="wx-txl-tag wx-txl-tag-unbind">未绑定</span>';
            var subMeta = item.wu_uid ? ('宜配账号: ' + escapeHtml(item.ypu_name)) : '';
            var itemId = parseInt(item.wu_id, 10) || 0;
            var wuaId = parseInt(item.wua_id, 10) || 0;
            var isChecked = !!txlSelectedMap[wuaId];
            var autoSendValue = getContactAutoSendValue(item);
            var autoSendText = getContactAutoSendText(item);
            html += '' +
                '<li class="wx-txl-item' + (isMultiSelectMode ? ' is-select-mode' : '') + '" data-id="' + itemId + '" data-wua-id="' + wuaId + '">' +
                    (isMultiSelectMode
                        ? ('<button type="button" class="wx-txl-check-btn js-contact-check' + (isChecked ? ' is-checked' : '') + '" data-wua-id="' + wuaId + '" aria-checked="' + (isChecked ? 'true' : 'false') + '" title="选择联系人"></button>')
                        : '') +
                    '<div class="wx-txl-avatar">' +
                        '<img src="' + avatar + '" alt="' + displayName + '" onerror="this.onerror=null;this.src=\'' + defaultAvatar + '\';">' +
                    '</div>' +
                    '<div class="wx-txl-main">' +
                        '<div class="wx-txl-name">' + displayName + '</div>' +
                        '<div class="wx-txl-meta">' +
                            bindTag +
                            (item.ctr_id? ( '<span class="wx-txl-meta-text">公司名称: <a class="wx-txl-company-link" lay-href="<?=mvc::$cfg['SELF_URI']?>customer/detail?ctrId=' + item.ctr_id + '">' + item.ctr_comname + '</a></span>') : ('<span class="wx-txl-meta-text">' + escapeHtml(subMeta || nickname) + '</span>')) +
                        '</div>' +
                        '<div class="wx-txl-push-row">' +
                            renderAutoSendSwitch(wuaId, autoSendValue) +
                        '</div>' +
                    '</div>' +
                    (isMultiSelectMode ? '' : '<i class="layui-icon wx-txl-arrow">&#xe602;</i>') +
                '</li>';
        });
        html += '</ul></div>';
    });
    $('#txlContainer').html(html);
    $('#txlCount').text(list.length + ' 位联系人');
    renderIndex(letters);
    syncDetailAfterList();
}

function loadAddressList(){
    toggleLoading(true, '筛选中...');
    $.ajax({
        url: SELF_URI + 'wxTxl/list?isAjax=1',
        type: 'GET',
        dataType: 'json',
        data: txlFilters,
        success: function(res){
            if(!AJAX.checkData(res)) return false;
            var list = res.data || [];
            wxUserInfo = res.wx_user;
            renderWxUserHeader(wxUserInfo);
            renderUpdateInfo(wxUserInfo);
            renderList(list);
        },
        error: function(){
            renderWxUserHeader(null);
            renderUpdateInfo(null);
            renderStatus('加载失败，请稍后重试', '&#x1006;');
        },
        complete: function(){
            toggleLoading(false);
        }
    });
}

function updateAutoSendSetting(wuaIds, autosend, done){
    wuaIds = $.isArray(wuaIds) ? wuaIds : [wuaIds];
    wuaIds = $.map(wuaIds, function(id){
        id = parseInt(id, 10) || 0;
        return id ? id : null;
    });
    if(!wuaIds.length){
        detailLayer.msg('请选择需要设置的联系人');
        return;
    }
    autosend = parseInt(autosend, 10) === 1 ? 1 : -1;
    $.ajax({
        url: SELF_URI + 'wxTxl/updateAutoSend?isAjax=1&wua_ids=' + encodeURIComponent(wuaIds.join(',')) + '&autosend=' + encodeURIComponent(autosend),
        type: 'GET',
        dataType: 'json',
        success: function(res){
            if(!AJAX.checkData(res)) return false;
            if(typeof done === 'function'){
                done();
            }
            loadAddressList();
        }
    });
}

function bindYpAccount(wuId, bindKey, dialogIndex){
    $.ajax({
        url: SELF_URI + 'wxTxl/bindYP?isAjax=1&wu_id=' + encodeURIComponent(wuId) + '&bindKey=' + encodeURIComponent(bindKey),
        type: 'GET',
        dataType: 'json',
        success: function(res){
            if(!AJAX.checkData(res)) return false;
            if(detailLayer && typeof dialogIndex !== 'undefined'){
                detailLayer.close(dialogIndex);
            }
            loadAddressList();
        }
    });
}

function openBindYpDialog(contact){
    if(!contact){
        return;
    }
    var bindTitle = contact.is_bind ? '改绑宜配账号' : '绑定宜配账号';
    var defaultValue = normalizeText((contact.ypu_info && contact.ypu_info.u_name) || contact.mobile || '');
    detailLayer.prompt({
        title: bindTitle,
        formType: 0,
        value: defaultValue,
        maxlength: 60,
        area: ['360px', '40px'],
        shadeClose: false,
        success: function(layero){
            $(layero).find('.layui-layer-input').attr('placeholder', '请输入宜配用户名或手机号');
        }
    }, function(value, index){
        value = normalizeText(value);
        if(!value){
            detailLayer.msg('请输入手机号或宜配用户名');
            return;
        }
        bindYpAccount(contact.wu_id, value, index);
    });
}

function updateContactMobile(wuId, wuaId, mobile, dialogIndex){
    $.ajax({
        url: SELF_URI + 'wxTxl/updateMobile?isAjax=1&wu_id=' + encodeURIComponent(wuId) + '&wua_id=' + encodeURIComponent(wuaId) + '&mobile=' + encodeURIComponent(mobile),
        type: 'GET',
        dataType: 'json',
        success: function(res){
            if(!AJAX.checkData(res)) return false;
            if(detailLayer && typeof dialogIndex !== 'undefined'){
                detailLayer.close(dialogIndex);
            }
            loadAddressList();
        }
    });
}

function openEditMobileDialog(contact){
    if(!contact){
        return;
    }
    var defaultMobile = normalizeText(contact.mobile || (contact.detail_info && contact.detail_info.mobile) || '');
    detailLayer.prompt({
        title: '修改手机号',
        formType: 0,
        value: defaultMobile,
        maxlength: 20,
        area: ['360px', '40px'],
        shadeClose: false
    }, function(value, index){
        value = normalizeText(value);
        if(!value){
            detailLayer.msg('请输入手机号');
            return;
        }
        updateContactMobile(contact.wu_id, contact.wua_id, value, index);
    });
}

function syncFilters(){
    txlFilters.unbinded = $('#bindedSwitch').hasClass('is-on') ? 1 : 0;
    txlFilters.mobile = $.trim($('#mobileKeyword').val());
    txlFilters.nickname = $.trim($('#nicknameKeyword').val());
}

function setBindedSwitchState(isOn){
    var $switch = $('#bindedSwitch');
    $switch.toggleClass('is-on', !!isOn);
    $switch.attr('aria-checked', isOn ? 'true' : 'false');
}

function debounceLoadAddressList(delay){
    clearTimeout(autoSearchTimer);
    autoSearchTimer = setTimeout(function(){
        syncFilters();
        loadAddressList();
    }, delay || 320);
}

layui.use(['layer'], function(){
    detailLayer = layui.layer;
    toggleLoading(true, '加载中...');

    $('#toolbarToggleBtn').on('click', function(){
        setToolbarState(!isToolbarOpen);
    });

    $('#bindedSwitch').on('click', function(){
        setBindedSwitchState(!$(this).hasClass('is-on'));
        syncFilters();
        loadAddressList();
    });

    $('#resetBtn').on('click', function(){
        clearTimeout(autoSearchTimer);
        setBindedSwitchState(false);
        $('#mobileKeyword').val('');
        $('#nicknameKeyword').val('');
        syncFilters();
        loadAddressList();
    });

    $('#mobileKeyword, #nicknameKeyword').on('input propertychange', function(){
        debounceLoadAddressList(350);
    });

    $('#mobileKeyword, #nicknameKeyword').on('keydown', function(e){
        if(e.keyCode === 13){
            clearTimeout(autoSearchTimer);
            syncFilters();
            loadAddressList();
        }
    });

    $('#txlIndex').on('click', 'a', function(){
        var letter = $(this).data('letter');
        var $target = $('#group-' + letter);
        if(!$target.length) return;
        var top = $target.position().top + $('#txlContainer').scrollTop();
        $('#txlContainer').animate({scrollTop: top}, 180);
    });

    $('#txlContainer').on('click', '.wx-txl-item', function(e){
        if($(e.target).closest('.js-contact-check, .js-toggle-autosend-switch, .wx-txl-company-link').length){
            return;
        }
        if(isMultiSelectMode){
            toggleContactSelection($(this).data('wua-id'));
            return;
        }
        currentSelectedId = parseInt($(this).data('id'), 10) || 0;
        syncActiveContact();
        var selected = getContactById(currentSelectedId);
        renderDetail(selected);
        renderYpInfo(selected);
    });

    $('#txlContainer').on('click', '.js-contact-check', function(e){
        e.stopPropagation();
        toggleContactSelection($(this).data('wua-id'));
    });

    $('#txlContainer').on('click', '.js-toggle-autosend-switch', function(e){
        e.stopPropagation();
        updateAutoSendSetting($(this).data('wua-id'), $(this).data('autosend'));
    });



    $('#txlDetailPanel').on('click', '.js-avatar-preview', function(){
        previewAvatar($(this).data('avatar'), $(this).data('name'));
    });

    $('#txlDetailPanel').on('click', '.js-bind-yp-btn', function(){
        openBindYpDialog(getActionContactById($(this).data('wu-id')));
    });

    $('#txlDetailPanel').on('click', '.js-toggle-autosend-switch', function(e){
        e.stopPropagation();
        updateAutoSendSetting($(this).data('wua-id'), $(this).data('autosend'));
    });

    $('#wxUserHeader').on('click', function(){
        if(!wxUserInfo){
            return;
        }
        currentSelectedId = wxUserInfo.wu_id;
        renderDetail(wxUserInfo);
        renderYpInfo(wxUserInfo);
    });

    $('#txlDetailPanel').on('click', '.js-edit-mobile', function(){
        openEditMobileDialog({
            wu_id: $(this).data('wu-id'),
            wua_id: $(this).data('wua-id'),
            mobile: $(this).data('mobile')
        });
    });

    $('#txlMultiToggleBtn').on('click', function(){
        setMultiSelectMode(true);
    });

    $('#txlSelectAllBtn').on('click', function(){
        selectAllContacts();
    });

    $('#txlClearSelectionBtn').on('click', function(){
        clearSelectedContacts();
    });

    $('#txlFinishSelectionBtn').on('click', function(){
        setMultiSelectMode(false);
    });

    $('#txlBatchAllowBtn').on('click', function(){
        updateAutoSendSetting(getSelectedWuaIds(), 1, function(){
            clearSelectedContacts();
        });
    });

    $('#txlBatchBlockBtn').on('click', function(){
        updateAutoSendSetting(getSelectedWuaIds(), -1, function(){
            clearSelectedContacts();
        });
    });

    setBindedSwitchState(false);
    setToolbarState(false);
    updateMultiSelectUi();
    renderWxUserHeader(null);
    renderUpdateInfo(null);
    renderDetailPlaceholder();
    renderYpPlaceholder();
    loadAddressList();
});
</script>
