import React, { Component } from "react";
import { toJS } from "mobx";
import { inject, observer } from "mobx-react";
import { i18n } from "../../public/i18n";
import LeftTree from "./components/leftTree";
import NewAndEditDialog from "../NewAndEditDialog";
import {
  WeaTop,
  WeaTab,
  WeaFormItem,
  WeaRightMenu,
  WeaLeftRightLayout,
} from "ecCom";
import { Row, Col, Spin, Modal, Button, message, Switch } from "antd";
import { WeaSwitch, WeaTableNew } from "comsMobx";
import "./index.less";

@inject("officeManageStore")
@observer
export default class OfficeManage extends Component {
  componentDidMount() {
    const { officeManageStore } = this.props;
    officeManageStore.getHasRight && officeManageStore.getHasRight();
  }
  getDropMenuDatas = () => {
    const { officeManageStore } = this.props;
    const { rightMenu } = officeManageStore;
    let menus = [];
    toJS(rightMenu).map((item, index) => {
      let obj = {
        key: item.menuFun,
        icon: <i className={`${item.menuIcon}`} />,
        content: item.menuName,
      };
      if (
        item.menuFun == "collection" ||
        item.menuFun == "help" ||
        item.menuFun == "pageAddress"
      ) {
        obj.disabled = true;
      }
      menus.push(obj);
    });
    return menus;
  };

  handleMenuClick = (key) => {};

  getTopMenuBtns = () => {
    const { officeManageStore } = this.props;
    const { topMenu, tableStore, getPostInfoForm } = officeManageStore;
    let btns = [];
    topMenu.map((item, i) => {
      if (item.menuFun !== "batchDelete") {
        btns.push(
          <Button
            type="primary"
            onClick={() => {
              const { officeManageStore } = this.props;
              const { isPanelShow, setPanelStatus } = officeManageStore;
              isPanelShow && setPanelStatus(false);
              getPostInfoForm();
            }}>
            {item.menuName}
          </Button>
        );
      } else {
        btns.push(
          <Button
            type="primary"
            onClick={() => console.log(item)}
            // disabled={tableStore.selectedRowKeys.length > 0 ? false : true}
          >
            {item.menuName}
          </Button>
        );
      }
    });

    return btns;
  };
  getPanelComponents = () => {
    const { officeManageStore } = this.props;
    const { searchCondition, form2, searchConditionLoading } =
      officeManageStore;
    let arr = [];
    let formParams = form2.getFormParams();
    const { isFormInit } = form2;
    isFormInit &&
      searchCondition.map((c) => {
        c.items.map((field, index) => {
          arr.push(
            <Col
              ecId={`${
                (this && this.props && this.props.ecId) || ""
              }_Col@4cc308@${index}`}
              span={index % 2 == 0 ? 10 : 11}
              offset={1}>
              <div style={{ marginTop: 20 }}>
                <WeaFormItem
                  ecId={`${
                    (this && this.props && this.props.ecId) || ""
                  }_WeaFormItem@u6ex85@${index}`}
                  label={`${field.label}`}
                  labelCol={{ span: `${field.labelcol}` }}
                  wrapperCol={{ span: `${field.fieldcol}` }}>
                  {
                    <WeaSwitch
                      ecId={`${
                        (this && this.props && this.props.ecId) || ""
                      }_WeaSwitch@p7d3td@${index}`}
                      fieldConfig={field}
                      form={form2}
                      formParams={formParams}
                    />
                  }
                </WeaFormItem>
              </div>
            </Col>
          );
        });
      });

    if (searchConditionLoading) {
      return (
        <div className="hrm-loading-center-small" style={{ top: "25%" }}>
          <Spin
            ecId={`${
              (this && this.props && this.props.ecId) || ""
            }_Spin@lbktzb`}
            spinning={searchConditionLoading}></Spin>
        </div>
      );
    } else {
      return (
        <Row
          ecId={`${(this && this.props && this.props.ecId) || ""}_Row@ppeb6z`}
          // onKeyDown={(e) => {
          //   if (e.keyCode == 13 && e.target.tagName === "INPUT") {
          //     officeManageStore.getTableInfo();
          //     officeManageStore.setPanelStatus(false);
          //   }
          // }}
        >
          {arr}
        </Row>
      );
    }
  };
  getTabBtn = () => {
    const { officeManageStore } = this.props;
    const { form2, setPanelStatus } = officeManageStore;

    const btn = [
      <Button
        ecId={`${(this && this.props && this.props.ecId) || ""}_Button@bx87i8`}
        type="primary"
        onClick={() => {
          officeManageStore.getTableInfo();
          setPanelStatus(false);
        }}>
        {i18n.button.search()}
      </Button>,
      <Button
        ecId={`${(this && this.props && this.props.ecId) || ""}_Button@218ju6`}
        onClick={() => form2.reset()}>
        {i18n.button.reset()}
      </Button>,
      <Button
        ecId={`${(this && this.props && this.props.ecId) || ""}_Button@5u9mfz`}
        onClick={() => setPanelStatus(false)}>
        {i18n.button.cancel()}
      </Button>,
    ];

    return btn;
  };
  onSearchChange = (val) => {
    const { officeManageStore } = this.props;
    const { form2 } = officeManageStore;

    officeManageStore.setSchemeName(val);
    !_.isEmpty(form2.getFormParams()) && officeManageStore.updateFields(val);
  };

