<template>
    <div class="roomFooter">
            <el-button type="danger" @click="exitRoom" v-if="!roleFlag">退出房间</el-button>
            <el-button type="danger" @click="exitRoom" v-if="roleFlag">解散房间</el-button>
    </div>
</template>
  
<script>
import { startVideo, stopVideo, destructionRoom } from '@/api/room.js'
export default {
    name: 'FooterPhone',
    components: {

    },
    data() {
        return {
            roomId: null,
            taskId: null,
            roleFlag: false
        };
    },
    methods: {
        // 解散房间
        destructionRoomFn(data) {
            destructionRoom(data).then(res => {
                console.log(res, "解散房间");
            })
        },
        exitRoom() {
            if (this.roleFlag) {
                this.stopVideoFn();
                this.destructionRoomFn({ roomId: this.roomId })
                this.$emit('exitRoom');
            } else {
                this.$emit('exitRoom');
            }
        },
        async startVideoFn() {
            await startVideo({
                caseId: 12865,
                roomId: this.roomId
            }).then(res => {
                this.taskId = res.data.taskId
                console.log(res.data.taskId, "pppppp");
            })
        },
        stopVideoFn() {
            stopVideo(this.taskId).then(res => {
                console.log(res, "KKKKKK");
            })
        },
    },
    async mounted() {
        this.roomId = this.$route.query.roomId;
        let roleFlag = this.$route.query.flag;
        this.roleFlag = roleFlag;
        if (roleFlag) {
            await this.startVideoFn();
        }
    },
};
</script>
  
<style scoped>
.roomFooter {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}
</style>
  
  
  