<template>
    <view class="contents">
        <view class="ios-top"></view>
        <!-- header -->
        <view class="custom-header">
            <view class="header-flex">
                <view class="tabs">
                    <view class="item show">私聊</view>
                    <view class="item" @click="onNav('', {})">群聊</view>
                </view>
                <view class="btns">
                    <view class="item" @click="onNav('imFriends', {})">
                        <uni-icons color="#555" custom-prefix="iconfont" type="icon-tuandui" size="22"></uni-icons>
                    </view>
                    <view class="item" @click="scanQrCode">
                        <uni-icons color="#555" type="scan" size="22"></uni-icons>
                    </view>
                    <view class="item" @click="onNav('', {})">
                        <uni-icons color="#555" custom-prefix="iconfont" type="icon-gengduo2" size="22"></uni-icons>
                    </view>
                </view>
            </view>
        </view>
        <!-- content -->
        <view v-if="$store.state.token != ''">
            <block v-if="conversations.length < 1">
                <view class="vertical null-list">
                    <u-empty mode="message" textColor="#999" text="暂无好友消息" />
                </view>
            </block>
            <block v-else>
                <u-alert type="warning" v-if="connection != 0" description="网络似乎断开了" :show-icon="true"></u-alert>
                <view v-for="(item, index) in conversations" :key="index"
                    :class="['message', 'u-border-bottom', { 'is-top': item.isTop }]" @tap="toDetail(item)"
                    @longpress="onLongPress" :data-item="item">
                    <view class="avatar">
                        <u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-5, -5]"
                            :value="item.unreadMessageCount" />
                        <u-avatar size="44" v-if="!friend(item.targetId).portraitUrl" shape="square"
                            :text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'"
                            font-size="16" randomBgColor></u-avatar>
                        <u-avatar v-else :src="friend(item.targetId).portraitUrl" shape="square" size="44"></u-avatar>
                    </view>
                    <view class="content">
                        <view class="header">
                            <view class="name">{{ friend(item.targetId).name || '未知用户' }}</view>
                            <view class="time">{{ item.sentTime|timeCustomCN }}</view>
                        </view>
                        <view class="preview">{{ item.latestMessage.content || '' }}</view>
                    </view>
                </view>
                <!-- TODO 长按的弹出框，怎么点击隐藏，没搞明白 -->
                <view class="shade" @tap="hidePop">
                    <view class="pop" :style="popStyle" :class="{'show':showPop}">
                        <view v-for="(item, index) in popButton" :key="index" @tap="pickerMenu" :data-index="index">
                            {{item}}
                        </view>
                    </view>
                </view>
            </block>
        </view>
        <!-- 未登录 -->
        <view v-else class="vertical null-list">
            <u-empty icon="http://cdn.uviewui.com/uview/empty/permission.png" textColor="#999" text="登录后开启聊天吧~">
                <template>
                    <view class="null-list-btn" @click="toLogin">去登录</view>
                </template>
            </u-empty>
        </view>
    </view>
</template>

