<script setup lang="ts">
import { Button, Divider } from 'ant-design-vue'
import { onMounted, ref, unref } from 'vue'
import { DataSourceForm } from '@/core/Library/components/PublicForm/components/DataSourceForm'
import { useNodeData } from '@/core/Library/hook/useNodeData'
import { useMessage } from '@/hooks/web/useMessage'
import type { ConfigComponentProps } from '@/core/Library/types'
import { useSavePageContent } from '@/core/Library/hook/useSavePageContent'
import { useContentDataStoreWithOut } from '@/store/modules/contentData'

const props = defineProps<ConfigComponentProps>()

const { createMessage } = useMessage()

const loading = ref(false)

const dataSourceFormRef = ref<Nullable<InstanceType<typeof DataSourceForm>>>(null)

const nodeDataActinType = useNodeData({ cell: props.cell!, immediate: false })

const { getNodeAllData, saveNodeAllData, getNodeData } = nodeDataActinType

const { savePageContent } = useSavePageContent()
const contentDataStore = useContentDataStoreWithOut()

const handleSubmit = async () => {
  try {
    loading.value = true
    await unref(dataSourceFormRef)?.validate()
    const formValues = unref(dataSourceFormRef)?.getFieldsValue()
    let dataSourceJson = formValues
    if (contentDataStore.getIsTemplate)
      dataSourceJson = { ...formValues, deviceProfileId: formValues?.deviceProfileTemplateId, deviceId: null }

    await saveNodeAllData({ dataSourceJson: { ...formValues } })
    createMessage.success('保存成功~')
    savePageContent()
  }
  finally {
    loading.value = false
  }
}

onMounted(async () => {
  await getNodeAllData()
  const { dataSourceJson } = unref(getNodeData) || {}
  if (dataSourceJson)
    dataSourceFormRef.value?.setFieldsValue(dataSourceJson)
})
</script>

<template>
  <main class="w-full h-full flex flex-col px-2 py-4 box-border">
    <main class="form-container">
      <Divider orientation="left">
        数据源
      </Divider>
      <DataSourceForm ref="dataSourceFormRef" />
    </main>
    <Button class="mt-3" type="primary" :loading="loading" @click="handleSubmit">
      保存
    </Button>
  </main>
</template>