<template>
  <n-drawer v-bind="getDrawerOptions" @update:show="updateVisible">
    <n-drawer-content closable title="直播">
      <div class="video-container">
        <div class="video-item">
          <VideoPlayer ref="videoRef" :options="getVideoOptions" />
        </div>
      </div>
      <div class="detail-btns">
        <n-button
          type="error"
          @click="updateVisible(false)"
        >关闭</n-button>
      </div>
    </n-drawer-content>
  </n-drawer>
</template>
<script>
import VideoPlayer from '@/components/VideoPlayer/index.vue'
import { reactive, computed, toRefs, watch, ref } from 'vue'
export default {
  name: 'TaskLive',
  components: { VideoPlayer },
  props: {
    /* 可见 */
    visible: {
      type: Boolean,
      default: false
    },
    /* 选中的数据 */
    data: {
      type: Object,
      default: () => {}
    }
  },
  emits: {
    'update:visible': null
  },
  setup(props, { emit }) {
    const data = reactive({
      aipull_url: ''
    })

    /* 获取抽屉的信息 */
    const getDrawerOptions = computed(() => {
      return {
        show: props.visible,
        width: '100%',
        placement: 'right'
      }
    })

    const videoRef = ref(null)
    const getVideoOptions = computed(() => {
      return {
        id: 'video_ai',
        width: '100%',
        height: '600px',
        source: props.data.aipullUrl,
        isLive: true
      }
    })

    watch(() => props.visible, (value) => {
      if (!value) {
        videoRef.value.disposeVideo()
      }
    })

    const updateVisible = function() {
      emit('update:visible', false)
    }

    return {
      getDrawerOptions,
      ...toRefs(data),
      videoRef,
      getVideoOptions,
      updateVisible
    }
  }
}
</script>
<style scoped>
.video-container {
  margin: 50px 0;
  height: 65vh;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.video-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.detail-btns {
  width: 100%;
  display: flex;
  margin-top: 50px;
  justify-content: center;
  align-items: center;
}
</style>
