<template>
  <div class="jointRoomMenu">
    <pop-menu ref="popMenu" :menu="menu" />
  </div>
</template>

<script>
import PopMenu from '@/components/PopMenu';
import { DeviceMenu } from '@/scripts/ConstDic';
import { putJointTrainingUserkicked } from '@/api/chat';

export default {
	name: 'TrainingOperateMenu',
	components: {
		PopMenu
	},
	props: {
		point: {
			type: Object,
			required: true
		},
		clickUserId: {
			type: String,
			required: true
		}
	},
	data() {
		return {
			menu: [],
			menuShow: [
				{
					label: this.$t('trainRoom.kickOutTheRoom'),
					handler: this.kicked
				}
			],
			userId: ''
		};
	},
	watch: {
		'$store.state.menuOperation.menuCount': function (val) {
			if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.JointRoom)) {
				this.doShow(this.$store.state.menuOperation.menuPosition);
			} else {
				this.doClose();
			}
		}
	},
	mounted() {
		this.userId = this.$store.state.user.id;
		this.closeEvent();
	},
	methods: {
		closeEvent() {
			const self = this;
			window.onclick = function (e) {
				self.doClose();
			};
		},
		doShow(point) {
			this.closeEvent();
			if (this.userId != this.clickUserId) {
				this.menu = this.menuShow;
				if (this.$refs && this.$refs.popMenu) {
					this.$refs.popMenu.resetShowPosition(point);
				}
			} else {
				this.menu = [];
			}

		},
		doClose() {
			if (this.$refs && this.$refs.popMenu) {
				this.$refs.popMenu.close();
			}
		},
		async kicked() {
			try {
				await putJointTrainingUserkicked(this.clickUserId, this.$route.query.group);
			} catch (error) {
				console.error(error);
			}
		}
	}
};
</script>
