<template>
    <view class="call">
        <view class="video">
            <RongCloud-Call-RCUniCallView ref="bigVideoView" :style="bigVideoStyle" class="bigVideoView">
            </RongCloud-Call-RCUniCallView>

            <movable-area class="movableArea" :style="movableAreaStyle">
                <movable-view class="movableView" direction="all" :x="50" :y="50" v-if="mediaType == 1 && connected">
                    <RongCloud-Call-RCUniCallView ref="smallVideoView" class="smallVideoView" @click="changeMine">
                    </RongCloud-Call-RCUniCallView>
                </movable-view>
            </movable-area>
        </view>

        <view class="status" v-if="!connected">
            <view class="remote">
                <u-avatar :src="contact(targetId).portraitUrl" shape="square" :size="avatarSize" bgColor="#fff" />
                <view><text class="nickname">{{ contact(targetId).name }}</text></view>
                <view v-if="remoteRinging"><text class="mediaType">等待对方接听</text></view>
                <view v-if="connected"><text class="mediaType">已接通</text></view>
            </view>
        </view>
        <view class="buttons">
            <view class="btn" v-if="connected" @click="changeMicrophone">
                <view class="icon">
                    <u-icon name="mic-off" color="#ffffff" size="30" v-if="micOff" />
                    <u-icon name="mic" color="#ffffff" size="30" v-else />
                </view>
                <text class="text">麦克风</text>
            </view>
            <view class="btn" @click="hangup">
                <view class="icon hangup">
                    <u-icon name="close" color="#ffffff" size="25" />
                </view>
                <text class="text">挂断</text>
            </view>
            <view class="btn" v-if="!connected && this.isCall == false" @click="accept">
                <view class="icon">
                    <u-icon name="checkmark" color="#ffffff" size="30" />
                </view>
                <text class="text">接听</text>
            </view>
            <view class="btn" v-if="connected" @click="changeSpeaker">
                <view class="icon">
                    <u-icon name="volume-off-fill" color="#ffffff" size="27" v-if="volumeOff" />
                    <u-icon name="volume-fill" color="#ffffff" size="27" v-else />
                </view>
                <text class="text">扬声器</text>
            </view>
        </view>
    </view>
</template>

