<template>
  <CollapseItem name="播放器配置" :expanded="true">
    <setting-item-box name="上传图片" :alone="true">
      <setting-item>
        <TKUpload :uploadImageUrl="optionData.poster" @sendFile="handleSendFile" @removeFile="handleRemoveFile" />
      </setting-item>
    </setting-item-box>
    <setting-item-box name="源类型" :alone="true">
      <setting-item>
        <n-radio-group @update:value="handleChecked" v-model:value="optionData.sourceType" name="radiogroup">
          <n-space>
            <n-radio v-for="(item, index) in sourceTypes" :key="item.value + index" :value="item.value">
              {{ item.label }}
            </n-radio>
          </n-space>
        </n-radio-group>
      </setting-item>
    </setting-item-box>
    <setting-item-box v-if="optionData.sourceType === sourceTypeEnum.CUSTOM" name="源地址" :alone="true">
      <setting-item>
        <n-input-group>
          <n-input v-model:value="optionData.dataset" size="small" placeholder="请输入源地址"></n-input>
        </n-input-group>
      </setting-item>
    </setting-item-box>
    <setting-item-box v-if="optionData.sourceType === sourceTypeEnum.PLATFORM" name="组织" :alone="true">
      <setting-item>
        <n-tree-select
          placement="top-start"
          label-field="name"
          v-model:value="optionData.organization"
          key-field="id"
          children-field="children"
          :options="originationOption"
          @update:value="handleUpdateTreeValue"
        />
      </setting-item>
    </setting-item-box>
    <setting-item-box v-if="optionData.sourceType === sourceTypeEnum.PLATFORM" name="视频" :alone="true">
      <setting-item>
        <n-select
          @update:value="handleSelect"
          v-model:value="url"
          :options="videoOptions"
          placeholder="请选择视频地址"
        />
      </setting-item>
    </setting-item-box>
    <setting-item-box name="自动播放">
      <setting-item>
        <n-switch v-model:value="optionData.autoplay" size="small" />
      </setting-item>
    </setting-item-box>
  </CollapseItem>
</template>

<script setup lang="ts">
import { PropType, ref, onMounted } from 'vue'
import { AccessMode, option, sourceTypeEnum, videoListInterface } from './config'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { NTreeSelect } from 'naive-ui'
import { getOrganizationList, getVideoList, getVideoUrl } from '@/api/external/common/index'
import { TKUpload } from '@/components/external/Common/TKUpload'
import { getVideoControlStart } from '@/api/external/flvPlay'

const props = defineProps({
  optionData: {
    type: Object as PropType<typeof option>,
    required: true
  }
})

const sourceTypes = [
  {
    value: 'custom',
    label: '自定义'
  },
  {
    value: 'platform',
    label: '平台获取'
  }
]

const originationOption = ref([])

const url = ref<string | null>(null)

const videoOptions = ref<videoListInterface[]>([])

const getOriginationList = async () => {
  const res = await getOrganizationList()
  originationOption.value = res
}

const handleUpdateTreeValue = (value: string) => {
  props.optionData.dataset = ''
  getVideoLists(value)
}

const getVideoLists = async (organizationId: string) => {
  const res = await getVideoList({ organizationId })
  if (!res) return
  videoOptions.value = res?.data?.map((item: videoListInterface) => {
    return {
      label: item.name,
      value: item.accessMode === AccessMode.Streaming ? item.id : item.accessMode === AccessMode.ManuallyEnter ? item.videoUrl : item.id,
      id: item.id,
      accessMode: item.accessMode,
      channelId: item.accessMode === AccessMode.GBT28181 ? item?.params?.channelNo :'',
      deviceId: item.accessMode === AccessMode.GBT28181 ? item?.params?.deviceId :'',
    }
  })
}

const getVideoUrlById = async (id: string) => {
  const res = await getVideoUrl(id)
  if (!res) return
  const { url } = res.data
  props.optionData.dataset = url
}

const handleChecked = (value: string) => {
  props.optionData.dataset = ''
  props.optionData.organization = ''
  url.value = null
  if (value === sourceTypeEnum.PLATFORM) {
    getOriginationList()
  }
}

const getVideoControlList = async (deviceId: string, channelId: string) => {
    const { data: { flv } } = await getVideoControlStart({
      deviceId,
      channelId
    })
    props.optionData.dataset = flv || ''
}

const handleSelect =  (_: string, e: videoListInterface) => {
  const { accessMode, id, value , channelId, deviceId } = e
  //流媒体，需要从服务端调取接口换取播放的地址
  if (accessMode === AccessMode.Streaming) {
    getVideoUrlById(id)
    url.value = id
    props.optionData.videoId = id
  } else if (accessMode === AccessMode.GBT28181) {
    //gbt28181，需要调用接口获取flv播放地址
    getVideoControlList(deviceId, channelId)
    props.optionData.videoId = id
  } else {
    props.optionData.dataset = value as string
  }
}

onMounted(async () => {
  if (props.optionData.sourceType === sourceTypeEnum.PLATFORM) {
    getOriginationList()
    if (props.optionData.organization) {
      await getVideoLists(props.optionData.organization)
    }
    url.value = props.optionData.videoId
  }
})

const handleSendFile = (file: string) => {
  if (!file) return
  props.optionData.poster = file
}

const handleRemoveFile = (status: boolean) => (status ? (props.optionData.poster = '') : null)
</script>