<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.is_friend">
            <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'

    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
            }
        },
        onLoad(e) {
            console.log(e);
            this.targetId = e.targetId
            getFriendInfo(e.targetId).then(res => {
                this.userInfo = 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.redirectTo({
                    url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId
                });
            },
            setRemark() {
                uni.showToast({
                    title: '开发中',
                    icon: 'none'
                });
            },
            deleteFriend() {
                uni.showModal({
                    title: '删除确认',
                    content: '确认删除后不可恢复',
                    success: e => {
                        if (e.confirm) {
                            deleteFriend(this.targetId).then(res => {
                                // 删除聊天记录
                                RongIMLib.deleteMessages(1, this.targetId);
                                RongIMLib.removeConversation(1, this.targetId);
                                uni.showToast({
                                    icon: 'none',
                                    title: '好友删除成功',
                                    success() {
                                        uni.switchTab({
                                            url: '/pages/im/index'
                                        })
                                    }
                                })
                            })
                        }
                    }
                })
            },
            toPrivate() {
                uni.redirectTo({
                    url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId
                })
            },
            setRemark() {
                uni.showToast({
                    title: '开发中',
                    icon: 'none'
                })
            },
            deleteFriend() {
                uni.showModal({
                    title: '删除确认',
                    content: '确认删除后不可恢复',
                    success: (e) => {
                        if (e.confirm) {
                            deleteFriend(this.targetId).then(res => {
                                // 删除聊天记录
                                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() {
                pedingFriend(this.targetId).then(res => {
                        uni.showToast({
                            title: '申请成功',
                            icon: 'none'
                        });

                    })
                    .catch(err => {
                        uni.showToast({
                            icon: 'error',
                            title: err.message,
                            duration: 2000
                        })
                    })
            },
            singleCall(e) {
                uni.showToast({
                    icon: 'none',
                    title: '功能正在开发中'
                })
                // CallLib.startSingleCall(this.targetId, e.type, '');
                // uni.redirectTo({
                //     url: '/pages/im/private/call?targetId=' + this.targetId + '&mediaType=' + e.type
                // })
            }
        }
    }
</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>
