<script setup lang="ts">
import { Button, Divider, Space } 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 type { ConfigComponentProps } from '@/core/Library/types'
import { useMessage } from '@/hooks/web/useMessage'
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 colorConfig = ref([
  {
    label: '背景色',
    value: '#8BADCB',
  },
  {
    label: '颜色一',
    value: '#4579e2',
  },
  {
    label: '颜色二',
    value: '#3461c1',
  },
  {
    label: '颜色三',
    value: '#2d55aa',
  },
])

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 handleSubmit = async () => {
  try {
    loading.value = true
    await unref(dataSourceFormRef)?.validate()
    const formValues = unref(dataSourceFormRef)?.getFieldsValue()
    saveNodeAllData({ dataSourceJson: { ...formValues, circularFlowMeterOption: unref(colorConfig) } })
    createMessage.success('保存成功~')
    savePageContent()
  }
  finally {
    loading.value = false
  }
}

onMounted(async () => {
  await getNodeAllData()
  if (unref(getNodeData)?.dataSourceJson) {
    const { circularFlowMeterOption, additional } = unref(getNodeData)?.dataSourceJson as NodeDataDataSourceJsonType
    colorConfig.value = additional || unref(colorConfig)
    if (!circularFlowMeterOption) return
    dataSourceFormRef.value?.setFieldsValue(circularFlowMeterOption)
  }
})
</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>
    <main class="form-container mt-2">
      <Divider orientation="left">
        流量计配置
      </Divider>
      <Space direction="vertical">
        <div v-for="(item, index) in colorConfig" :key="index" class="mt-3 ml-5">
          <span>{{ item.label }}</span>
          <input v-model="item.value" class="ml-3" type="color">
        </div>
      </Space>
    </main>
    <Divider />
    <Button class="mt-3" type="primary" :loading="loading" @click="handleSubmit">
      保存
    </Button>
  </main>
</template>