<template>
  <div :class="localClass">
    <div class="stream-box">
      <TRTCPusher class="stream" />
    </div>
  </div>
</template>

<script lang="ts">
export default {
  options: {
    virtualHost: true,
  },
};
</script>

<script lang="ts" setup>
import { TUICallKitServer, StoreName, NAME, TUIStore } from '../../../../../TUICallService/index';
import { onMounted, ref, onUnmounted } from '../../../../../adapter-vue';
import TRTCPusher from '@tencentcloud/trtc-component-uniapp/src/components/TRTCPusher.vue';

const pusher = ref(TUIStore.getData(StoreName.CALL, NAME.PUSHER));
const callStatus = ref(TUIStore.getData(StoreName.CALL, NAME.CALL_STATUS));
const props = defineProps({
  localClass: {
    type: String,
    required: true,
  },
});
const emit = defineEmits(['toggleViewSize']);

const handlePusherChange = (value) => {
  pusher.value = Object.assign({}, pusher.value, value);
};

const handleCallStatusChange = (value) => {
  callStatus.value = value;
};

const watchOptions = {
  [NAME.PUSHER]: handlePusherChange,
  [NAME.CALL_STATUS]: handleCallStatusChange,
};

onMounted(() => {
  TUIStore.watch(StoreName.CALL, watchOptions, { notifyRangeWhenWatch: NAME.MYSELF });
});

onUnmounted(() => {
  TUIStore.unwatch(StoreName.CALL, watchOptions);
});

function pusherStateChangeHandler(e: any) {
  TUICallKitServer._tuiCallEngine._pusherStateChangeHandler(e);
}

function pusherNetStatus(e: any) {
  TUICallKitServer._tuiCallEngine._pusherNetStatus(e);
}

function pusherErrorHandler(e: any) {
  TUICallKitServer.handlePusherError(e);
}

function pusherAudioVolumeNotify(e: any) {
  TUICallKitServer._tuiCallEngine._pusherAudioVolumeNotify(e);
}
</script>

<style lang="scss" src="./style/index.scss" scoped></style>
