<script setup lang="ts">
import { Button, Divider } from 'ant-design-vue'
import { nextTick, onMounted, ref, unref } from 'vue'
import { getOrganization } from '@/api/device'
import { getVideoList } from '@/api/video'
import { BasicForm, useForm } from '@/components/Form'
import { ComponentEnum, FormLayoutEnum } from '@/components/Form/src/enum'
import { ContentDataFieldsEnum, ContentDataFieldsNameEnum } from '@/enums/datasource'
import { useParseParams } from '@/core/LoadData'
import { useNodeData } from '@/core/Library/hook/useNodeData'
import type { ConfigComponentProps } from '@/core/Library/types'
import { createPublicFormContext } from '@/core/Library/components/PublicForm/usePublicFormContext'
import type { NodeDataDataSourceJsonType, VideoOptionType } from '@/api/node/model'
import { useMessage } from '@/hooks/web/useMessage'
import { useSavePageContent } from '@/core/Library/hook/useSavePageContent'

const props = defineProps<ConfigComponentProps>()
const { organizationId } = useParseParams()
const nodeDataActinType = useNodeData({ cell: props.cell!, immediate: false })

const { getNodeData, getNodeAllData, saveNodeAllData } = nodeDataActinType

const loading = ref(false)

const [register, { getFieldsValue, validate, setFieldsValue }] = useForm({
  schemas: [
    {
      field: ContentDataFieldsEnum.ORG_ID,
      label: ContentDataFieldsNameEnum.ORG_ID,
      component: ComponentEnum.API_TREE_SELECT,
      required: true,
      componentProps: ({ formModel }) => {
        return {
          api: getOrganization,
          params: organizationId,
          labelField: 'name',
          valueField: 'id',
          onChange() {
            formModel[ContentDataFieldsEnum.VIDEO_ID] = null
          },
        }
      },
    },
    {
      field: ContentDataFieldsEnum.VIDEO_ID,
      label: ContentDataFieldsNameEnum.VIDEO_ID,
      component: ComponentEnum.API_SELECT,
      componentProps: ({ formModel }) => {
        return {
          api: getVideoList,
          params: formModel[ContentDataFieldsEnum.ORG_ID],

          fieldNames: { label: 'name', value: 'id' },
          resultField: 'items',
          onSelect(value: string, option: any) {
            formModel[ContentDataFieldsEnum.ACCESS_MODE] = value && option ? option.accessMode : null
            formModel[ContentDataFieldsEnum.VIDEO_URL] = value && option ? option.videoUrl : null
            formModel[ContentDataFieldsEnum.VIDEO_FLAG] = true
          },
        }
      },
    },
    {
      field: ContentDataFieldsEnum.ACCESS_MODE,
      label: ContentDataFieldsNameEnum.ACCESS_MODE,
      component: ComponentEnum.INPUT,
      ifShow: false,
    },
    {
      field: ContentDataFieldsEnum.VIDEO_URL,
      label: ContentDataFieldsNameEnum.VIDEO_URL,
      component: ComponentEnum.INPUT,
      ifShow: false,
    },
    {
      field: ContentDataFieldsEnum.VIDEO_FLAG,
      label: ContentDataFieldsEnum.VIDEO_FLAG,
      component: ComponentEnum.INPUT,
      ifShow: false,
    },
  ],

  showActionButtonGroup: false,
  layout: FormLayoutEnum.HORIZONTAL,
  labelWidth: 70,
})

const handleSetFormValues = async () => {
  const { dataSourceJson } = unref(getNodeData) || {}
  const { videoOption } = dataSourceJson || {}
  await nextTick()
  setFieldsValue(videoOption || {})
}
const { createMessage } = useMessage()
const { savePageContent } = useSavePageContent()
const handleSubmit = async () => {
  try {
    loading.value = true
    await validate()
    const values = getFieldsValue()
    await saveNodeAllData({ dataSourceJson: { videoOption: values as unknown as VideoOptionType } as unknown as NodeDataDataSourceJsonType })
    createMessage.success('操作成功~')
    savePageContent()
  }
  finally {
    loading.value = false
  }
}

onMounted(async () => {
  await getNodeAllData()
  handleSetFormValues()
})
createPublicFormContext(nodeDataActinType)
</script>

<template>
  <main class="w-full h-full flex flex-col">
    <div class="px-4 form-container">
      <Divider orientation="left">
        视频绑定
      </Divider>
      <BasicForm @register="register" />
      <Button type="primary" class="w-full" :loading="loading" @click="handleSubmit">
        保存
      </Button>
    </div>
  </main>
</template>

<style lang="less" scoped>
.form-container {
    @apply text-sm;
    :deep(.ant-divider) {
      @apply text-sm;
    }
  }
</style>