<template>
    <view class="content">
		<!-- header -->
		<view class="custom-header">
			<view class="header-flex">
				<view class="tabs">
					<view class="item show">私聊</view>
					<view class="item">群聊</view>
				</view>
				<view class="btns">
					<view class="item">
						<uni-icons color="#555" custom-prefix="iconfont" type="icon-sousuo" size="22"></uni-icons>
					</view>
					<view class="item">
						<uni-icons color="#555" custom-prefix="iconfont" type="icon-gengduo2" size="22"></uni-icons>
					</view>
					<view class="item">
						<uni-icons color="#555" custom-prefix="iconfont" type="icon-tuandui" size="22"></uni-icons>
					</view>
				</view>
			</view>
		</view>
        <view v-if="$store.state.token != ''">
            <block v-if="conversations.length < 1">
                <view class="vertical null-list">
                    <u-empty icon="http://cdn.uviewui.com/uview/empty/message.png" textColor="#999" text="暂无好友消息">
                        <!-- <template>
                            <view class="null-list-btn">开启聊天</view>
                        </template> -->
                    </u-empty>
                </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', { '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"
                            :text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'"
                            font-size="14" randomBgColor></u-avatar>
                        <u-avatar v-else :src="friend(item.targetId).portraitUrl" 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 || '&nbsp;' }}</view>
                    </view>
                </view>

                <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 '@rongcloud/imlib-uni'
    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 => {
                    console.log("IMTOKEN", 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)
                }
                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(undefined, count, timestamp, (res) => {
                    console.log('获取列表', res);
                    if (res.code === 0 && res.conversations.length > 0) {
                        this.conversations = res.conversations
                    }
                })
            },
            // 进入聊天的详情页面，清理未读消息数量
            toDetail(item) {
                this.hidePop()
                uni.navigateTo({
                    url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item
                        .conversationType
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
	// header
	.custom-header{
		@extend .ios-top;
		background: white;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		.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;
				}
			}
		}
	}
	
	// content
    .content {
        background-color: $window-color;
        min-height: 100vh;

        .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 {
            position: relative;
            display: flex;
            background: white;
            padding: 24rpx 24rpx 20rpx 24rpx;

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

            .avatar {
                position: relative;

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

            .content {
                margin-left: 16rpx;
                flex: 1;

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

                    .name {
                        font-size: 36rpx
                    }

                    .time {
                        font-size: 24rpx;
                        color: $text-gray;
                    }
                }

                .preview {
                    width: 520rpx;
                    word-break: break-all;
                    color: $text-gray;
                    font-size: 26rpx;
                    @extend .nowrap;
                }
            }
        }

        .message:not(:last-child) {
            &::after {
                position: absolute;
                left: $padding + 108;
                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>
