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

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

  init = () => {
    const { columnSetting } = this.props;
    columnSetting.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.defineShowItems()
    }, {
      key: "1",
      title: i18n.label.columnPermission()
    }, {
      key: "2",
      title: i18n.label.columnCustom()
    }];
  };
  save = () => {
    const { columnSetting } = this.props;
    const { selectedKey } = columnSetting;
    selectedKey === "0" ?
      columnSetting.userDefineCardItemSave() :
      selectedKey === "1" ?
        columnSetting.columnPermissionSave() : columnSetting.customItemSave();
  };

  render() {
    const { columnSetting } = this.props;
    const { selectedKey, authorized } = columnSetting;
    if (!authorized) {
      return renderNoright();
    }
    return (
      authorized && <div style={{ height: "100%" }}>
        <WeaRightMenu
          ecId={`${this && this.props && this.props.ecId || ""}_WeaRightMenu@k6oc4u`}
          datas={[{
            key: "save",
            icon: <i className="icon-coms-Preservation"/>,
            content: "保存"
          }]}
          onClick={key => (key && this[key]())}
        >
          <WeaTop
            ecId={`${this && this.props && this.props.ecId || ""}_WeaTop@bj98s7`}
            title={i18n.label.cardColumnSet()}
            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) => columnSetting.setSelectedKey(key)}
          />
          {
            selectedKey === "0" ?
              <DefineShowItems ecId={`${this && this.props && this.props.ecId || ""}_DefineShowItems@q1hmoj`}/> :
              selectedKey === "1" ?
                <PermissionItem ecId={`${this && this.props && this.props.ecId || ""}_SysShowItems@0wqtjk`}/> :
                <CustomItem ecId={`${this && this.props && this.props.ecId || ""}_CustomItems@0wqtjk`}/>
          }
        </WeaRightMenu>
      </div>
    );
  }
}

export default ColumnSetting;