import React from 'react'
import { Button } from 'antd';
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() {
        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>
    }
}