<template>
    <view class="content">
        <!-- 用户信息 -->
        <view class="info-flex">
            <u-avatar :src="userInfo.portraitUrl || require('@/static/user/cover.png')" shape="square" size="50"
                bg-color="#fff"></u-avatar>
            <view class="info-text">
                <view class="nickname">{{ userInfo.name }}</view>
                <view class="address" @longpress="copyAddress">地址：{{ userInfo.address }}</view>
            </view>
        </view>
        <!-- 用户资料 -->
        <view class="info-btns">
            <view class="item">
                <label>性别</label>
                <view class="text" v-if="userInfo.gender === 0">保密</view>
                <view class="text" v-if="userInfo.gender === 1">男</view>
                <view class="text" v-if="userInfo.gender === 2">女</view>
            </view>
        </view>

        <block v-if="userInfo.friendship ==='accepted'">
            <view class="info-btns">
                <view class="item u-border-bottom" @click="setRemark">
                    <label>设置备注</label>
                    <u-icon name="arrow-right" color="#eee" size="16" />
                </view>
                <view class="item u-border-bottom" @click="setRemark">
                    <label>设置标签</label>
                    <u-icon name="arrow-right" color="#eee" size="16" />
                </view>
                <view class="item u-border-bottom">
                    <label>消息免打扰</label>
                    <u-switch size="22" v-model="status" activeColor="#34CE98" @change="setStatus"></u-switch>
                </view>
                <view class="item">
                    <label>聊天置顶</label>
                    <u-switch size="22" v-model="isTop" activeColor="#34CE98" @change="setTop"></u-switch>
                </view>
            </view>
            <view class="footer">
                <view class="footer-item" @click="deleteFriend">
                    <view class="icon">
                        <u-icon class="icon-u" name="close-circle-fill" color="#fff" size="30" />
                    </view>
                    <view class="text">删除好友</view>
                </view>
                <view class="footer-item" @click="toPrivate">
                    <view class="icon ">
                        <u-icon class="icon-u" name="chat-fill" color="#fff" size="30" />
                    </view>
                    <view class="text">发送消息</view>
                </view>
                <view class="footer-item" @click="callShow = true">
                    <view class="icon">
                        <u-icon class="icon-u" name="camera-fill" color="#fff" size="30" />
                    </view>
                    <view class="text">音/视频通话</view>
                </view>
            </view>
        </block>
        <block v-else>
            <view class="footer">
                <view class="footer-item" @click="toBeFriend">
                    <view class="icon">
                        <u-icon class="icon-u" name="plus-people-fill" color="#fff" size="30" />
                    </view>
                    <view class="text">申请好友</view>
                </view>
            </view>
        </block>
        <u-action-sheet :actions="callActions" cancelText="取消" @close="callShow = false" @select="singleCall"
            :show="callShow">
        </u-action-sheet>
    </view>
</template>

