import React, { Component } from "react";
import { WeaRightMenu, WeaTab, WeaTop } from "ecCom";
import { inject, observer } from "mobx-react";
import { Button } from "antd";
import PermissionItem from "./components/permissionItem";
import DefineShowItems from "./components/defineShowItems";
import { i18n } from "../../public/i18n";
import { renderNoright } from "../../util";

@inject("columnPermission")
@observer
class ColumnPermission extends Component {
  componentDidMount() {
    this.init();
  }

  init = () => {
    const { columnPermission } = this.props;
    columnPermission.getRight();
  };

  getTopMenuBtns = () => {
    return [
      <Button type="primary" onClick={this.save}>保存</Button>
    ];
  };
  getDropMenuDatas = () => {
    return [
      {
        key: "save",
        icon: <i className="icon-coms-Preservation"/>,
        content: "保存"
      }
    ];
  };
  getTabName = () => {
    return [{
      key: "0",
      title: i18n.label.permissionManagement()
    }, {
      key: "1",
      title: i18n.label.defineShowItems()
    }];
  };
  save = () => {
    const { columnPermission } = this.props;
    const { selectedKey } = columnPermission;
    selectedKey === "0" ? columnPermission.columnPermissionSave() : columnPermission.userDefineCardItemSave();
  };

  render() {
    const { columnPermission } = this.props;
    const { selectedKey, authorized } = columnPermission;
    if (!authorized) {
      return renderNoright();
    }
    return (
      <div style={{ height: "100%" }}>
        <WeaRightMenu
          ecId={`${this && this.props && this.props.ecId || ""}_WeaRightMenu@k6oc4u`}
          datas={[]}
          onClick={key => console.log(key)}
        >
          <WeaTop
            ecId={`${this && this.props && this.props.ecId || ""}_WeaTop@bj98s7`}
            title={i18n.label.cardView()}
            icon={<i className="icon-coms-hrm"/>}
            iconBgcolor="#217346"
            loading={true}
            buttons={this.getTopMenuBtns()}
            showDropIcon={true}
            dropMenuDatas={this.getDropMenuDatas()}
            onDropMenuClick={(e) => (e && this[e]())}
          />
          <WeaTab
            ecId={`${this && this.props && this.props.ecId || ""}_WeaTab@8mmoen`}
            selectedKey={selectedKey}
            datas={this.getTabName()}
            keyParam="key"
            onChange={(key) => columnPermission.setSelectedKey(key)}
          />
          {
            selectedKey === "0" ?
              <PermissionItem
                ecId={`${this && this.props && this.props.ecId || ""}_SysShowItems@0wqtjk`}/> :
              <DefineShowItems ecId={`${this && this.props && this.props.ecId || ""}_DefineShowItems@q1hmoj`}/>
          }
        </WeaRightMenu>
      </div>
    );
  }
}

export default ColumnPermission;