<script>
    import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
    import im from '@/utils/im/index.js'
    import userAuth from '@/public/userAuth'
    import {
        getImToken
    } from '@/apis/interfaces/im.js'

    export default {
        data() {
            return {
                isShown: true, // 当前页面显示状态
                conversations: [], // 会话列表
                connection: 0,
                /* 窗口尺寸 */
                winSize: {},
                /* 显示操作弹窗 */
                showPop: false,
                /* 弹窗按钮列表 */
                popButton: ['置顶聊天', '删除该聊天'],
                /* 弹窗定位样式 */
                popStyle: "",
                pickedItem: {}
            }
        },
        computed: {
            friend() {
                return function(targetId) {
                    return this.$store.getters.userInfo(targetId)
                }
            }
        },
        onShow() {
            if (this.$store.state.token !== '') {
                getImToken().then(res => {
                    im.connect(res.token, res.userInfo, () => {
                        this.getConversationList()
                    })
                })
            }
            this.isShown = true
        },
        onHide() {
            this.isShown = false
        },
        onNavigationBarButtonTap(e) {
            if (e.index == 0) {
                uni.showToast({
                    title: '开发中暂未开放，敬请期待',
                    icon: 'none'
                })
            }
            if (e.index == 1) {
                if (this.toLogin()) {
                    this.$Router.push({
                        name: 'imFriends'
                    })
                }
            }
        },
        watch: {
            '$store.getters.newMessage': function(n, o) {
                if (this.isShown) {
                    this.getConversationList()
                }
            },
            '$store.getters.connection': function(n, o) {
                this.connection = n
            }
        },
        methods: {
            hidePop() {
                this.showPop = false
                this.pickedItem = {}
                setTimeout(() => {
                    this.showShade = false
                }, 250)
            },
            pickerMenu(e) {
                const index = Number(e.currentTarget.dataset.index)

                if (index == 0) {
                    RongIMLib.setConversationToTop(this.pickedItem.conversationType, this.pickedItem.targetId, !this
                        .pickedItem.isTop)
                } else {
                    RongIMLib.removeConversation(this.pickedItem.conversationType, this.pickedItem.targetId)
                }
                im.setNotifyBadge()
                this.getConversationList()
                this.hidePop()
            },
            onLongPress(e) {
                let [touches, style, item] = [e.touches[0], "", e.currentTarget.dataset.item]

                if (touches.clientY > (this.winSize.height / 2)) {
                    style = `bottom:${this.winSize.height-touches.clientY}px;`
                } else {
                    style = `top:${touches.clientY}px;`
                }
                if (touches.clientX > (this.winSize.witdh / 2)) {
                    style += `right:${this.winSize.witdh-touches.clientX}px`
                } else {
                    style += `left:${touches.clientX}px`
                }

                this.popButton[0] = item.isTop ? '取消置顶' : '置顶聊天'
                this.popStyle = style
                this.pickedItem = item
                this.$nextTick(() => {
                    setTimeout(() => {
                        this.showPop = true;
                    }, 10)
                })
            },
            // 检查登录
            toLogin() {
                if (this.$store.state.token === '') {
                    const Auth = new userAuth()
                    Auth.Login()
                    return false
                }
                return true
            },
            getConversationList() {
                const count = 1000
                const timestamp = 0
                RongIMLib.getConversationList([RongIMLib.ConversationType.PRIVATE], count, timestamp, (res) => {
                    if (res.code === 0) {
                        this.conversations = res.conversations
                    }
                })
            },
            // 进入聊天的详情页面，清理未读消息数量
            toDetail(item) {
                this.hidePop()
                // uni.navigateTo({
                //     url: '/pages/im/private/call?targetId=' + item.targetId + '&mediaType=1'
                // })
                uni.navigateTo({
                    url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item
                        .conversationType
                })
            },
            // 点击按钮
            onNav(name, params) {
                if (this.toLogin) {
                    if (name === '') {
                        uni.showToast({
                            title: '开发中，敬请期待',
                            icon: 'none'
                        })
                        return
                    }
                    this.$Router.push({
                        name,
                        params
                    })
                }
            },
            scanQrCode() {
                uni.scanCode({
                    success: (res) => {
                        // "result": "ADDFRIEND|10010",
                        if (res.scanType == 'QR_CODE') {
                            res.result.substr(0, 10) == 'ADDFRIEND|'
                            // 跳转到添加好友页面
                            uni.navigateTo({
                                url: '/pages/im/friends/info?targetId=' + res.result.substr(10)
                            })
                        }
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    // header
    .custom-header {
        @extend .ios-top;
        background: $window-color;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;

        .header-flex {
            padding: 20rpx $padding;
            display: flex;
            justify-content: space-between;
            height: 60rpx;
            line-height: 60rpx;

            .tabs {
                .item {
                    margin-left: $margin;
                    display: inline-block;
                    font-size: $title-size-lg;
                    color: $text-gray;
                    padding: 0 ($padding - 10);
                    border-radius: 30rpx;

                    &:first-child {
                        margin: 0;
                    }

                    &.show {
                        background: rgba($color: $main-color, $alpha: .1);
                        color: $main-color;
                        font-weight: bold;
                    }
                }
            }

            .btns {
                .item {
                    display: inline-block;
                    margin-left: $margin;
                }
            }
        }
    }

    // contents
    .contents {
        background-color: $window-color;
        min-height: 100vh;
        padding-top: 90rpx;
        box-sizing: border-box;

        .null-list {
            height: 100vh;
            text-align: center;

            &-btn {
                margin-top: $margin * 2;
                line-height: 70rpx;
                color: $main-color;
                border: solid 2rpx $main-color;
                padding: 0 ($padding*3);
                font-size: $title-size-m;
                border-radius: 35rpx;
                box-sizing: border-box;
            }
        }

        .message {
            background: white;
            padding: 20rpx 30rpx;
            position: relative;
            display: flex;

            &.u-border-bottom {}

            &.is-top {
                background: $window-color;
            }

            .avatar {
                position: relative;

                .u-badge {
                    z-index: 998;
                }
            }

            .content {
                padding-left: 30rpx;
                width: calc(100% - 44px);
                box-sizing: border-box;

                .header {
                    display: flex;
                    justify-content: space-between;

                    .name {
                        font-size: $title-size + 4;
                    }

                    .time {
                        font-size: $title-size-sm;
                        color: $text-gray;
                    }
                }

                .preview {
                    word-break: break-all;
                    color: $text-gray;
                    font-size: $title-size-sm;
                    @extend .nowrap;
                }
            }
        }

        // .message:not(:last-child) {
        //     &::after {
        //         position: absolute;
        //         left: calc(44px + #{$padding} + 30rpx);
        //         right: 0;
        //         bottom: 0;
        //         content: " ";
        //         height: 1rpx;
        //         background: $border-color;
        //     }
        // }
    }

    /* 遮罩 */
    .shade {

        .pop {
            position: fixed;
            z-index: 101;
            width: 200rpx;
            box-sizing: border-box;
            font-size: 28rpx;
            text-align: left;
            color: #333;
            background-color: #fff;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
            line-height: 80rpx;
            transition: transform 0.15s ease-in-out 0s;
            user-select: none;
            -webkit-touch-callout: none;
            transform: scale(0, 0);

            &.show {
                transform: scale(1, 1);
            }

            &>view {
                padding: 0 20rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                user-select: none;
                -webkit-touch-callout: none;

                &:active {
                    background-color: #f3f3f3;
                }
            }
        }
    }
</style>
