<script setup lang="ts">
import { Button, Divider, Space } from 'ant-design-vue'
import { onMounted, ref, unref } from 'vue'
import { defaultFlowmetmerColorConfig } from '../CircularFlowMeter/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 } from '@/api/node/model'
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 colorConfig = ref<FlowMeterColorItemType[]>(defaultFlowmetmerColorConfig)

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

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 }

    await saveNodeAllData({ dataSourceJson: { ...dataSourceJson, rectFlowMeterOption: unref(colorConfig) } })
    createMessage.success('保存成功')
    savePageContent()
  }
  finally {
    loading.value = false
  }
}

onMounted(async () => {
  await getNodeAllData()
  const { dataSourceJson } = unref(getNodeData) || {}
  if (dataSourceJson) {
    const { rectFlowMeterOption } = dataSourceJson || {}
    colorConfig.value = rectFlowMeterOption || unref(colorConfig)
    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" class="!text-sm">
        数据源
      </Divider>
      <DataSourceForm ref="dataSourceFormRef" />
    </main>
    <main class="form-container mt-2">
      <Divider orientation="left" class="!text-sm">
        流量计配置
      </Divider>
      <Space direction="vertical">
        <div v-for="(item, index) in colorConfig" :key="index" class="flex mt-3 ml-5">
          <div class="w-20">
            {{ item.label }}
          </div>
          <input v-model="item.value" class="ml-3" type="color">
        </div>
      </Space>
    </main>
    <Divider />
    <Button class="mt-3" type="primary" @click="handleSubmit">
      保存
    </Button>
  </main>
</template>