/*
 * @Description: 左侧编辑 / 评论 / 提交记录 
 * @Author: tangjiang 
 * @Date: 2019-11-19 11:35:30 
 * @Last Modified by: tangjiang
 * @Last Modified time: 2019-11-19 19:07:02
 */

import './index.scss';
import React, { useState } from 'react';
import { Tabs } from 'antd';
import EditorTab from './editorTab';
import PrevTab from './prevTab';
import CommitTab from './commitTab';

const { TabPane } = Tabs;

function LeftPane (props) {

  const [defaultActiveKey, setDefaultActiveKey] = useState('editor');

  const tabArrs = [
    { title: '编辑', key: 'editor', content: (<EditorTab />) },
    { title: '预览',  key: 'prev', content: (<PrevTab />) },
    // { title: '提交记录',  key: 'commit', content: (<CommitTab />) },
  ];

  const tabs = tabArrs.map((tab) => {
    const Comp = tab.content;
    return (
      <TabPane tab={tab.title} key={tab.key}>
        { Comp }
      </TabPane>
    )
  });

  // tab切换时
  const handleTabChange = (key) => {
    setDefaultActiveKey(key);
  }

  // 执行表单提交函数

  return (
    <Tabs activeKey={defaultActiveKey} onChange={handleTabChange}>
      { tabs }
    </Tabs>
  )
};

export default LeftPane;