  render() {
    const { officeManageStore } = this.props;
    const {
      isPanelShow,
      form2,
      schemeName,
      conditionNum,
      tableStore,
      nEdialogTitle,
      visible,
      condition,
      form,
      dialogLoading,
    } = officeManageStore;
    return (
      <div className="office-wapper">
        <WeaLeftRightLayout
          isNew={true}
          leftWidth={310}
          leftCom={<LeftTree />}
          onCollapse={(showLeft) => console.log("showLeft:", showLeft)}>
          <WeaRightMenu
            ecId={`${
              (this && this.props && this.props.ecId) || ""
            }_WeaRightMenu@cea97d`}
            datas={this.getDropMenuDatas()}
            onClick={(key) => this.handleMenuClick(key)}>
            <WeaTop
              ecId={`${
                (this && this.props && this.props.ecId) || ""
              }_WeaTop@446d12`}
              title={i18n.label.schemeName()}
              icon={<i className="icon-coms-hrm" />}
              iconBgcolor="#217346"
              loading={true}
              buttons={this.getTopMenuBtns()}
              showDropIcon={true}
              dropMenuDatas={this.getDropMenuDatas()}
              onDropMenuClick={(e) => this.handleMenuClick(e)}>
              <WeaTab
                ecId={`${
                  (this && this.props && this.props.ecId) || ""
                }_WeaTab@39c727`}
                searchType={["base", "advanced"]}
                showSearchAd={isPanelShow}
                searchsBaseValue={
                  _.isEmpty(form2.getFormParams())
                    ? schemeName
                    : form2.getFormParams().schemeName
                }
                setShowSearchAd={(bool) =>
                  officeManageStore.setPanelStatus(bool)
                }
                hideSearchAd={() => officeManageStore.setPanelStatus(false)}
                searchsAd={
                  isPanelShow ? this.getPanelComponents() : <div></div>
                }
                advanceHeight={Math.ceil(conditionNum / 2) * 52 + 20}
                hasMask={false}
                buttonsAd={this.getTabBtn()}
                // onSearch={() => officeManageStore.getSearchCondition()}
                onSearchChange={(val) => this.onSearchChange(val)}
              />
              {/* <WeaTable
                ecId={`${
                  (this && this.props && this.props.ecId) || ""
                }_WeaTable@b43a4c`}
                comsWeaTableStore={tableStore}
                hasOrder={true}
                needScroll={true}
                getColumns={(c) => this.reRenderColumns(c)}
                onOperatesClick={(record, index, operate) =>
                  this.onOperatesClick(record, index, operate)
                }
              /> */}
            </WeaTop>
            <NewAndEditDialog
              ecId={`${
                (this && this.props && this.props.ecId) || ""
              }_NewAndEditDialog@q4rrwm`}
              title={nEdialogTitle}
              visible={visible}
              condition={toJS(condition)}
              form={form}
              isFormInit={form.isFormInit}
              loading={dialogLoading}
              isEdit={false}
              height={250}
              conditionLen={3}
              // save={() => this.handleSave()}
              // onCancel={() => rankScheme.setVisible(false)}
            />
          </WeaRightMenu>
        </WeaLeftRightLayout>
      </div>
    );
  }
}