import React, { useState, useImperativeHandle, forwardRef, useMemo, useRef } from 'react'
import { Select, message } from 'antd'
import Drag from '../../../components/Drag'
import FormRender from '../../../FormRender'
import { isJson, isObject } from '../../../../utils/index'
import { BatchEditTableDataInfo } from '../../../../apis/process'

const BatchEdit = (props, ref) => {

  useImperativeHandle(ref, () => ({
    open,
  }))

  const { config } = props
  const { editFieldGroup, formJson } = config
  const [value, setValue] = useState('')
  const [params, setParams] = useState({ accountTable: '', id: '' })
  const [visible, setVisible] = useState(false)
  const [confirmLoading, setConfirmLoading] = useState(false)
  const formRenderRef = useRef()

  const filedArr = useMemo(() => {
    let array = editFieldGroup ? editFieldGroup.split(',').filter(v => v) : []
    setValue(array.length ? array[0] : '')
    return array
  }, [editFieldGroup])

  const schemaValues = useMemo(() => {
    let properties = {}
    let schema = formJson.properties
    if (isObject(schema)) {
      Object.keys(schema).forEach(v => {
        if (isObject(schema[v]?.properties)) {
          Object.keys(schema[v].properties).forEach(s => {
            if (s === value) {
              properties = {
                [v]: {
                  ...schema[v],
                  properties: {
                    [s]: schema[v].properties[s]
                  }
                }
              }
            }
          })
        }
      })
    }
    return {
      formJson: {
        ...formJson,
        column: 1,
        properties: properties
      },
      values: []
    }
  }, [editFieldGroup, formJson, value])

  const onSelect = (value) => {
    setValue(value)
  }

  const open = (values) => {
    setParams(values)
    setVisible(true)
  }

  const onOk = async () => {
    setConfirmLoading(true)
    const { formValue, errors } = await formRenderRef.current.getValues()
    let values = formValue.filter(v => v.fieldName === value) || []
    if (errors.length) {
      return message.error('请完善表单内容')
    }
    const { code, data, msg } = await BatchEditTableDataInfo({ ...params, values: values })
    if (code === 0) {
      message.success('批量修改成功!')
      setVisible(false)
      props.onOk && props.onOk()
    } else {
      message.error(msg)
    }
    setConfirmLoading(false)
  }

  return (
    <Drag
      width={700}
      title='批量修改'
      visible={visible}
      bodyStyle={{ height: '300px', overflow: 'auto' }}
      onOk={onOk}
      onCancel={() => setVisible(false)}
      confirmLoading={confirmLoading}
      getContainer={false}
      destroyOnClose
    >
      <div style={{ display: 'flex', alignItems: 'center' }}>
        列字段选择:
        <Select
          style={{ minWidth: '250px' }}
          placeholder='请选择字段'
          showArrow
          showSearch
          value={value}
          onSelect={onSelect}
        >
          {filedArr.map(v => <Select.Option key={v} value={v}>{v}</Select.Option>)}
        </Select>
      </div>
      <div style={{ marginTop: '10px' }}>
        <FormRender schemaValues={schemaValues} ref={formRenderRef} />
      </div>
    </Drag>
  )

}

export default forwardRef(BatchEdit)