<script>
    import {
        getFriendInfo,
        pedingFriend,
        deleteFriend
    } from '@/apis/interfaces/im.js'
    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
    import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
    // friendship: ''    没有好友关系
    // accepted    好友
    // pending  申请中
    // denied 拒绝 
    // blocked 黑名单
    export default {
        data() {
            return {
                targetId: '',
                userInfo: {},
                status: false, // 0 是免打扰，1是正常通知
                isTop: false,
                block: false,
                conversationType: 1,
                callActions: [{
                        type: 0,
                        name: '语音通话'
                    },
                    {
                        type: 1,
                        name: '视频通话'
                    }
                ],
                callShow: false,
                hasPeding: false
            }
        },
        onLoad(e) {
            this.targetId = e.targetId
            getFriendInfo(e.targetId).then(res => {
                this.userInfo = res
                // 获取到用户信息之后，去检查一下要不要更新
                this.$store.dispatch('updateContact', res)
                uni.setNavigationBarTitle({
                    title: res.name
                })
            })
            RongIMLib.getConversationNotificationStatus(this.conversationType, this.targetId, ({
                status
            }) => {
                this.status = !Boolean(status)
            })
            RongIMLib.getConversation(this.conversationType, this.targetId, ({
                code,
                conversation
            }) => {
                if (code == 0) {
                    this.isTop = conversation.isTop
                }
            })
        },
        methods: {
            copyAddress() {
                uni.setClipboardData({
                    data: this.userInfo.address,
                    success: () => {
                        uni.showToast({
                            icon: 'none',
                            title: '复制成功'
                        })
                    }
                })
            },
            toPrivate() {
                uni.navigateTo({
                    url: '/pages/im/private/chat?targetId=' + this.targetId
                });
            },
            setRemark() {
                uni.showToast({
                    title: '开发中',
                    icon: 'none'
                });
            },
            deleteFriend() {
                uni.showModal({
                    title: '删除确认',
                    content: '确认删除后不可恢复',
                    success: e => {
                        if (e.confirm) {
                            deleteFriend(this.targetId).then(res => {
                                uni.$emit('onContactNotification')
                                // 删除聊天记录
                                RongIMLib.deleteMessages(1, this.targetId);
                                RongIMLib.removeConversation(1, this.targetId);
                                uni.showToast({
                                    icon: 'none',
                                    title: '好友删除成功',
                                    success() {
                                        uni.switchTab({
                                            url: '/pages/im/index'
                                        })
                                    }
                                })
                            })
                        }
                    }
                })
            },
            setStatus() {
                RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status,
                    ({
                        status
                    }) => {
                        this.status = !Boolean(status)
                    })
            },
            setTop() {
                RongIMLib.setConversationToTop(this.conversationType, this.targetId, this.isTop, (res) => {
                    RongIMLib.getConversation(this.conversationType, this.targetId, ({
                        conversation
                    }) => {
                        this.isTop = conversation.isTop
                    })
                })
            },
            // 申请好友
            toBeFriend() {
                if (this.hasPeding) {
                    uni.showToast({
                        icon: 'none',
                        title: '请不要频繁操作'
                    })
                    return
                }
                pedingFriend(this.targetId, '').then(res => {
                        uni.showToast({
                            title: `  申请成功,等待审核  `,
                            icon: 'none',
                            duration: 3000,
                            mask: true
                        });
                        this.hasPeding = true
                    })
                    .catch(err => {
                        uni.showToast({
                            icon: 'error',
                            title: err.message,
                            duration: 2000,
                            mask: true
                        })
                    })
            },
            singleCall(e) {
                uni.navigateTo({
                    url: '/pages/im/private/call?targetId=' + this.targetId + '&mediaType=' + e.type +
                        '&isCall=true'
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        min-height: 100vh;
        background: $window-color;
        padding-top: $padding;
        box-sizing: border-box;
    }

    // 用户信息
    .info-flex {
        padding: $padding;
        margin: 0 $margin;
        display: flex;
        background: white;
        border-radius: $radius;

        .info-text {
            width: calc(100% - 50px);
            padding-left: $padding;
            box-sizing: border-box;

            .nickname {
                line-height: 30px;
                font-size: $title-size + 6;
                color: #454545;
                text-align: left;
            }

            .address {
                line-height: 20px;
                font-size: $title-size-sm;
                color: $text-gray;
                text-align: left;
                @extend .nowrap;
            }
        }
    }

    // footer
    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: $padding*2 $padding;
        display: flex;
        justify-content: space-around;

        .footer-item {
            margin: 0 $margin/2;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;

            .icon {
                background: $main-color;
                width: 88rpx;
                height: 88rpx;
                // line-height: 88rpx;
                // display: inline-block;
                border-radius: 50%;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;

                .icon-u {
                    // margin-top: calc((88rpx/2) - 13px);
                    // margin-left: calc((88rpx/2) - 13px);
                }
            }

            .text {
                color: $main-color;
                font-size: $title-size-m - 2;
                text-align: center;
                padding-top: 16rpx;
            }
        }
    }

    // btns

    .info-btns {
        background: white;
        margin: $margin;
        border-radius: $radius;

        .u-border-bottom {
            border-bottom: solid 1rpx #f9f9f9 !important;
        }

        .item {
            line-height: 100rpx;
            display: flex;
            align-items: center;
            padding: 10rpx $padding;
            justify-content: space-between;
            font-size: $title-size-lg;

            label {
                width: 200rpx;
            }

            .text {
                width: calc(100% - 200rpx);
                color: $text-gray-m;
                text-align: right;
                @extend .nowrap;
            }
        }
    }
</style>
