<template>
  <n-card>
    <div class="card__title">
      <p class="card__title--left">飞行视频</p>
      <p class="card__title--right">
        <n-form
          inline
          :label-width="80"
          :model="videoForm"
          label-placement="left"
        >
          <n-form-item label="机场选择：" path="airportId">
            <n-select v-model:value="videoForm.airportId" :options="airOptions" @update:value="handleAirportChange" />
          </n-form-item>
          <n-form-item label="回放选择：" path="taskId">
            <n-select v-model:value="videoForm.taskId" :options="taskOptions" clearable @update:value="handleVideoChange" />
          </n-form-item>
        </n-form>
      </p>
    </div>
    <div class="card__video">
      <div class="video__item">
        <VideoPlayer id="dashboard-video" ref="originRef" :use-empty="true" @video-status="handleVideoStatus">
          <template #empty>
            <div class="card__video--empty">
              <img src="@/assets/images/no-live.png">
              <p>当前暂无直播</p>
            </div>
          </template>
        </VideoPlayer>
      </div>
    </div>
  </n-card>
</template>

<script>
import { dataToSelect } from '@/utils/handleData.js'
import { airportList } from '@/api/dashboard/index.js'
import { getTaskList } from '@/api/task/index.js'
import { missionLive } from '@/api/dashboard/index.js'
import VideoPlayer from '@/components/VideoPlayer/index.vue'
import { ref, reactive, onUnmounted, watch, toRefs, nextTick } from 'vue'

export default {
  name: 'TaskCard',
  components: { VideoPlayer },
  setup() {
    const originRef = ref()
    const data = reactive({
      videoForm: {
        airportId: null,
        taskId: null
      },
      airOptions: [],
      taskOptions: [],
      hasPlayer: false,
      airportIdBack: null,

      videoInfo: {
        url: null,
        isLive: false,
        status: 'init'
      }
    })

    /**
     * @description: 加载表格数据
     * @param {*} res
     * @return {*}
     */
    const loadAirport = (async function(id) {
      const res = await airportList({ page: 1, limit: 60 })
      if (res.code === 0) {
        data.airOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
        data.videoForm.airportId = id || res.data[0]?.id
        handleAirportChange(data.videoForm.airportId)
      }
    })()

    async function loadTaskOption(id) {
      const res = await getTaskList({ page: 1, limit: 600, status: 4, airportId: id })
      if (res.code === 0) {
        data.taskOptions = dataToSelect(res.data.records, { label: 'name', value: 'id' })
      }
    }

    function handleAirportChange(value) {
      // if (value === data.airportIdBack) return
      data.airportIdBack = value
      data.videoForm.taskId = null
      missionLive(value)
        .then(res => {
          if (res.code === 0) {
            data.videoInfo = {
              url: res.data?.aiplayUrl,
              isLive: true,
              status: 'init'
            }
          }
        })
      loadTaskOption(value)
    }

    async function handleVideoChange(value) {
      const row = data.taskOptions.find((item) => { return item.id === value })
      if (!value) {
        const res = await airportList({ page: 1, limit: 60 })
        if (res.code === 0) {
          data.airOptions = dataToSelect(res.data, { label: 'name', value: 'id' })
          handleAirportChange(data.videoForm.airportId)
        }
      } else {
        data.videoInfo = {
          url: row.aiVideoUrl,
          isLive: false,
          status: 'init'
        }
      }
    }

    watch(() => data.videoInfo.url,
      (value) => {
        nextTick(() => {
          originRef.value?.disposeVideo()
          nextTick(() => {
            initVideoPlayer()
          })
        })
      })

    /* 初始化播放器 */
    function initVideoPlayer() {
      data.videoInfo.status = 'init'
      const origin = {
        width: '100%',
        height: '100%',
        source: data.videoInfo.url,
        isLive: data.videoInfo.isLive
      }
      originRef.value?.init(origin)
      setTimeout(() => {
        if (data.videoInfo.status === 'init') {
          originRef.value?.disposeVideo()
          initVideoPlayer()
        }
      }, 30000)
    }

    function handleVideoStatus(status) {
      data.videoInfo = {
        ...data.videoInfo,
        status
      }
    }

    onUnmounted(() => {
      originRef.value?.disposeVideo()
    })
    return {
      ...toRefs(data),
      originRef,
      loadAirport,
      handleAirportChange,
      handleVideoChange,
      handleVideoStatus
    }
  }
}

</script>
<style scoped lang='scss'>
.card__title{
  line-height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  .card__title--left{
    font-size: 18px;
    padding-left: 8px;
    border-left: 4px solid rgba(24, 144, 255, 1);
  }
  .card__title--right{
    .n-select{
      width: 180px;
    }
  }
}
.card__video{
  display: flex;
  height: calc(100% - 55px);
  position: relative;
  .video__item{
    width: 100%;
  }
  .card__video--empty{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(3, 3, 3, 1);
    img{
      position: absolute;
      left: 50%;
      top: 45%;
      transform: translate(-50%,-50%);
    }
    p{
      position: absolute;
      left: 50%;
      top: 60%;
      transform: translate(-50%,-50%);
      font-size: 12px;
      color: rgba(255, 255, 255, 1);
    }
  }
}
::v-deep(.n-form){
  .n-form-item-feedback-wrapper{
    display: none;
  }
}
</style>
