<template>
  <CollapseItem name="播放器配置" :expanded="true">
    <setting-item-box name="开启切换" :alone="true">
      <setting-item>
        <n-switch v-model:value="optionData.autoSwitch" size="small"></n-switch>
      </setting-item>
    </setting-item-box>
    <setting-item-box name="间隔时长" :alone="true">
      <setting-item>
        <n-input-number v-model:value="optionData.interval" size="small"></n-input-number>
      </setting-item>
    </setting-item-box>
    <template v-for="(item, index) in optionData.dataset" :key="index">
      <setting-item-box name="自动播放" :alone="true">
        <setting-item>
          <n-switch v-model:value="item.autoPlay" size="small"></n-switch>
        </setting-item>
      </setting-item-box>
      <setting-item-box name="源类型" :alone="true">
        <setting-item>
          <n-radio-group @change="handleChecked($event, item, index)" v-model:value="item.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="item.sourceType === sourceTypeEnum.CUSTOM" name="源地址" :alone="true">
        <setting-item>
          <n-input-group>
            <n-input v-model:value="item.url" size="small" placeholder="请输入源地址"></n-input>
          </n-input-group>
        </setting-item>
      </setting-item-box>
      <setting-item-box v-if="item.sourceType === sourceTypeEnum.PLATFORM" name="组织" :alone="true">
        <setting-item>
          <n-tree-select
            placement="top-start"
            label-field="name"
            v-model:value="item.organization"
            key-field="id"
            children-field="children"
            :options="originationOption"
            @update:value="handleUpdateTreeValue($event)"
          />
        </setting-item>
      </setting-item-box>
      <setting-item-box v-if="item.sourceType === sourceTypeEnum.PLATFORM" name="视频" :alone="true">
        <setting-item>
          <n-select
            v-model:value="item.id"
            @update:value="(value: string, e: videoList) => handleSelect(value, e, index)"
            :options="videoOptions"
          />
        </setting-item>
      </setting-item-box>
      <n-button size="small" @click="optionData.dataset.splice(index, 1)"> - </n-button>
    </template>
    <n-button
      style="margin-left: 10px"
      v-if="optionData.dataset.length < 9"
      size="small"
      @click="
        optionData.dataset.push({
          url: null,
          id: null,
          sourceType: sourceTypeEnum.CUSTOM,
          organization: '',
          autoPlay: true
        })
      "
    >
      +
    </n-button>
  </CollapseItem>
</template>

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

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

const sourceTypes = [
  {
    value: sourceTypeEnum.CUSTOM,
    label: sourceTypeNameEnum.CUSTOM
  },
  {
    value: sourceTypeEnum.PLATFORM,
    label: sourceTypeNameEnum.PLATFORM
  }
]

const originationOption = ref<Recordable[]>([])

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

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

const handleUpdateTreeValue = (e: string) => {
  getVideoLists(e)
}

const getVideoLists = async (organizationId: string) => {
  const res = await getVideoList({ organizationId })
  if (!res) return
  videoOptions.value = res?.data?.map((item: videoList) => ({
    label: item.name,
    value: item.id,
    id: item.id,
    accessMode: item.accessMode,
    customUrl: item.accessMode === AccessModeEnum.ManuallyEnter ? item.videoUrl: '', //参数只给自定义视频流使用
    channelId: item.accessMode === AccessModeEnum.GBT28181 ? item?.params?.channelNo : '', //参数只给gbt28181使用
    deviceId: item.accessMode === AccessModeEnum.GBT28181 ? item?.params?.deviceId : '' //参数只给gbt28181使用
  }))
}

//针对萤石云或者海康威视，根据视频id获取播放流地址
const getVideoUrlById = async (_: videoList, id: string, index: number) => {
  const res = await getVideoUrl(id)
  if (!res) return
  const { url } = res.data
  props.optionData.dataset.forEach((item: datasetList, itemIndex: number) => {
    if (itemIndex === index) {
      item.url = url
    }
  })
}

//针对gbt28181，根据设备id和通道号获取播放流地址
const getVideoControlList = async (deviceId: string, channelId: string, index: number) => {
  const {
    data: { flv }
  } = await getVideoControlStart({
    deviceId,
    channelId
  })
  props.optionData.dataset.forEach((item: datasetList, itemIndex: number) => {
    if (itemIndex === index) {
      item.url = flv
    }
  })
}

//针对自定义地址，直接获取地址
const getCustomUrl= async (url:string, index: number) => {
  props.optionData.dataset.forEach((item: datasetList, itemIndex: number) => {
    if (itemIndex === index) {
      item.url = url
    }
  })
}

const handleChecked = ({ target }: Recordable, _: object, index: number) => {
  const { value } = target
  if (value === sourceTypeEnum.PLATFORM) {
    getOriginationList()
  }
  props.optionData.dataset[index].url = null
}

const handleSelect = (_: string, e: videoList, index: number) => {
  const { accessMode, id, channelId, deviceId, customUrl } = e
  props.optionData.dataset[index] = {
    ...props.optionData.dataset[index],
    accessMode, id, channelId, deviceId, customUrl,url:''
  } as any
}

onMounted(() => {
  props.optionData.dataset.forEach((item: datasetList) => {
    if (item.sourceType === sourceTypeEnum.PLATFORM) {
      getOriginationList()
      if (item.organization) {
        getVideoLists(item.organization)
      }
    }
  })
})
</script>