/*
 * Author: 黎永顺
 * name: 内容操作按钮区
 * Description:
 * Date: 2023/4/21
 */
import React, { Component } from "react";
import { WeaLocaleProvider } from "ecCom";
import "../index.less";

const { getLabel } = WeaLocaleProvider;

class RightOptions extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: true
    };
  }

  render() {
    const { onChange } = this.props;
    const { show } = this.state;
    return (
      <div className="layoutSide" style={{ width: show ? "30px" : 0 }}>
        <div className="sideBox">
          <div className="sideMain">
            <div className="toll-bar-container" style={{ alignItems: show && "center" }}>
              <i className="icon-coms-background" title={getLabel(111, "数据视图")}
                 onClick={() => onChange("", "dataView")}/>
              <i className="icon-portal-reportform-o" title={getLabel(111, "柱状图")}
                 onClick={() => onChange("1", "bar")}/>
              <i className="icon-coms-Line" title={getLabel(111, "折线图")} onClick={() => onChange("2", "line")}/>
              <i className="icon-coms-Pie" title={getLabel(111, "饼图")} onClick={() => onChange("0", "pie")}/>
              <i className="icon-coms-Flow-setting" title={getLabel(111, "设置")}
                 onClick={() => onChange("1", "setting")}/>
            </div>
          </div>
          <span className="show-btn-right"
                onClick={() => this.setState({ show: !show })}>
              {
                show ? <img src={require("../../../common/leftTree-show.png")} alt=""/> :
                  <img src={require("../../../common/leftTree-hide.png")} alt=""/>
              }
            </span>
        </div>
      </div>
    );
  }
}

export default RightOptions;