<template>
    <view class="pending">
        <u-sticky>
            <view class="header-search" @click="$Router.push({ name: 'SearchFriend' })">
                <u-search placeholder="输入手机号码搜索" searchIcon="search" inputAlign="center" bgColor="white"
                    :disabled="true" :show-action="false" />
            </view>
        </u-sticky>
        <block v-if="pendings.length > 0">
            <view v-for="(item, index) in pendings" :key="index">
                <apply-cell :message="item.latestMessage" @success="getPendingList" />
            </view>
        </block>
        <view class="no-lists" v-else>
            <u-image class="cover" radius="4" width="400rpx" height="400rpx"
                :src="require('@/static/imgs/no-friend.png')" :lazy-load="true" />
            <span> 暂无好友申请 ~ </span>
        </view>
    </view>
</template>

<script>
    import applyCell from '../components/friendApplyCell'
    import im from '@/utils/im/index.js'

    export default {
        components: {
            applyCell
        },
        data() {
            return {
                pendings: [],
                bg: '#fff'
            }
        },
        onShow() {
            this.getPendingList()
            uni.$on('onNewContactPendings', this.getPendingList)
        },
        onUnload() {
            uni.$off('onNewContactPendings')
        },
        methods: {
            getPendingList() {
                im.getPendingList((pendings) => {
                    console.log(pendings, 'res......')
                    if (pendings.length > 0) {
                        this.bg = '#f9f9f9'
                    } else {
                        this.bg = '#fff'
                    }
                    this.pendings = pendings
                })
            }
        }
    };
</script>

<style lang="scss" scoped>
    .header-search {
        padding: $padding/2 $padding;
        background: $window-color;
    }

    .no-lists {
        padding-top: $padding * 5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        font-size: $title-size-m;
        color: $text-gray-m;

        span {
            padding-top: $padding;
        }
    }
</style>
