/* 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,
    imgDataList,
  } = 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) {
      console.log(imageUrl);
      console.log(keepImgeUrl);
      setChooseItem(imageUrl);
      update();
    } else {
      setPickItem('');
      setKeepItem('');
      setChooseItem('');
    }
  }, [visible]);

  const update = () => {
    console.log(imgDataList);
    let bb = [];
    let aa = [];
    imgDataList.map((i, a) => {
      if (i.files.length > 0) {
        bb.push(i);
        aa.push(i.groupName);
      }
    });
    setKeepGroupName(aa);
    console.log(bb);
    setImgData(bb);
    imgDataList.map(i => {
      i.files.map((j, index) => {
        if (keepImgeUrl) {
          if (j.path == keepImgeUrl) {
            setKeepItem(i.name);
            setPickItem(index);
            setChooseItem(j.path);
          }
        } else {
          if (chooseItem == j.path) {
            setKeepItem(i.name);
            setPickItem(index);
            setChooseItem(j.path);
          }
        }
      });
    });
  };

  // 提交
  const onSubmit = () => {
    console.log(keepItem);
    if (keepItem) {
      console.log(chooseItem);
      callBackSubmit(chooseItem);
    }
    onCancel();
  };

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

  return (
    <Modal
      title="图片库"
      style={{ top: '100px' }}
      width="1000px"
      destroyOnClose
      maskClosable={false}
      cancelText="取消"
      okText="确认"
      {...props}
      onOk={() => onSubmit()}
      forceRender={true}
      getContainer={false}
    >
      {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.groupName}
                key={i.groupName}
                style={{
                  marginBottom: '24px',
                  overflow: 'hidden',
                  border: '0px',
                  background: '#f7f7f7',
                  borderRadius: '2px',
                }}
              >
                {i.files &&
                  i.files.map((k, index) => {
                    return (
                      <div className={styles.divItem} key={index}>
                        <img
                          src={window.location.origin + `/${k.path}`}
                          className={classnames({
                            [styles.imgHidden]: k.path !== chooseItem,
                            [styles.imgItem]: k.path == chooseItem,
                          })}
                          height="80px"
                          width="80px"
                          alt="集成登录默认"
                          onClick={e => {
                            setPickItem(index);
                            setKeepItem(i.groupName);
                            setChooseItem(k.path);
                          }}
                        />
                        <div
                          style={{
                            textAlign: 'center',
                            width: '100px',
                          }}
                        >
                          <Tooltip title={k.name}>
                            <p
                              style={{
                                height: '22px',
                                overflow: 'hidden',
                                whiteSpace: 'nowrap',
                                textOverflow: 'ellipsis',
                              }}
                            >
                              {k.name}
                            </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;