<!--
 * @Description:搜索新朋友页面
 * @Author: Aimee·Zhang
 * @Date: 2022-01-24 10:49:15
 * @LastEditors: Aimee·Zhang
 * @LastEditTime: 2022-01-25 10:18:26
-->

<template>
    <view class="search">
        <!-- 搜索 -->
        <u-sticky>
            <view class="header-search">
                <u-search placeholder="输入用户账号、手机号" searchIcon="search" @custom="search" v-model="searchValue"
                    @search="search" bgColor="#F3F6FB" :focus="focused" />
            </view>
        </u-sticky>
        <block v-if="searchResult.length > 0">
            <applyFriend :lists="searchResult" :isApply="true" @action="action" />
        </block>
        <view class="no-lists" v-if="searchResult.length === 0 && searchValue.length > 1">
            <u-image class="cover" radius="4" width="400rpx" height="400rpx"
                :src="require('@/static/imgs/no-search.png')" :lazy-load="true" />
            <span>暂无匹配内容~</span>
        </view>
    </view>
</template>

<script>
    import {
        searchFriend,
        pedingFriend
    } from '@/apis/interfaces/im.js';
    import applyFriend from '../components/friendSearchList.vue';

    export default {
        components: {
            applyFriend
        },
        data() {
            return {
                searchResult: [],
                searchValue: '',
                focused: true
            };
        },
        watch: {
            searchValue(value) {
                console.log(value.length, 'length...')
                if (value.length > 1) {
                    this.searchResult = []
                    this.search()
                    return
                }
                if(value.length === 0){
                    this.searchResult = []
                    return
                }
            }
        },
        methods: {
            search() {
                // friendship: ''    没有好友关系
                // accepted    好友
                // pending  申请中
                // denied 拒绝 
                // blocked 黑名单
                searchFriend(this.searchValue)
                    .then(res => {
                        this.searchResult = res;
                        console.log(res)
                    })
                    .catch(err => {
                        uni.showToast({
                            title: err.message,
                            icon: 'none'
                        });
                    });
            },
            action(e) {
                uni.navigateTo({
                    url: '/pages/im/friends/info?targetId=' + e.item.targetId
                })
            }
        }
    };
</script>

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

    .no-lists {
        padding-top: $padding * 3;
        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>
