<template>
    <view class="friend-apply">
        <block v-for="item in lists" v-if="lists.length > 0" :key="item.userId">
            <view class="lists">
                <view class="" style="width: 100rpx;height: 100rpx;">
                    <u-image class="cover" radius="4" width="100rpx" height="100rpx" :src="item.portraitUrl || require('@/static/user/cover.png')" :lazy-load="true" />
                </view>
                <view class="right">
                    <view class="title">
                        <view class="name">{{ item.name }}</view>
                        <view class="des" v-if="isApply">{{ item.address || '这家伙很懒，什么都没有添加~' }}</view>
                        <view class="des" v-else>{{ item.remark || '你好,听说你很优秀想认识~' }}</view>
                    </view>
                    <view class="agress-btn">
                        <span v-if="isAgree" @click="action('agree', item)">通过</span>
                        <span v-if="isAgree" @click="action('reject', item)">拒绝</span>
                        <span v-if="isApply && !item.is_friend" @click="action('apply', item)">查看</span>
                        <span class="isFri" v-if="isApply && item.is_friend" @click="action('isFriend', item)">已是好友</span>
                    </view>
                </view>
            </view>
        </block>
    </view>
</template>

<script>
export default {
    name: 'friend-apply-reject-agree',
    props: {
        lists: {
            type: Array,
            default: []
        },
        isAgree: {
            type: Boolean,
            default: false
        },
        isReject: {
            type: Boolean,
            default: false
        },
        isApply: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {};
    },
    methods: {
        action(type, item) {
            if (type === 'isFriend') {
                // ，后期可以跳转到信息介绍页面，先留在这里
                return uni.showToast({ title: '已是好友，无需重复添加', icon: 'none', duration:2000});
            }
            this.$emit('action', { type, item });
        }
    }
};
</script>

<style lang="scss" scoped>
.lists {
    padding: 0 $padding;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    font-size: $title-size;
    color: $text-gray;

    .cover {
        background-color: #ffffff;
    }
    .right {
        width: 570rpx;
        margin-left: $margin - 10;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: $padding 0;
        border-bottom: solid 1rpx #f9f9f9;
        .title {
            width: 370rpx;
            .name {
                width: 100%;
                color: $text-color;
                font-size: $title-size + 2;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .des {
                width: 100%;
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: $title-size-m;
                margin-top: $margin - 10;
                color: $text-gray-m;
            }
        }
        .agress-btn {
            display: flex;
            color: #fff;
            span {
                display: inline-block;
                padding: 6rpx 14rpx;
                background-color: $text-price;
                border-radius: 10rpx;
            }
            span:nth-child(1) {
                background-color: $main-color;
                margin-right: 10rpx;
            }
            .isFri {
                background-color: #f9f9f9 !important;
                color: #666;
            }
        }
    }
}
</style>
