<template>
    <view class="sent--popups u-border-top" v-if="show">
        <view class="item" @click="onPopupsItem('picture')">
            <image class="icon" src="@/static/icon/popups-icon-00.png" mode="widthFix"></image>
            <text class="text">相册</text>
        </view>
        <view class="item" @click="onPopupsItem('camera')">
            <image class="icon" src="@/static/icon/popups-icon-01.png" mode="widthFix"></image>
            <text class="text">拍摄</text>
        </view>
        <view class="item" @click="onPopupsItem('video')" v-if="conversationType == 1">
            <image class="icon" src="@/static/icon/popups-icon-02.png" mode="widthFix"></image>
            <text class="text">视频通话</text>
        </view>
        <view class="item" @click="onPopupsItem('location')">
            <image class="icon" src="@/static/icon/popups-icon-03.png" mode="widthFix"></image>
            <text class="text">位置</text>
        </view>
        <view class="item" @click="onPopupsItem('redpacket')">
            <image class="icon" src="@/static/icon/popups-icon-04.png" mode="widthFix"></image>
            <text class="text">红包</text>
        </view>
        <view class="item" @click="onPopupsItem('file')">
            <image class="icon" src="@/static/icon/popups-icon-05.png" mode="widthFix"></image>
            <text class="text">文件</text>
        </view>

        <u-action-sheet :actions="callActions" cancelText="取消" @close="callShow = false" @select="singleCall"
            :show="callShow">
        </u-action-sheet>
    </view>
</template>

<script>
    import im from '@/utils/im/index.js'
    import imBase from '../../mixins/imBase.js'

    export default {
        mixins: [
            imBase
        ],
        data() {
            return {
                callActions: [{
                        type: 0,
                        name: '语音通话'
                    },
                    {
                        type: 1,
                        name: '视频通话'
                    }
                ],
                callShow: false
            }
        },
        props: {
            show: {
                type: Boolean,
                default: false
            },
            conversationType: {
                type: Number,
                default: 0
            },
            targetId: {
                type: String,
                default: ''
            }
        },
        methods: {
            singleCall(e) {
                uni.navigateTo({
                    url: '/pages/im/private/call?targetId=' + this.targetId + '&mediaType=' + e.type +
                        '&isCall=true'
                })
            },
            onPopupsItem(type) {
                switch (type) {
                    case 'picture':
                        uni.chooseImage({
                            count: 9,
                            sourceType: ['album'],
                            success: res => {
                                im.sentImage(this.conversationType, this.targetId, res.tempFilePaths[0],
                                    this.sender, (res) => {
                                        this.success()
                                    })
                            }
                        })
                        break;
                    case 'camera':
                        uni.chooseImage({
                            sourceType: ['camera'],
                            success: res => {
                                im.sentImage(this.conversationType, this.targetId, res.tempFilePaths[0],
                                    this.sender, (res) => {
                                        this.success()
                                    })
                            }
                        })
                        break;
                    case 'video':
                        this.callShow = true
                        break;
                    case 'location':
                        // uni.showToast({
                        //     icon: 'none',
                        //     title: '功能正在开发中'
                        // })
                        // uni.chooseLocation({
                        //     success: res => {
                        //         console.log(res);
                        //         // this.success()
                        //     }
                        // })
                        break;
                    case 'redpacket':
                        uni.showToast({
                            icon: 'none',
                            title: '功能正在开发中'
                        })
                        break;
                    case 'file':
                        uni.showToast({
                            icon: 'none',
                            title: '功能正在开发中'
                        })
                        break;
                }
            },
            // 处理返回
            success() {
                this.$emit('success')
            }
        }
    }
</script>

<style lang="scss" scoped>
    .sent--popups {
        background: white;
        padding: 30rpx 15rpx;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;

        .item {
            width: 150rpx;
            margin: 15rpx;
            text-align: center;
        }

        .text {
            text-align: center;
            font-size: 26rpx;
            color: #555;
            padding-top: 15rpx;
        }

        .icon {
            width: 110rpx;
            height: 110rpx;
            margin: 0 20rpx;
            border-radius: 20rpx;
            background: #F3F6FB;
        }
    }
</style>
