<script setup lang="ts">
import { Button, Divider, Space } from 'ant-design-vue'
import { onMounted, ref, unref } from 'vue'
import { defaultFlowmetmerColorConfig } from './form.config'
import { DataSourceForm } from '@/core/Library/components/PublicForm/components/DataSourceForm'
import { useNodeData } from '@/core/Library/hook/useNodeData'
import type { ConfigComponentProps } from '@/core/Library/types'
import { useMessage } from '@/hooks/web/useMessage'
import type { FlowMeterColorItemType, NodeDataDataSourceJsonType } from '@/api/node/model'
import { useSavePageContent } from '@/core/Library/hook/useSavePageContent'
import { useContentDataStoreWithOut } from '@/store/modules/contentData'
import { useTranslation } from '@/hooks/useTranslation'
const props = defineProps<ConfigComponentProps>()

const { createMessage } = useMessage()

const { t } = useTranslation()
const loading = ref(false)

const colorConfig = ref<FlowMeterColorItemType[]>(defaultFlowmetmerColorConfig)

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

const { getNodeAllData, saveNodeAllData, getNodeData } = nodeDataActinType

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

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, deviceName: null }

    saveNodeAllData({ dataSourceJson: { ...dataSourceJson, circularFlowMeterOption: unref(colorConfig) } })
    createMessage.success(t('savedSucc'))
    savePageContent()
  }
  finally {
    loading.value = false
  }
}

onMounted(async () => {
  await getNodeAllData()
  const { dataSourceJson } = unref(getNodeData) || {}
  if (dataSourceJson) {
    const { circularFlowMeterOption } = unref(getNodeData)?.dataSourceJson as NodeDataDataSourceJsonType
    colorConfig.value = circularFlowMeterOption || unref(colorConfig)
    unref(dataSourceFormRef)?.setFieldsValue(unref(getNodeData)?.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" class="!text-sm">
        {{ t('dataSource') }}
      </Divider>
      <DataSourceForm ref="dataSourceFormRef" />
    </main>
    <main class="form-container mt-2">
      <Divider orientation="left" class="!text-sm">
        {{ t('flowMeterConfig') }}
      </Divider>
      <Space direction="vertical">
        <div v-for="(item, index) in colorConfig" :key="index" class="mt-3 ml-5 flex">
          <div class="w-20">
            {{ t(item.label) }}
          </div>
          <input v-model="item.value" class="ml-3" type="color">
        </div>
      </Space>
    </main>
    <Divider />
    <Button class="mt-3" type="primary" :loading="loading" @click="handleSubmit">
      {{ t('save') }}
    </Button>
  </main>
</template>