<template>
    <div style="width: 100%;">
        <!-- <el-input v-model="centent" suffix-icon="Search" @input="inputSearch" placeholder="搜索"></el-input> -->
        <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto" :style="'height:' + height" :infinite-scroll-immediate="false" infinite-scroll-distance="5">
            <li v-for="item in cardlist" :key="item.sender_id" class="infinite-list-item" :class="{ active: item.active }"
                @click="handleItem(item)">
                <div class="avatar-container">
                    <el-image class="user-avatar" :src="item.sender_avatar"></el-image>
                    <span v-if="item.unread_count && item.unread_count > 0" class="unread-badge">{{ item.unread_count > 99 ? '99+' : item.unread_count }}</span>
                </div>
                <div class="name-block">
                    <span class="nickname">{{ item.sender_name }}</span>
                    <span v-if="item.send_time" class="send-time">{{ item.send_time }}</span>
                </div>
                <span class="sex">
                    <!-- <el-icon v-if="item.sex == '男'" style="color: rgb(121.3, 187.1, 255);">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-nan"></use>
                        </svg>
                    </el-icon>
                    <el-icon v-else style="color: rgb(248, 152.1, 152.1);">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-nv"></use>
                        </svg>
                    </el-icon> -->
                    <!-- <el-icon v-if="item.active" class="check"><Select /></el-icon> -->
                </span>
            </li>

        </ul>
    </div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'
const props = defineProps({
    cardlist: {
        type: Array,
        default: []
    },
    multiple: {
        type: Boolean,
        default: false
    },
    height: {
        type: String,
        default: '300px'
    }
})
const centent = ref('')
const emits = defineEmits(["update:modelValue", 'load', 'input', 'change'])
const load = () => {
    emits('load')
}

let timer = null
const inputSearch = (e) => {
    // if (timer != null) {
        clearTimeout(timer)
    //     timer = null
    // }
    timer = setTimeout(() => {
        emits('input', e)
    }, 500)
}

const handleItem = (row) => {
    if (props.multiple) {
        if (!row.active) {
            row.active = true
        } else {
            row.active = false
        }
        let arr = []
        props.cardlist.forEach((el) => {
            if (el.active === true) {
                arr.push(el.sender_id) 
            }
        })
        setTimeout(() => {
            emits('change', arr)
            emits("update:modelValue", arr)
        })

    } else {
        // 先全部清空
        props.cardlist.forEach(el => { el.active = false })
        // 再设当前为true
        row.active = true
        // 点击时清除未读提醒（直接修改数据源，父组件会看到变化）
        if (row.unread_count) row.unread_count = 0
        // emit后外部拿到的cardlist状态是唯一active
        emits('change', row.sender_id)
        emits("update:modelValue", row.sender_id)
    }

}


onMounted(() => {
})
</script>
<style lang="scss" scoped>
.infinite-list {
    list-style: none;
}


.infinite-list .infinite-list-item {
    display: flex;
    height: 46px;
    // margin: 10px 0;
    padding: 0 10px;
    line-height: 22px;
    cursor: pointer;
    position: relative;

    &:hover {
        background-color: var(--el-color-primary-light-9);
    }

    .avatar-container {
        position: relative;
        display: inline-block;
    }

    .user-avatar {
        height: 32px;
        width: 32px;
        border-radius: 4px;
        vertical-align: middle;
        margin-top: 6px;
    }

    .unread-badge {
        position: absolute;
        top: 2px;
        right: -6px;
        background-color: #ff4d4f;
        color: white;
        border-radius: 10px;
        padding: 2px 6px;
        font-size: 10px;
        font-weight: bold;
        min-width: 16px;
        height: 16px;
        line-height: 7px;
        text-align: center;
        border: 2px solid white;
        box-sizing: border-box;
    }

    .nickname {
        margin: 0 8px 0 0px;
        font-size: 14px ;
    }

    .name-block {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 8px;
    }

    .send-time {
        font-size: 12px;
        color: #999;
        margin-top: 2px;
    }

    .sex {
        .el-icon {
            font-size: 18px;
            transform: translateY(5px);

        }
    }

    .check {
        position: absolute;
        right: 12px;
        color: var(--el-color-primary);
        top: 20%;
    }
}

.active {
    background-color: var(--el-color-primary-light-7);
}

.infinite-list .infinite-list-item+.list-item {
    margin-top: 10px;
}
</style>