import React, { useEffect, useState, useCallback, useMemo } from 'react';
import clsx from 'clsx';
import { Input, Radio, Spin, Select } from 'antd';
import { getDeepValue, isChildOf  } from '@/utils'
import { getPerson, getListPerson } from '@/request/common/api'
import _ from 'lodash';
import styles from './style.module.less'
const { TextArea } = Input
const { Option } = Select

export default function searchPeople(props) {
  //viewInEdit 为false 控制外层是否改调用的update
  const [options, setOptions] = useState([])
  const [fetching, setFetching] = useState(false)
  const { renderFormData, value = [], onChange } = props
  useEffect(() => {
    const list = []
    value.forEach(t => {
      list.push(t.key)
    })
    getPersonListHandle(list)
  }, [])
  function getPersonListHandle(list) {
    setFetching(true)
    getListPerson({ memberIDAPs: list }).then(res => {
      setOptions(res.data || [])
      setFetching(true)
    }).catch(err => {
      setFetching(true)
    })
  }
  const onSearch = _.debounce((val) => {
    if(!val) return
    setFetching(true)
    getPerson({ memberIDAP: val })
      .then(res => {
        setOptions(res.data || [])
        setFetching(false)
      }).catch(err => {
        setFetching(false)
      })
  }, 1000)

  function resetValue(data) {
    if(!data) {
      onChange(renderFormData.multiple ? [] : undefined)
      return
    }
    if(renderFormData.valueReturnKeys) {
      onChange(data)
      return
    }
    let newData = renderFormData.multiple ? [] : {}
    if (renderFormData.multiple){
      newData = data.map(t => (
        {
          key: t.key,
          label: t.label.props ? t.label.props.children[1].props.children : t.label
        }
      ))
    } else {
      newData = {
        key: data.key,
        label: data.label.props ? data.label.props.children[1].props.children : data.label
      }
    }
    onChange(newData)
  }

  const optionsItem = useMemo(() =>{
    return options.map(d => (
        <Option key={d.idap}>
          <div className={styles.personItemStyle}>
            <div className={styles.personItemDetail}>{ d.deptName }</div>
            <div className={styles.personItemName}>{ d.name }</div>
            <div className={styles.personItemDetail}>{ d.idap }</div>
          </div>
        </Option>
      ))
  }, [options])
  return (
    <div className={styles.searchPeople}>
      <Select
        mode={renderFormData.multiple && 'multiple'}
        showSearch
        allowClear={renderFormData.allowClear}
        value={value || (renderFormData.multiple ? [] : undefined)}
        placeholder={renderFormData.placeholder}
        notFoundContent={fetching ? <Spin size="small" /> : null}
        labelInValue={!renderFormData.valueReturnKeys}
        dropdownMatchSelectWidth={false}
        style={{ width: '100%' }}
        disabled={renderFormData.disabled}
        filterOption={false}
        onSearch={(e) => onSearch(e)}
        onChange={(e) => resetValue(e)}
      >
        {optionsItem}
      </Select>
    </div>
  );
}
 