/*
 * @Description: 
 * @Author: tangjiang
 * @Github: 
 * @Date: 2019-12-12 10:34:03
 * @LastEditors: tangjiang
 * @LastEditTime: 2019-12-12 20:18:46
 */
import './index.scss';
import React, { useState, useEffect } from 'react';
import {Icon, Empty} from 'antd';
import MyIcon from '../../../../common/components/MyIcon';

function LeftPane (props) {
  
  // 获取数据集
  const { dataSets = [] } = props;

  const emptyCtx = (
    <div className="jupyter_empty">
      <Empty />
    </div>
  );

  // const listCtx = ;
  const [renderCtx, setRenderCtx] = useState(() => (emptyCtx));

  useEffect(() => {
    if (dataSets.length > 0) {
      console.log('数据集的个数: ', dataSets.length);
      const oList = dataSets.map((item, i) => {
        return (
          <li className="jupyter_item" key={`key_${i}`}>
            <Icon type="file-text" className="jupyter_icon"/>
            <span className="jupyter_name">{item.title}</span>
          </li>
        );
      });

      const oUl = (
        <ul className="jupyter_data_list">
          { oList }
        </ul>
      );

      setRenderCtx(oUl);
    }
  }, [props]);
  // 渲染数据集
  // const renderList = () => {
  //   // 空数据
  //   if (dataSets.length === 0) {
  //     return <div className="jupyter_empty">
  //       <Empty />
  //     </div>
  //   } else {
  //     // 渲染列表
  //     const oList = dataSets.map((item, i) => {
  //       return (
  //         <li className="jupyter_item" key={`key_${i}`}>
  //           <Icon type="file-text" className="jupyter_icon"/>
  //           <span className="jupyter_name">{item.title}</span>
  //         </li>
  //       );
  //     });
  //     return (
  //       <ul className="jupyter_data_list">
  //         { oList }
  //       </ul>
  //     );
  //   }
  // }

  return (
    <div className="jupyter_data_sets_area">
      <h2 className="jupyter_h2_title">
        <MyIcon type="iconwenti" className="jupyter_data_icon"/> 数据集
      </h2>
      { renderCtx }
    </div>
  )
}

export default LeftPane;