<template>
    <view class="content">
        <!-- 聊天信息 -->
        <view class="set-user" @click="showFriend">
            <u-avatar :src="friend(targetId).portraitUrl" size="48"></u-avatar>
            <view class="set-user-nickname">{{ friend(targetId).name }}</view>
        </view>
        <!-- 聊天设置 -->
        <view class="set-group">
            <view class="group-flex">
                <label>消息免打扰</label>
                <u-switch v-model="status" activeColor="#34CE98" size="22" @change="setStatus"></u-switch>
            </view>
            <view class="group-flex">
                <label>消息置顶</label>
                <u-switch v-model="isTop" activeColor="#34CE98" size="22" @change="setTop"></u-switch>
            </view>
        </view>
        <view class="set-group">
            <view class="group-flex" @click="cleanConversation">
                <label>清空聊天记录</label>
                <u-icon name="arrow-right" color="#999" size="16"></u-icon>
            </view>
        </view>
    </view>
</template>

<script>
    import * as RongIMLib from '@rongcloud/imlib-uni'
    import {
        getUserInfo
    } from '@/apis/interfaces/im.js'


    export default {
        data() {
            return {
                eventChannel: null,
                targetId: '',
                conversationType: 1,
                isTop: false,
                status: false // 0 是免打扰，1是正常通知
            }
        },
        computed: {
            friend() {
                return function(targetId) {
                    return this.$store.getters.userInfo(targetId)
                }
            }
        },
        onLoad(e) {
            this.eventChannel = this.$scope.eventChannel

            this.targetId = e.targetId
            this.conversationType = e.conversationType

            RongIMLib.getConversation(this.conversationType, this.targetId, ({
                conversation
            }) => {
                this.isTop = conversation.isTop
            })

            RongIMLib.getConversationNotificationStatus(this.conversationType, this.targetId, ({
                status
            }) => {
                this.status = !Boolean(status)
            })
        },
        methods: {
            showFriend() {
                uni.navigateTo({
                    url: '/pages/im/friends/info?targetId=' + this.targetId
                })
            },
            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
                    })
                })
            },
            // 清空聊天记录
            cleanConversation() {
                uni.showModal({
                    title: '清空聊天记录',
                    success: (res) => {
                        if (res.confirm) {
                            RongIMLib.deleteMessages(this.conversationType, this.targetId, ({
                                code
                            }) => {
                                if (code === 0) {
                                    this.eventChannel.emit('messageClear')
                                    uni.showToast({
                                        title: '聊天记录已清空'
                                    })
                                }
                            })
                        }
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        min-height: 100vh;
        background: $window-color;

        // 用户信息
        .set-user {
            background: white;
            padding: $padding;
            display: flex;
            align-items: center;

            .set-user-nickname {
                padding-left: $padding;
                flex: 1;
                line-height: 70rpx;
                font-size: $title-size + 6;
            }
        }

        // 聊天设置
        .set-group {
            margin: $margin 0;
            background: white;

            .group-flex {
                position: relative;
                display: flex;
                justify-content: space-between;
                height: 90rpx;
                line-height: 90rpx;
                padding: 0 $padding;
                font-size: $title-size;
                align-items: center;

                &::after {
                    content: " ";
                    position: absolute;
                    left: $margin;
                    right: 0;
                    bottom: 0;
                    height: 1rpx;
                    background-color: $border-color;
                }

                &:last-child::after {
                    display: none;
                }
            }
        }
    }
</style>
