import BasicField from '../Basic'
import { KMPopupSelect } from '@/components/ui'
import { FormControl } from '../../form'
import { STATUS_MAP } from '@/utils'
import type { IStatusSelectProps, StatusSelectValueType } from '@/types'

class StatusSelect extends BasicField {
  props: IStatusSelectProps
  constructor(props: IStatusSelectProps, form: FormControl) {
    super(props, form)
    this.props = props
    this.rules = this.getRules(props.componentConfig)
  }
  getRules(config: IStatusSelectProps['componentConfig']) {
    const rules = []
    if (config.required) {
      rules.push({
        required: true,
        message: `请选择${this.name}`
      })
    }
    return rules
  }
  render() {
    return (
      <FormElement
        name={this.name}
        workOrderComponentType={this.props.workOrderComponentType}
      />
    )
  }
}

const FormElement = ({
  onChange,
  name,
  workOrderComponentType,
  value = { status: '', reason: '' }
}: {
  name: string
  workOrderComponentType: IStatusSelectProps['workOrderComponentType']
  onChange?: (value: Partial<StatusSelectValueType>) => void
  value?: StatusSelectValueType
}) => {
  const triggerValue = (changedValue: Partial<StatusSelectValueType>) => {
    onChange?.({ ...value, ...changedValue })
  }

  const onStatusChange = (status: StatusSelectValueType['status']) => {
    triggerValue({
      status,
      reason:
        status === STATUS_MAP[workOrderComponentType].failValue
          ? value.reason
          : ''
    })
  }

  return (
    <>
      <KMPopupSelect
        onChange={onStatusChange}
        value={value.status}
        title={`请选择${name}`}
        options={STATUS_MAP[workOrderComponentType].options}
      />
    </>
  )
}

export default StatusSelect