import React, { useEffect, useState, useRef } from 'react';
import { Spin, notification, Table, Modal, Tooltip } from 'antd';
import { ApartmentOutlined, PartitionOutlined } from '@ant-design/icons';
import Tree from '@/components/ExpendableTree';
import { GetLayerList, GetMetaDataPreview, GetLayerMetaDataPreview } from '@/services/gis/gis';
import { set } from 'lodash';
import styles from '../SchemeConfig.less';
const MeteDataModal = props => {
  const { metaData, visible, onCancel } = props;
  const [currentMeta, setCurrentMeta] = useState([]);
  const [metedataList, setMetedataList] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [loading, setLoading] = useState(false);
  const [expendKey, setExpendKey] = useState(''); // 保存默认展开项
  const [recored, setRecored] = useState('');
  const setRowClassName = e => (e.layerID === recored.layerID ? styles.clickRowStyle : '');

  useEffect(() => {
    if (visible) {
      getMeteData();
    } else {
      setMetedataList([]);
      setCurrentMeta([]);
    }
  }, [visible]);

  const getMeteData = () => {
    GetLayerList({ serviceName: metaData.GISServerProjectName }).then(res => {
      if (res.success) {
        getTree();
        setMetedataList(res.root);
        setRecored(res.root[0]);
      } else {
        notification.error({
          message: '提示',
          duration: 3,
          description: res.message,
        });
      }
    });
  };

  const getTree = () => {
    setLoading(true);
    GetMetaDataPreview({ serviceName: metaData.GISServerProjectName }).then(res => {
      console.log(res);
      setExpendKey('0-0');
      setLoading(false);
      setCurrentMeta(res);
    });
  };

  const columns = [
    {
      title: '图层',
      dataIndex: 'layerName',
      width: 150,
      key: 'layerName',
    },
  ];

  // 渲染机构树
  const mapTree = org => {
    const haveChildren = Array.isArray(org.children) && org.children.length > 0;
    return {
      title: (
        <div className={styles.title1}>
          <span className={styles.titleText}>
            {org.children.length == 0 ? (
              <span />
            ) : (
              <PartitionOutlined style={{ fontSize: '14px', color: '#1890FF' }} />
            )}
            <span style={{ marginLeft: '5px' }}>
              <Tooltip
                placement="left"
                title={org.text}
                overlayStyle={{
                  maxWidth: 800,
                  maxHeight: 900,
                  overflowY: 'scroll',
                  overflowX: 'hidden',
                }}
              >
                {org.text}
              </Tooltip>
            </span>
          </span>
        </div>
      ),
      key: org.id,
      // 判断它是否存在子集，若果存在就进行再次进行遍历操作，知道不存在子集便对其他的元素进行操作
      children: haveChildren ? org.children.map(i => mapTree(i)) : [],
    };
  };

  const onSelect = e => {
    console.log(e);
    setRecored(e);
    setLoading(true);
    if (e.layerID != null) {
      GetLayerMetaDataPreview({
        serviceName: metaData.GISServerProjectName,
        layerID: e.layerID,
      }).then(res => {
        setLoading(false);
        setCurrentMeta(res);
      });
    } else {
      getTree();
    }
  };

  const onSubmit = () => {};
  return (
    <Modal
      visible={visible}
      title={metaData ? `${metaData.ServiceName}的元数据` : '元数据'}
      bodyStyle={{ width: '100%', height: '650px' }}
      style={{ top: 50, borderRadius: '20px' }}
      width="1050px"
      cancelText="取消"
      okText="确认"
      {...props}
      onOk={() => onSubmit()}
    >
      <div className={styles.treeHeight}>
        <Spin spinning={isLoading}>
          <div style={{ width: '1000px', height: '640px', display: 'flex' }}>
            <div style={{ width: '300px' }}>
              <Table
                onRow={record => ({
                  onClick: e => {
                    onSelect(record);
                  }, // 点击行
                })}
                bordered
                rowClassName={setRowClassName}
                pagination={false}
                style={{ width: '300px' }}
                columns={columns}
                dataSource={metedataList}
                size="small"
                scroll={{
                  y: '600px',
                }}
              />
            </div>
            <Spin spinning={loading}>
              <div
                style={{
                  display: 'inline-block',
                  border: '1px solid #f0f0f0',
                  width: '700px',
                }}
              >
                <Tree
                  showIcon="true"
                  blockNode
                  defaultExpandAll
                  autoExpandParent
                  treeData={currentMeta.map(t => mapTree(t))}
                  // selectedKeys={[menuID]}
                  expandedKeys={currentMeta[0] && currentMeta[0].id}
                />
              </div>
            </Spin>
          </div>
        </Spin>
      </div>
    </Modal>
  );
};

export default MeteDataModal;
