<template>
    <view>
        <!-- 搜索 -->
        <u-sticky>
            <view class="header-search">
                <u-search placeholder="输入手机号码搜索" bgColor="white" @custom="search" @search="search"
                    v-model="searchValue"></u-search>
            </view>
        </u-sticky>
        <u-list height="auto">
            <u-list-item v-for="(item, index) in searchResult" :key="index">
                <u-cell :title="item.name">
                    <u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar>

                    <div style="width: 50px;" slot="value">
                        <u-button type="success" size="small" @click="pending(item.userId)">申请</u-button>
                    </div>
                </u-cell>
            </u-list-item>
        </u-list>
        <!-- 新朋友 -->
        <u-divider text="好友申请"></u-divider>
        <u-list height="auto">
            <u-swipe-action>
                <u-list-item v-for="(item, index) in pedings" :key="index">
                    <u-swipe-action-item autoClose :options="options" @click="action($event, item)">
                        <u-cell :title="item.name">
                            <u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar>
                        </u-cell>
                    </u-swipe-action-item>
                </u-list-item>
            </u-swipe-action>
        </u-list>
    </view>
</template>

<script>
    import {
        getPedings,
        resolveFriend,
        rejectFriend,
        searchFriend,
        pedingFriend
    } from '@/apis/interfaces/im.js'

    export default {
        data() {
            return {
                searchResult: [],
                searchValue: '',
                pedings: [],
                options: [{
                    text: '通过',
                    style: {
                        backgroundColor: '#3c9cff'
                    }
                }, {
                    text: '拒绝',
                    style: {
                        backgroundColor: '#f56c6c'
                    }
                }]
            }
        },
        onLoad() {
            this.getPeddingList()
        },
        methods: {
            search() {
                console.log('sousuo');
                searchFriend(this.searchValue).then(res => {
                    console.log(res);
                    this.searchResult = res
                }).catch(err => {
                    console.log('err', err);
                })
            },
            action(e, item) {
                if (e.index == 0) {
                    resolveFriend(item.userId).then(res => {
                        this.getPeddingList()
                    })
                } else {
                    rejectFriend(item.userId).then(res => {
                        this.getPeddingList()
                    })
                }
            },
            getPeddingList() {
                getPedings().then(res => {
                    this.pedings = res
                })
            },
            pending(userId) {
                uni.showLoading()
                pedingFriend(userId).then(res => {
                    uni.showToast({
                        title: '申请成功',
                        success: () => {
                            this.searchResult = []
                        }
                    })
                }).catch(err => {
                    uni.showToast({
                        icon: 'error',
                        title: err.message
                    })
                })
            }
        }
    }
</script>

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