import React, { Component } from 'react';
import style from "styled-components";
import { Tabs, Breadcrumb } from 'antd';
import { Link } from "dva/router";
import BatchImport from "./BatchImport";
import ExportChanges from "./ExportChanges";

// import styles from './less/ImportExportNav.less';

const { TabPane } = Tabs;

/****
 * 导入导出组件，Tab切换
 */
export default class ImportExportNav extends Component {
  componentDidMount() {
    /* const { dispatch } = this.props;
    dispatch({
      type: 'profile/fetchBasic',
    }); */
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.dispatch({
          type: 'form/submitRegularForm',
          payload: values,
        });
      }
    });
  }
  callback = (key) => {
    console.log(key);
  }
  render() {
    return (
      <Box>
        <div className="resume-breadcrumb">
          <Breadcrumb>
            {/* <Breadcrumb.Item><Link to="/Organization/departmentmanagement">组织架构</Link></Breadcrumb.Item> */}
            <Breadcrumb.Item><Link to="/PersonnelRecruitment/departmentmanagement">组织架构</Link></Breadcrumb.Item>
            <Breadcrumb.Item>批量导入</Breadcrumb.Item>
          </Breadcrumb>
        </div>
        <Tabs tabBarStyle={{ marginLeft: 24, marginRight: 24 }} defaultActiveKey="1" onChange={this.callback}>
          <TabPane tab="导入" key="1">
            <BatchImport />
          </TabPane>
          {/* <TabPane tab="导出/修改组织机构" key="2"> */}
          {/* <TabPane tab="导出" key="2">
            <ExportChanges />
          </TabPane> */}
        </Tabs>
      </Box>
    );
  }
}

const Box = style.div`{
  .resume-breadcrumb{
    margin:16px 0 8px 24px;
  }
}`;