<template>
    <div class="member-table-contain" @keyup.enter="searchData">
        <el-input
            placeholder="请输入搜索内容"
            v-model="searchInput">
            <i slot="suffix" class="el-input__icon el-icon-search" @click="searchData"></i>
        </el-input>
        <div class="content">
            <div class="member-list"
                 v-for="item in activeData"
                 :class="{'member-list-selected': selectedMap[item.id]}"
                 :key="item.id"
                 @click="selectMember(item)">
                <div>
                     <span class="loading-block" v-if="!replyCache[item.id]">
                         <i class="el-icon-loading"></i>
                     </span>
                    {{ item.title }}
                </div>
                <span class="member-list-icon">
                    <i class="el-icon-success icon-select"></i>
                    <i class="el-icon-circle-plus-outline icon-hover"></i>
                </span>
            </div>
        </div>
        <div class="pagination">
            <el-pagination
                layout="prev, pager, next"
                :small="true"
                :page-size="pageSize"
                :current-page="pageNo"
                :total="cacheShowData.length"
                @current-change="setActiveData">
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    name: 'MemberTable',
    props: {
        checkData: {
            type: Array,
            default: () => []
        },
        showData: {
            type: Array,
            default: () => []
        },
        replyCache: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        checkData: {
            handler() {
                this.selectedMap = {};
                this.checkData.map((item) => {
                    this.selectedMap[item.id] = item;
                });
                this.selectedData = [...this.checkData];
                this.$forceUpdate();
            },
            immediate: true
        },
        showData: {
            handler() {
                this.cacheShowData = [...this.showData];
                this.setActiveData();
            },
            immediate: true
        },
    },
    data() {
        return {
            searchInput: '',
            pageNo: 1,
            pageSize: 10,
            activeData: [],
            selectedData: [],
            selectedMap: {},
            cacheShowData: [],
        }
    },
    methods: {
        setActiveData(pageNo) {
            if (pageNo) this.pageNo = pageNo;
            this.activeData = this.cacheShowData.slice(this.pageSize * (this.pageNo - 1), this.pageSize * this.pageNo);
        },
        selectMember(item) {
            if (this.selectedMap[item.id]) return;
            this.selectedData.unshift(item);
            this.selectedData.pop();
            this.$emit('on-select-member', this.selectedData);
        },
        searchData() {
            this.pageNo = 1;
            this.cacheShowData = this.searchInput === '' ? [...this.showData] :
                this.showData.filter((item)=> item.title.toString().indexOf(this.searchInput) >- 1);
            this.setActiveData();
        }
    },
}
</script>
<style lang="scss" scoped>
.member-table-contain {
    width: 100%;
    height: 100%;
    padding: 24px;
    padding-bottom: 8px;
    box-sizing: border-box;
    background: linear-gradient(168.988deg, rgb(255, 255, 255) 4%, rgb(238, 238, 255) 100%);
    border-radius: 12px;
    box-shadow: rgba(48, 96, 144, 0.48) 0 0 16px;
    ::v-deep(.el-input__inner) {
        border-radius: 24px;
    }
    .el-icon-search {
        cursor: pointer;
        color: rgba(44,44,44,1);
    }
    .member-list {
        display: flex;
        justify-content: space-between;
        height: 40px;
        border-radius: 26px;
        padding: 10px 16px;
        box-sizing: border-box;
        font-size: 14px;
        cursor: pointer;
        &:hover {
            background-color: rgba(32, 40, 64, 0.08);
            .icon-hover {
                display: block;
            }
        }
    }
    .member-list-icon {
        font-size: 22px;
        display: inline-block;
        line-height: 0;
    }
    .icon-select,.icon-hover {
        display: none;
    }
    .member-list-selected {
        .icon-select {
            display: block;
        }
        &:hover {
            .icon-hover {
                display: none;
            }
        }
    }
}
.content {
    margin: 8px 0;
    height: calc(100% - 32px - 40px - 16px);
    overflow-y: auto;
    /* 滚动条轨道样式 */
    &::-webkit-scrollbar {
        width: 4px;
        /* 设置滚动条宽度 */
        // background-color: #f1f1f1;
        border-radius: 10px;
    }

    /* 滚动条轨道 */
    &::-webkit-scrollbar-track {
        background: transparent; /* 设置轨道背景为透明 */
    }

    /* 滚动条滑块样式 */
    &::-webkit-scrollbar-thumb {
        background: rgba(96, 128, 240, 0.6); /* 设置拖动块颜色 */
        border-radius: 4px;
        -webkit-box-shadow: inset 0 0 2px transparent;
        -webkit-transition: all 0.2s linear;
        transition: all 0.2s linear;
    }

    /* 滚动条滑块hover状态样式 */
    &::-webkit-scrollbar-thumb:hover {
        background: rgba(96, 128, 240, 0.5); /* 加深颜色 */
    }
}
.pagination {
    text-align: center;
    ::v-deep(.el-pager li) {
        background: transparent;
    }
    ::v-deep(.el-pagination .btn-next) {
        background: transparent;
    }
    ::v-deep(.el-pagination .btn-prev) {
        background: transparent;
    }
    ::v-deep(.el-pagination button:disabled) {
        background: transparent;
    }
}
</style>