<template>
  <CollapseItem name="播放器配置" :expanded="true">
    <template v-for="(item, index) in optionData.dataset" :key="index">
      <setting-item-box name="源类型" :alone="true">
        <setting-item>
          <n-radio-group @change="handleChecked($event, item)" v-model:value="item.sourceType" name="radiogroup">
            <n-space>
              <n-radio v-for="(item, index) in sourceTypes" :key="item.value" :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, item)"
          />
        </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.url" :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: '', sourceType: 'custom', organization: '' })"
    >
      +
    </n-button>
  </CollapseItem>
</template>

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

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

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

const originationOption = ref([])

const videoOptions = ref([])

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

const handleUpdateTreeValue = (e: any, value: object) => {
  getVideoLists(e)
}

const getVideoLists = async (organizationId: string) => {
  const res = await getVideoList({ organizationId })
  videoOptions.value = res?.data?.map((item: any) => ({ label: item.name, value: item.videoUrl }))
}

const handleChecked = ({ target }: any, values: object) => {
  const { value } = target
  if (value === sourceTypeEnum.PLATFORM) {
    getOriginationList()
  }
}

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