<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 type { NodeDataDataSourceJsonType } from '@/api/node/model'
import { useSavePageContent } from '@/core/Library/hook/useSavePageContent'

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: true })

const { getNodeAllData, saveNodeAllData, getNodeData } = nodeDataActinType

const { savePageContent } = useSavePageContent()

const handleSubmit = async () => {
  try {
    loading.value = true
    await unref(dataSourceFormRef)?.validate()
    const formValues = unref(dataSourceFormRef)?.getFieldsValue()
    await saveNodeAllData({ dataSourceJson: { ...formValues } })
    createMessage.success('保存成功~')
    savePageContent()
  }
  finally {
    loading.value = false
  }
}

onMounted(async () => {
  await getNodeAllData()
  if (unref(getNodeData)?.dataSourceJson) {
    const { thermometerOption } = unref(getNodeData)?.dataSourceJson as NodeDataDataSourceJsonType
    if (!thermometerOption) return
    dataSourceFormRef.value?.setFieldsValue(thermometerOption)
  }
})
</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>