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";
import { renderNoright } from "../../util";

const confirm = Modal.confirm;
const WeaTable = WeaTableNew.WeaTable;
@inject("officeManageStore")
@observer
export default class OfficeManage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: "",
      editId: "",
      loading: false,
      deleteOfficeClassifyFlag: false
    };
  }
  componentDidMount() {
    const { officeManageStore } = this.props;
    officeManageStore.getTreeData && officeManageStore.getTreeData();
    officeManageStore.getHasRight && officeManageStore.getHasRight();
    officeManageStore.getPostInfoTable && officeManageStore.getPostInfoTable();
  }
  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 => {
    const { officeManageStore } = this.props;
    const { isPanelShow, tableStore } = officeManageStore;
    isPanelShow && officeManageStore.setPanelStatus(false);
    switch (key) {
      case "new":
        officeManageStore.getPostInfoForm();
        officeManageStore.setVisible(true);
        officeManageStore.setNeDialogTitle(i18n.label.newOfficeName());
        break;
      case "custom":
        tableStore.setColSetVisible(true);
        tableStore.tableColSet(true);
        break;
      default:
        break;
    }
  };

  handleSave() {
    const {
      form,
      condition,
      savePostInfo,
      updatePostInfo
    } = this.props.officeManageStore;
    const { editId } = this.state;
    form.validateForm().then(f => {
      if (f.isValid) {
        // 验证通过, balabala业务代码
        const payload = editId
          ? { ...form.getFormParams(), id: editId }
          : { ...form.getFormParams() };
        this.setState({ loading: true });
        if (editId) {
          updatePostInfo(payload).then(({ code, msg }) => {
            this.setState({ loading: false });
            if (code === 200) {
              message.success("编辑成功");
              this.props.officeManageStore.setVisible(false);
              this.props.officeManageStore.getPostInfoTable();
              this.setState({ editId: "" });
            } else {
              message.error(msg || "编辑失败");
            }
          });
          return;
        }
        savePostInfo(payload).then(({ code, msg }) => {
          this.setState({ loading: false });
          if (code === 200) {
            message.success("新增成功");
            this.props.officeManageStore.setVisible(false);
            this.props.officeManageStore.getPostInfoTable();
            this.setState({ editId: "" });
          } else {
            message.error(msg || "新增失败");
          }
        });
      } else {
        f.showErrors();
        this.setState({ date: new Date() }); // 改变一个state的变量,强制页面刷新
      }
    });
  }
  getTopMenuBtns = () => {
    const { officeManageStore } = this.props;
    const { topMenu, tableStore, officeClassifyId } = officeManageStore;
    let btns = [];
    topMenu.map((item, i) => {
      if (item.menuFun !== "batchDelete" && item.menuFun !== "delPlan") {
        btns.push(
          <Button
            type="primary"
            disabled={item.menuFun == "editPlan" && !officeClassifyId}
            onClick={() => {
              const { officeManageStore } = this.props;
              if (item.menuFun == "new") {
                officeManageStore.isPanelShow &&
                  officeManageStore.setPanelStatus(false);
                officeManageStore.getPostInfoForm();
                officeManageStore.setVisible(true);
                officeManageStore.setNeDialogTitle(i18n.label.newOfficeName());
              } else if (
                item.menuFun == "addPlan" ||
                item.menuFun == "editPlan"
              ) {
                officeManageStore.getPostForm(
                  item.menuFun == "editPlan" ? officeClassifyId : ""
                );
                officeManageStore.setOfficeVisible({
                  bool: true,
                  type: item.menuFun
                });
              }
            }}>
            {item.menuName}
          </Button>
        );
      } else if (item.menuFun === "delPlan") {
        btns.push(
          <Button
            type="primary"
            onClick={() => {
              confirm({
                title: i18n.confirm.defaultTitle(),
                content: i18n.confirm.delete(),
                okText: i18n.button.ok(),
                cancelText: i18n.button.cancel(),
                onOk: () => {
                  this.setState({
                    deleteOfficeClassifyFlag: !this.state
                      .deleteOfficeClassifyFlag
                  });
                },
                onCancel() {
                  return false;
                }
              });
            }}
            disabled={
              !officeClassifyId ||
              (officeClassifyId && !_.isEmpty(toJS(tableStore.datas)))
            }>
            {item.menuName}
          </Button>
        );
      } else {
        btns.push(
          <Button
            type="primary"
            onClick={() => {
              const { officeManageStore } = this.props;
              const { tableStore } = officeManageStore;
              const ids = toJS(tableStore.selectedRowKeys).toString();
              this.showConfirm("batchDel", ids);
            }}
            disabled={tableStore.selectedRowKeys.length > 0 ? false : true}>
            {item.menuName}
          </Button>
        );
      }
    });
    return btns;
  };

  showConfirm = (v, ids) => {
    confirm({
      title: i18n.confirm.defaultTitle(),
      content:
        v == "del" ? i18n.confirm.delete() : i18n.confirm.batchDeleteConfirm(),
      okText: i18n.button.ok(),
      cancelText: i18n.button.cancel(),
      onOk: () => this.deletePostinfoByIds(ids),
      onCancel() {
        return false;
      }
    });
  };

  deletePostinfoByIds = ids => {
    const { officeManageStore } = this.props;
    const { deletePostinfoByIds } = officeManageStore;
    deletePostinfoByIds({ ids }).then(({ code, msg }) => {
      if (code === 200) {
        message.success("删除成功");
        officeManageStore.getPostInfoTable();
      } else {
        message.error(msg || "删除失败");
      }
    });
  };

  reRenderColumns = columns => {
    let _this = this;
    columns.forEach((c, index) => {
      if (c.dataIndex == "forbidden_tag") {
        c.render = function(text, record) {
          return (
            <Switch
              checked={record.forbidden_tag == "0" ? true : false}
              onChange={checked => {
                confirm({
                  title: i18n.confirm.defaultTitle(),
                  content:
                    record.forbidden_tag === "0" ? "确定禁用该记录吗？" : "确定启用该记录吗？",
                  okText: i18n.button.ok(),
                  cancelText: i18n.button.cancel(),
                  onOk: () => _this.updateForbiddenTag(checked, record.id),
                  onCancel() {
                    return false;
                  }
                });
              }}
            />
          );
        };
      }
    });
  };

  updateForbiddenTag = (forbiddentag, id) => {
    const { officeManageStore } = this.props;
    const { updateForbiddenTagById } = officeManageStore;
    const payload = {
      id,
      forbiddentag
    };
    updateForbiddenTagById(payload).then(({ code, msg }) => {
      if (code === 200) {
        message.success("操作成功");
        officeManageStore.getPostInfoTable();
      } else {
        message.error(msg || "操作失败");
      }
    });
  };

  onOperatesClick = (record, index, operate) => {
    operate.index == "0" && this.doEdit(record.randomFieldId);
    operate.index === "1" && this.showConfirm("del", record.randomFieldId);
  };
  doEdit = editId => {
    this.setState({ editId });
    const { officeManageStore } = this.props;
    officeManageStore.isPanelShow && officeManageStore.setPanelStatus(false);
    officeManageStore.getPostInfoForm(editId);
    officeManageStore.setVisible(true);
    officeManageStore.setNeDialogTitle(i18n.label.editOfficeName());
  };

  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}
          />
        </div>
      );
    } else {
      return (
        <Row
          ecId={`${(this && this.props && this.props.ecId) || ""}_Row@ppeb6z`}
          onKeyDown={e => {
            if (e.keyCode == 13 && e.target.tagName === "INPUT") {
              officeManageStore.getPostInfoTable();
              officeManageStore.setPanelStatus(false);
            }
          }}>
          {arr}
        </Row>
      );
    }
  };
  getTabBtn = () => {
    const { officeManageStore } = this.props;
    const { form2 } = officeManageStore;

    const btn = [
      <Button
        ecId={`${(this && this.props && this.props.ecId) || ""}_Button@bx87i8`}
        type="primary"
        onClick={() => {
          officeManageStore.getPostInfoTable();
          officeManageStore.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={() => officeManageStore.setPanelStatus(false)}>
        {i18n.button.cancel()}
      </Button>
    ];

    return btn;
  };
  onSearchChange = val => {
    const { officeManageStore } = this.props;
    const { form2 } = officeManageStore;
    officeManageStore.setPostInfoName(val);
    !_.isEmpty(form2.getFormParams()) && officeManageStore.updateFields(val);
  };

  render() {
    const { officeManageStore } = this.props;
    const { date, loading, deleteOfficeClassifyFlag } = this.state;
    const {
      isPanelShow,
      form2,
      postInfoName,
      conditionNum,
      tableStore,
      nEdialogTitle,
      visible,
      condition,
      form,
      dialogLoading,
      hasRight
    } = officeManageStore;

    if (hasRight === false) {
      return renderNoright();
    }

    return (
      <div className="office-wapper">
        <WeaLeftRightLayout
          isNew={true}
          leftWidth={310}
          leftCom={
            <LeftTree deleteOfficeClassifyFlag={deleteOfficeClassifyFlag} />
          }
          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.officeName()}
              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())
                    ? postInfoName
                    : form2.getFormParams().postInfoName
                }
                setShowSearchAd={bool => officeManageStore.setPanelStatus(bool)}
                hideSearchAd={() => officeManageStore.setPanelStatus(false)}
                searchsAd={isPanelShow ? this.getPanelComponents() : <div />}
                advanceHeight={Math.ceil(conditionNum / 2) * 52 + 20}
                hasMask={false}
                buttonsAd={this.getTabBtn()}
                onSearch={() => officeManageStore.getPostInfoTable()}
                onSearchChange={val => this.onSearchChange(val)}
              />
              <WeaTable
                ecId={`${(this && this.props && this.props.ecId) ||
                  ""}_WeaTable@b43a4c`}
                comsWeaTableStore={tableStore}
                hasOrder={true}
                needScroll={true}
                rowSelection={{
                  getCheckboxProps: record => {
                    console.log(record);
                    return {
                      disabled: 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 || loading}
              isEdit={true}
              height={250}
              conditionLen={3}
              save={() => this.handleSave()}
              onCancel={() => {
                officeManageStore.setVisible(false);
                this.setState({ editId: "" });
              }}
            />
          </WeaRightMenu>
        </WeaLeftRightLayout>
      </div>
    );
  }
}