<script>
    import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
    import * as IMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
    import utils from '@/utils/index.js'

    export default {
        data() {
            return {
                targetId: '',
                mediaType: 0, // 0 语音  1 视频
                connected: false,
                micStatus: false,
                speStatus: false,
                remoteRinging: false,
                ring: null,
                isCall: false,
                avatarSize: 96,
                bigVideoStyle: {},
                movableAreaStyle: {},
                // 关闭麦克风
                micOff: false,
                // 关闭扬声器
                volumeOff: false,
                // 通话时长
                duration: 0,
                interval: null
            }
        },
        onLoad(e) {
            this.avatarSize = utils.rpx2px(200)
            this.targetId = e.targetId
            this.mediaType = e.mediaType
            this.isCall = Boolean(e.isCall)
            // 进入页面开启外呼
            if (this.isCall) {
                CallLib.startSingleCall(this.targetId, this.mediaType, '');
                if (this.mediaType == 1) {
                    const session = CallLib.getCurrentCallSession()
                    setTimeout(() => {
                        CallLib.setVideoView(session.mine.userId, this.$refs.bigVideoView.ref, 0, false)
                    }, 200)
                }
            }
            // 响铃
            this.startRing()
            // 监听通话链接状态
            uni.$once('onCallConnected', this.onCallConnected)
            uni.$once('onCallDisconnected', this.hangup)
            uni.$once('onRemoteUserRinging', () => {
                this.remoteRinging = true
            })
            uni.$once('onRemoteUserJoined', () => {
                this.remoteRinging = false
            })
            this.bigVideoStyle = {
                width: this.windowWidth + 'px',
                height: this.windowHeight + 'px',
            }
            this.movableAreaStyle = {
                width: this.windowWidth + 'px',
                height: this.windowHeight + 'px',
            }
        },
        beforeDestroy() {

        },
        computed: {
            windowWidth() {
                return uni.getSystemInfoSync().windowWidth
            },
            windowHeight() {
                return uni.getSystemInfoSync().windowHeight
            },
            contact() {
                return function(targetId) {
                    return this.$store.getters.contactInfo(targetId)
                }
            }
        },
        methods: {
            afterHangup() {
                clearInterval(this.interval)
                const targetId = this.targetId
                const sentStatus = 30
                const messageContent = {
                    objectName: 'RC:InfoNtf',
                    userInfo: this.$store.getters.sender,
                    message: JSON.stringify({
                        mediaType: this.mediaType,
                        connected: this.connected,
                        duration: this.duration
                    })
                }
                const sentTime = 0
                if (this.isCall) {
                    IMLib.insertOutgoingMessage(1, targetId, sentStatus, messageContent, sentTime)
                } else {
                    IMLib.insertIncomingMessage(1, targetId, targetId, sentStatus, messageContent, sentTime)
                }
                uni.$emit('onReceiveMessage_' + this.targetId, {
                    targetId: this.targetId
                })
            },
            changeMicrophone() {
                this.micOff = !this.micOff
                CallLib.enableMicrophone(this.micStatus)
                this.micStatus = !this.micStatus
            },
            changeSpeaker() {
                this.volumeOff = !this.volumeOff
                CallLib.enableSpeaker(this.speStatus)
                this.speStatus = !this.speStatus
            },
            accept() {
                CallLib.accept()
            },
            onCallConnected() {
                // 关掉铃声
                this.stopRing()
                // 设置链接状态
                this.connected = true
                // 视频通话，才开摄像头
                if (this.mediaType == 1) {
                    const session = CallLib.getCurrentCallSession()
                    setTimeout(() => {
                        CallLib.setVideoView(session.targetId, this.$refs.bigVideoView.ref, 0, false)
                        CallLib.setVideoView(session.mine.userId, this.$refs.smallVideoView.ref, 0, true)
                    }, 200)
                }
                this.interval = setInterval(() => {
                    this.duration++
                }, 1000)
            },
            // 切换主屏显示人
            changeMine() {
                // if (this.isCall) {
                //     const session = CallLib.getCurrentCallSession()
                //     setTimeout(() => {
                //         CallLib.setVideoView(session.targetId, this.$refs.bigVideoView.ref, 0, false)
                //         CallLib.setVideoView(session.mine.userId, this.$refs.smallVideoView.ref, 0, true)
                //     }, 200)
                // } else {
                //     const session = CallLib.getCurrentCallSession()
                //     setTimeout(() => {
                //         CallLib.setVideoView(session.targetId, this.$refs.smallVideoView.ref, 0, true)
                //         CallLib.setVideoView(session.mine.userId, this.$refs.bigVideoView.ref, 0, false)
                //     }, 200)
                // }
                // this.isCall = !this.isCall
            },
            hangup() {
                CallLib.hangup()
                this.afterHangup()
                this.stopRing()

                setTimeout(() => {
                    this.downRing()
                    uni.navigateBack()
                }, 200);
            },
            toHome() {
                uni.switchTab({
                    url: '/pages/im/index'
                })
            },
            startRing() {
                const ring = uni.createInnerAudioContext()
                this.ring = ring
                ring.autoplay = true
                ring.loop = true
                ring.src = '/static/im/sounds/call-ring.mp3'
                ring.onEnded(() => {
                    ring.destroy()
                })
            },
            stopRing() {
                this.ring.stop()
            },
            downRing() {
                const ding = uni.createInnerAudioContext()
                ding.autoplay = true
                ding.src = '/static/im/sounds/call-down.mp3'
                ding.onEnded(() => {
                    ding.destroy()
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .call {
        display: flex;
        flex: 1;
        flex-direction: column;
        position: relative;

        .video {
            .movableArea {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;

                .movableView {
                    width: 180rpx;
                    height: 320rpx;
                    position: relative;

                    .smallVideoView {
                        width: 180rpx;
                        height: 320rpx;
                        background-color: #666;
                    }
                }
            }

            .bigVideoView {
                background-color: #666;
            }
        }

        .status {
            flex: 1;
            width: 750rpx;
            position: fixed;
            bottom: 0;
            top: 0;

            .remote {
                flex: 1;
                width: 750rpx;
                display: flex;
                align-items: center;
                top: 300rpx;

                .mediaType {
                    font-size: 32rpx;
                    color: #aaa;
                }

                .nickname {
                    margin: 30rpx;
                    font-size: 44rpx;
                    color: #ffffff;
                }
            }
        }

        .buttons {
            position: fixed;
            bottom: 100rpx;
            width: 750rpx;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }


        .btn {
            align-items: center;

            .icon {
                background: $main-color;
                width: 132rpx;
                height: 132rpx;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;

                &.hangup {
                    background-color: $text-price;
                }
            }

            .text {
                margin-top: 16rpx;
                color: #FFFFFF;
                font-size: 32rpx;
            }
        }
    }
</style>
