<template>
    <view class="send--voice">
        <view class="voice" hover-class="chat-hover" @touchstart="startRecord" @touchend="stopRecord">
            <text class="button">按住说话</text>
        </view>
        <!-- 录音中提示 -->
        <view class="modal" v-if="showRecordTip">
            <image class="icon" src="@/static/icon/record-icon.png" mode="widthFix"></image>
            <text class="text">录音中 {{recordTime}} s</text>
        </view>
    </view>
</template>

<script>
    import im from '@/utils/im/index.js'
    import permision from '@/utils/permission.js'

    export default {
        props: {
            conversationType: {
                type: Number,
                default: 0
            },
            targetId: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                showRecordTip: false,
                recordTime: 60,
                interval: 0,
                maxRecordTime: 60,
                recorderManager: null
            }
        },
        computed: {
            user() {
                return this.$store.getters.sender
            }
        },
        created() {
            this.recorderManager = uni.getRecorderManager()
        },
        methods: {
            // 检查安卓录制权限
            async getAndroidPermission() {
                return await permision.requestAndroidPermission('android.permission.RECORD_AUDIO')
            },
            // 录制语音消息
            startRecord() {
                this.getAndroidPermission().then(code => {
                    switch (code) {
                        case 1:
                            this.showRecordTip = true
                            this.recorderManager.start()
                            this.interval = setInterval(() => {
                                this.recordTime -= 1
                                if (this.recordTime === 0) {
                                    this.stopRecord()
                                }
                            }, 1000)
                            break;
                        case 0:
                            uni.showToast({
                                title: '暂无麦克风权限，请前往应用设置开启麦克风',
                                icon: 'none'
                            })
                            break;
                        case -1:
                            uni.showToast({
                                title: '应用权限错误',
                                icon: 'none'
                            })
                            break;
                    }
                })
            },
            // 结束录音
            stopRecord(e) {
                if (!this.showRecordTip) return
                this.recorderManager.stop()
                clearInterval(this.interval)
                // 监听录音结束
                this.recorderManager.onStop(res => {
                    im.sentVoice(this.conversationType, this.targetId, res.tempFilePath, (this.maxRecordTime -
                        this
                        .recordTime), this.user, () => {
                        setTimeout(() => {
                            this.$emit('success')
                        }, 500)
                    })
                    this.recordTime = this.maxRecordTime
                    this.showRecordTip = false
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    .send--voice {
        .voice {
            background: $window-color;
            height: 70rpx;
            line-height: 70rpx;
            justify-content: center;
            align-items: center;
            width: 500rpx;
            border-radius: 10rpx;
            margin-right: 15rpx;

            .button {
                font-size: 30rpx;
                color: #333;
            }
        }

        .modal {
            background: rgba(0, 0, 0, .6);
            position: fixed;
            height: 200rpx;
            width: 300rpx;
            border-radius: 10rpx;
            z-index: 99;
            top: 550rpx;
            left: 225rpx;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .icon {
                width: 88rpx;
                height: 88rpx;
            }

            .text {
                font-size: 28rpx;
                color: #FFFFFF;
            }
        }
    }
</style>
