<script lang="ts" setup>
import { Button, Divider } from 'ant-design-vue'
import { nextTick, onMounted, ref, unref } from 'vue'
import { formSchemas } from '../config'
import { ChartComponentEnum } from '..'
import { DataSourceForm } from '../component/index'
// import { DataSourceForm } from '@/core/Library/components/PublicForm/components/DataSourceForm'

import { BasicForm, useForm } from '@/components/Form'
import { FormLayoutEnum } from '@/components/Form/src/enum'
import { createPublicFormContext } from '@/core/Library/components/PublicForm/usePublicFormContext'
import type { ConfigComponentProps } from '@/core/Library/types'
import { useNodeData } from '@/core/Library/hook/useNodeData'
import { useMessage } from '@/hooks/web/useMessage'
import { useSavePageContent } from '@/core/Library/hook/useSavePageContent'
import { useContentDataStoreWithOut } from '@/store/modules/contentData'

const props = defineProps<ConfigComponentProps>()
const loading = ref(false)

const dataSourceElRef = ref<Nullable<InstanceType<typeof DataSourceForm>>>()

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

const { getNodeData, getNodeAllData, saveNodeAllData } = nodeDataActinType

const [register, { getFieldsValue, setFieldsValue, validate }] = useForm({
  schemas: formSchemas(ChartComponentEnum.HISTOGRAM),
  showActionButtonGroup: false,
  layout: FormLayoutEnum.HORIZONTAL,
  labelWidth: 70,
})

const { createMessage } = useMessage()

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

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

    await saveNodeAllData({ dataSourceJson: { ...dataSourceJson, attr: typeof value.attr == 'string' ? [value.attr] : value.attr, chartOption: { ...values } } })
    savePageContent()
    createMessage.success('操作成功~')
  }
  finally {
    loading.value = false
  }
}

const handleSetFormValues = async () => {
  const { dataSourceJson } = unref(getNodeData) || {}
  const { deviceId, attr, chartOption, deviceProfileId, deviceProfileTemplateId, deviceName } = dataSourceJson || {}
  await nextTick()
  unref(dataSourceElRef)?.setFieldsValue({ deviceId, attr, deviceName, deviceProfileId, deviceProfileTemplateId })
  setFieldsValue({ ...chartOption })
}

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

<template>
  <main class="form-container px-4">
    <Divider orientation="left">
      数据源
    </Divider>
    <DataSourceForm ref="dataSourceElRef" />
    <Divider orientation="left">
      展示类型
    </Divider>
    <BasicForm @register="register" />
    <Button type="primary" class="w-full" :loading="loading" @click="handleSubmit">
      保存
    </Button>
  </main>
</template>

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