<template>
    <view class="friend-apply">
        <block v-for="(item, index) in lists" v-if="lists.length > 0" :key="index">
            <view class="lists">
                <view class="" style="width: 100rpx;height: 100rpx;">
                    <u-avatar :src="item.portraitUrl || require('@/static/user/cover.png')" shape="square" :size="avatarSize" />
                </view>
                <view class="right">
                    <view class="title">
                        <view class="name">{{ item.name }}</view>
                        <view class="des">{{ item.address }}</view>
                    </view>
                    <view class="agress-btn">
                        <span v-if="isApply && item.friendship !=='accepted'" @click="action('apply', item)">查看</span>
                        <span class="isFri" v-if="isApply && item.friendship ==='accepted'" @click="action('isFriend', item)">已是好友</span>
                    </view>
                </view>
            </view>
        </block>
    </view>
</template>

<script>
    import imBase from '../mixins/imBase.js'
    
    export default {
        mixins: [
            imBase
        ],
        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
            }
        },
        created() {
            console.log(this.lists);
        },
        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;
                    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 - 2;
                    margin-top: $margin - 10;
                    color: $text-gray-m;
                }
            }

            .agress-btn {
                display: flex;
                color: #fff;
                font-size: $title-size-m;

                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>
