import React, { useState, useEffect, useCallback } from 'react';
import { Spin, Button } from 'antd';
import ListCardItem from './listCardItem';
import { get, post, CITY_SERVICE } from '../../services';
import styles from './listCardItem.less';

const tip = 'loading...';
const ListCard = props => {
  const {
    ouid,
    searchWord,
    valueCallback,
    onCommit = () => {},
    btnLoading = false,
  } = props;
  const [valueList, setValueList] = useState({});
  const [dataList, setdataList] = useState([]);
  const [loading, setLoading] = useState(true);

  const getValueCallback = useCallback((value, index) => {
    valueList[index] = value;
    setValueList({ ...valueList });
    valueCallback({ ...valueList });
  }, []);

  useEffect(() => {
    setLoading(true);
    const defaultConfig = {
      optionsList: [],
      title: '默认组',
      id: '',
    };
    //  ${CITY_SERVICE}/OMS.svc/U_GetUserListForBatchOper
    get(`${CITY_SERVICE}/OMS.svc/P_GetUserByStation`, {
      // OUID:ouid||'',
      stationID: ouid || '',
      _version: 9999,
      _dc: new Date().getTime(),
    })
      .then(res => {
        setLoading(false);
        const list = [];
        // eslint-disable-next-line no-unused-expressions
        res &&
          res.forEach(item => {
            list.push({ ...defaultConfig, ...item });
          });
        setdataList(list);
      })
      .catch(err => {
        console.error(err);
        setLoading(false);
      });
  }, [ouid]);
  return (
    <div>
      {loading ? (
        <Spin
          size="large"
          spinning={loading}
          tip={tip}
          style={{
            position: 'absolute',
            top: '30%',
            left: '0',
            right: '0',
            bottom: '0',
          }}
        />
      ) : (
        dataList &&
        dataList.length > 0 &&
        dataList.map((item, index) => (
          <ListCardItem
            {...item}
            itemid={index}
            key={`item${index}key`}
            getValueCallback={getValueCallback}
            searchWord={searchWord}
            {...props}
          />
        ))
      )}
      {true && !loading && dataList && (
        <div className={styles.btnBox}>
          <Button
            type="primary"
            onClick={() => onCommit()}
            loading={btnLoading}
          >
            提交
          </Button>
        </div>
      )}
    </div>
  );
};

export default ListCard;
