import React from "react";
import { Button } from "antd";
import { WeaReqTop } from "ecCom";
import "./index.less";

export default class SlideModalTitle extends React.Component {
  componentWillMount() { // 初始化渲染页面
    this.state = {
      editable: this.props.editable
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      editable: nextProps.editable
    });
  }

  render() {
    const { selectedTab, tabs, subtitle, customOperate, subItemChange } = this.props;
    return <div className="reqTopWrapper">
      <WeaReqTop
        title={subtitle}
        buttonSpace={10}
        icon={<i className="icon-coms-fa"/>}
        iconBgcolor="#F14A2D"
        buttons={(this.props.showOperateBtn && this.state.editable && this.props.selectedTab != 1) ? [
          <Button type="primary" className="saveBtn" onClick={this.props.onSave}>保存</Button>
        ] : !_.isEmpty(customOperate) ? customOperate: []}
        showDropIcon={false}
        dropMenuDatas={[]}
        tabDatas={tabs || []}
        selectedKey={String(selectedTab) || ""}
        onChange={ key => subItemChange(key) }
      />
    </div>;
    // return <div className="slideTitleWrapper">
    //   <div className="iconWrapper">
    //     <i className="icon-coms-fa"/>
    //   </div>
    //   <div className="slideTitle">
    //     {
    //       this.props.subtitle && <div className="subtitle">
    //         {
    //           this.props.tabs ?
    //             <div>
    //               <div className="mainTitle">{this.props.subtitle}</div>
    //               <div className="subTab">
    //                 {this.props.tabs.map(item => (
    //                   <span className={item.key == this.props.selectedTab ? "subItem subItemSelected" : "subItem"}
    //                         onClick={() => this.props.subItemChange(item)}>{item.title}</span>
    //                 ))}
    //               </div>
    //             </div> : <div>{this.props.subtitle}</div>
    //         }
    //       </div>
    //     }
    //   </div>
    //   <div className="btnWrapper">
    //     {this.props.btns}
    //     {
    //       this.props.showOperateBtn && this.state.editable && this.props.selectedTab != 1 &&
    //       <Button type="primary" className="saveBtn" onClick={this.props.onSave}>保存</Button>
    //     }
    //     {this.props.customOperate}
    {/*  </div>*/
    }

    {/*</div>;*/
    }
  }
}