/* eslint-disable arrow-body-style */
/* eslint-disable no-useless-escape */
/* eslint-disable no-lonely-if */
/* eslint-disable no-unused-expressions */
/* eslint-disable prefer-template */
/* eslint-disable react/jsx-boolean-value */
import React, { useState, useEffect } from 'react';
import { Modal, Collapse, notification, Upload, Input, Empty, Tooltip } from 'antd';
import { GetImageOrderByFile, GetImageOrderByPath } from '@/services/integratedLogin/api';
import classnames from 'classnames';
import styles from './PreviewModal.less';

const { Panel } = Collapse;

const PreviewModal = props => {
  const { callBackSubmit = () => {}, visible, onCancel, imageUrl, keepImgeUrl, type } = props;
  const [imgData, setImgData] = useState([]);
  const [pickItem, setPickItem] = useState('');
  const [chooseItem, setChooseItem] = useState('');
  const [keepItem, setKeepItem] = useState('');
  const [keepGroupName, setKeepGroupName] = useState([]);
  const [search, setSearch] = useState('');

  const { Search } = Input;

  useEffect(() => {
    if (visible) {
      setChooseItem(imageUrl);
      update();
    } else {
      setPickItem('');
      setKeepItem('');
      setChooseItem('');
    }
  }, [visible]);

  const update = () => {
    GetImageOrderByFile({
      maxLength: 279.1525423728813,
      path: 'assets/images/caseCenter/events',
    })
      .then(resdata => {
        if (resdata.code === 0) {
          let bb = [];
          let aa = [];
          resdata.data.map((i, a) => {
            if (i.list.length > 0) {
              bb.push(i);
              aa.push(i.text);
            }
          });
          setKeepGroupName(aa);
          setImgData(bb);
          resdata.data.map(i => {
            i.list.map((j, index) => {
              if (keepImgeUrl) {
                if (j.value == keepImgeUrl) {
                  setKeepItem(i.text);
                  setPickItem(index);
                  setChooseItem(j.value);
                }
              } else {
                if (chooseItem == j.value) {
                  setKeepItem(i.text);
                  setPickItem(index);
                  setChooseItem(j.value);
                }
              }
            });
          });
        } else {
          notification.error({
            message: '获取失败',
            description: resdata.msg,
          });
        }
      })
      .catch(err => {
        console.error(err);
      });
  };

  // 提交
  const onSubmit = () => {
    if (keepItem) {
      let aa = imgData.find(i => i.text === keepItem);
      callBackSubmit(chooseItem);
    }
    onCancel();
  };

  const handleCollapseChange = key => {
    setKeepGroupName(key);
  };

  const onSearch = e => {
    setSearch(e.target.value);
  };

  const submitSearch = () => {
    GetImageOrderByPath({
      maxLength: 279.1525423728813,
      path: 'assets/images/caseCenter/events',
      fileName: search,
    })
      .then(resdata => {
        if (resdata.code === 0) {
          let bb = [];
          let aa = [];
          resdata.data.map((i, a) => {
            if (i.list.length > 0) {
              bb.push(i);
              aa.push(i.text);
            }
          });
          setKeepGroupName(aa);
          setImgData(bb);
          resdata.data.map(i => {
            i.list.map((j, index) => {
              if (`/${chooseItem}` == j.value) {
                setKeepItem(i.text);
                setPickItem(index);
                setChooseItem(j.value);
              }
            });
          });
        } else {
          notification.error({
            message: '获取失败',
            description: resdata.msg,
          });
        }
      })
      .catch(err => {
        console.error(err);
      });
  };

  return (
    <Modal
      title="图片库"
      style={{ top: '100px' }}
      width="1000px"
      destroyOnClose
      maskClosable={false}
      cancelText="取消"
      okText="确认"
      {...props}
      onOk={() => onSubmit()}
      forceRender={true}
      getContainer={false}
    >
      <Search
        placeholder="搜索图库"
        // size="middle"
        value={search}
        enterButton
        style={{ width: '50%' }}
        onChange={e => onSearch(e)}
        onSearch={submitSearch}
        allowClear
      />
      {imgData.length > 0 ? (
        <Collapse
          style={{ height: '600px', overflow: 'scroll', marginTop: '20px' }}
          bordered={false}
          activeKey={keepGroupName}
          onChange={handleCollapseChange}
        >
          {imgData.map((i, j) => {
            return (
              <Panel
                header={i.text}
                key={i.text}
                style={{
                  marginBottom: '24px',
                  overflow: 'hidden',
                  border: '0px',
                  background: '#f7f7f7',
                  borderRadius: '2px',
                }}
              >
                {i.list &&
                  i.list.map((k, index) => {
                    return (
                      <div className={styles.divItem} key={index}>
                        <img
                          src={window.location.origin + `/civweb4/${k.value}`}
                          className={classnames({
                            [styles.imgHidden]: k.value !== chooseItem,
                            [styles.imgItem]: k.value == chooseItem,
                          })}
                          height="80px"
                          width="80px"
                          alt="集成登录默认"
                          onClick={e => {
                            setPickItem(index);
                            setKeepItem(i.text);
                            setChooseItem(k.value);
                          }}
                        />
                        <div
                          style={{
                            textAlign: 'center',
                            width: '100px',
                          }}
                        >
                          <Tooltip title={k.text}>
                            <p
                              style={{
                                height: '22px',
                                overflow: 'hidden',
                                whiteSpace: 'nowrap',
                                textOverflow: 'ellipsis',
                              }}
                            >
                              {k.text}
                            </p>
                          </Tooltip>
                        </div>
                      </div>
                    );
                  })}
              </Panel>
            );
          })}
        </Collapse>
      ) : (
        <Empty
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          description="暂无数据"
          style={{ height: '600px', margin: '20px auto 0px auto', paddingTop: '50px' }}
        />
      )}
    </Modal>
  );
};
export default PreviewModal;
