<template>
    <div>
        <view class="list">
            <view class="list__item" @click="toPending">
                <u-avatar shape="square" size="35" icon="man-add-fill" fontSize="26" randomBgColor></u-avatar>
                <text class="list__item__user-name">新的朋友</text>
            </view>
            <u-line></u-line>
            <view class="list__item" @click="toGroup">
                <u-avatar shape="square" size="35" icon="chrome-circle-fill" fontSize="26" randomBgColor></u-avatar>
                <text class="list__item__user-name">我的群聊</text>
            </view>
            <u-line></u-line>
        </view>

        <u-index-list :indexList="indexList">
            <template v-for="(item, index) in itemArr">
                <!-- #ifdef APP-NVUE -->
                <u-index-anchor :text="indexList[index]" :key="index"></u-index-anchor>
                <!-- #endif -->
                <u-index-item :key="index">
                    <!-- #ifndef APP-NVUE -->
                    <u-index-anchor :text="indexList[index]"></u-index-anchor>
                    <!-- #endif -->
                    <view class="list" v-for="(item1, index1) in item" :key="index1">
                        <view class="list__item" @click="toInfo">
                            <image class="list__item__avatar" :src="item1.url"></image>
                            <text class="list__item__user-name">{{item1.name}}</text>
                        </view>
                        <u-line></u-line>
                    </view>
                </u-index-item>
            </template>
            <view slot="footer" class="u-safe-area-inset--bottom">
                <text class="list__footer">共305位好友</text>
            </view>
        </u-index-list>
    </div>
</template>

<script>
    const indexList = () => {
        const indexList = []
        const charCodeOfA = 'A'.charCodeAt(0)
        indexList.push("↑")
        indexList.push("☆")
        for (let i = 0; i < 26; i++) {
            indexList.push(String.fromCharCode(charCodeOfA + i))
        }
        indexList.push('#')
        return indexList
    }
    export default {
        data() {
            return {
                indexList: indexList(),
                urls: [
                    'https://cdn.uviewui.com/uview/album/1.jpg',
                    'https://cdn.uviewui.com/uview/album/2.jpg',
                    'https://cdn.uviewui.com/uview/album/3.jpg',
                    'https://cdn.uviewui.com/uview/album/4.jpg',
                    'https://cdn.uviewui.com/uview/album/5.jpg',
                    'https://cdn.uviewui.com/uview/album/6.jpg',
                    'https://cdn.uviewui.com/uview/album/7.jpg',
                    'https://cdn.uviewui.com/uview/album/8.jpg',
                    'https://cdn.uviewui.com/uview/album/9.jpg',
                    'https://cdn.uviewui.com/uview/album/10.jpg',
                ],
                names: ["勇往无敌", "疯狂的迪飙", "磊爱可", "梦幻梦幻梦", "枫中飘瓢", "飞翔天使",
                    "曾经第一", "追风幻影族长", "麦小姐", "胡格罗雅", "Red磊磊", "乐乐立立", "青龙爆风", "跑跑卡叮车", "山里狼", "supersonic超"
                ]
            }
        },
        computed: {
            itemArr() {
                return this.indexList.map(item => {
                    const arr = []
                    for (let i = 0; i < 10; i++) {
                        arr.push({
                            name: this.names[uni.$u.random(0, this.names.length - 1)],
                            url: this.urls[uni.$u.random(0, this.urls.length - 1)]
                        })
                    }
                    return arr
                })
            }
        },
        methods: {
            toPending() {
                uni.navigateTo({
                    url: '/pages/im/friends/pending'
                })
            },
            toGroup() {
                uni.navigateTo({
                    url: '/pages/im/group/index',
                    fail: (err) => {
                        console.log(err);
                    }
                })
            },
            toInfo() {
                uni.navigateTo({
                    url: '/pages/im/friends/info'
                })
            }
        }
    }
</script>

<style lang="scss">
    .list {

        &__item {
            @include flex;
            padding: 6px 12px;
            align-items: center;

            &__avatar {
                height: 35px;
                width: 35px;
                border-radius: 3px;
            }

            &__user-name {
                font-size: 16px;
                margin-left: 10px;
                color: $u-main-color;
            }
        }

        &__footer {
            color: $u-tips-color;
            font-size: 14px;
            text-align: center;
            margin: 15px 0;
        }
    }
</style>
