import React from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";

import { Button, Table, DatePicker, Switch, Modal, Dropdown, Menu } from "antd";

import {
  WeaTop,
  WeaTab,
  WeaRightMenu,
  WeaRangePicker,
  WeaInputSearch,
  WeaSlideModal,
  WeaTable,
} from "ecCom";
import { renderNoright, getSearchs } from "../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
import CustomTab from "../../components/customTab";
import ContentWrapper from "../../components/contentWrapper";
import StepSlide from "../../components/stepSlide";
import SlideBaseForm from "./slideBaseForm";
import SlideRefereUser from "./slideRefereUser";

import { columns } from "./columns";
import SalaryItemForm from "./salaryItemForm";
import CalRulesForm from "./calcRulesForm";
import ValidRulesForm from "./validRulesForm";
import SlideModalTitle from "../../components/slideModalTitle";
import CopyFormModal from "./copyFormModal";
import "./index.less";

const { MonthPicker } = DatePicker;

@inject("ledgerStore", "taxAgentStore")
@observer
export default class Ledger extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      selectedKey: "0",
      stepSlideVisible: false,
      editSlideVisible: false,
      copyFormVisible: false,
      currentStep: 0,
      selectedTab: 0,
      currentReocrd: {},
      searchValue: "",
      step1Request: {},
    };
  }

  handleSearch(value) {
    const {
      ledgerStore: { getTableDatas },
    } = this.props;
    getTableDatas({ name: value });
  }

  refereUser() {
    this.setState({
      editSlideVisible: true,
      selectedTab: 1,
    });
  }

  onEdit() {
    this.setState({
      editSlideVisible: true,
    });
  }

  componentWillMount() {
    const {
      ledgerStore: { doInit },
      taxAgentStore: { fetchTaxAgentOption },
    } = this.props;
    doInit();
    fetchTaxAgentOption();
  }

  handleItemStatusChange(value, record) {
    const {
      ledgerStore: { changeLedgerStatus },
    } = this.props;
    changeLedgerStatus(record.id, value ? 0 : 1);
  }

  handleItemClick(record, selectedTab = 0) {
    const {
      ledgerStore: { setSalarySobId },
    } = this.props;
    setSalarySobId(record.id);
    this.setState({
      selectedTab,
      editSlideVisible: true,
      request: record,
    });
  }

  // 编辑Slide保存按钮
  handleEditSlideSave() {
    const { selectedTab, step1Request } = this.state;
    const {
      ledgerStore: {
        saveLedgerItem,
        saveAdjustmentRule,
        saveLedgerBasic,
        baseInfoRequest,
      },
    } = this.props;
    if (selectedTab == 0) {
      saveLedgerBasic(baseInfoRequest);
    } else if (selectedTab == 2) {
      saveLedgerItem();
    } else if (selectedTab == 3) {
      saveAdjustmentRule();
    }
  }

  // 增加编辑功能，重写columns绑定事件
  getColumns = (columns) => {
    let newColumns = "";
    newColumns = columns.map((column) => {
      let newColumn = column;
      newColumn.render = (text, record, index) => {
        //前端元素转义
        let valueSpan =
          record[newColumn.dataIndex + "span"] !== undefined
            ? record[newColumn.dataIndex + "span"]
            : record[newColumn.dataIndex];
        switch (newColumn.dataIndex) {
          case "name":
            return (
              <a
                onClick={() => {
                  this.handleItemClick(record);
                }}>
                {text}
              </a>
            );
          case "disable":
            return (
              <Switch
                checked={text == 0}
                onChange={(value) => {
                  this.handleItemStatusChange(value, record);
                }}
              />
            );
          case "operate":
            return (
              <a
                onClick={() => {
                  this.handleItemClick(record, 1);
                }}>
                关联人员
              </a>
            );
          default:
            return <div dangerouslySetInnerHTML={{ __html: valueSpan }} />;
        }
      };
      return newColumn;
    });
    return newColumns;
  };

  onOperatesClick = (record, type) => {
    const {
      ledgerStore: { deleteLedger },
    } = this.props;
    switch (type.toString()) {
      case "0": // 编辑
        this.handleItemClick(record);
        break;
      case "1": // 复制
        this.setState({
          copyFormVisible: true,
          currentReocrd: record,
        });
        break;
      case "3": // 关联人员
        this.handleItemClick(record, 1);
        break;
      case "4": // 删除
        Modal.confirm({
          title: "信息确认",
          content: "确认删除",
          onOk: () => {
            deleteLedger([record.id]);
          },
          onCancel: () => {},
        });

        break;
    }
  };

  handleCopySave = (value) => {
    const {
      ledgerStore: { doCopy },
    } = this.props;
    doCopy(this.state.currentReocrd.id, value).then(() => {
      this.setState({ copyFormVisible: false });
    });
  };

  handleNew = () => {
    const {
      ledgerStore: { initSlideData },
    } = this.props;
    initSlideData();
    this.setState({ stepSlideVisible: true, currentStep: 0 });
  };

  render() {
    const { ledgerStore } = this.props;
    const {
      loading,
      dataSource,
      columns,
      pageObj,
      setPageObj,
      hasRight,
      form,
      condition,
      tableStore,
      showSearchAd,
      getTableDatas,
      doSearch,
      setShowSearchAd,
      baseInfoRequest,
    } = ledgerStore;
    const { canEdit } = baseInfoRequest;
    const { currentStep, selectedTab } = this.state;
    if (!hasRight && !loading) {
      // 无权限处理
      return renderNoright();
    }

    const rightMenu = [
      // 右键菜单
      {
        key: "BTN_COLUMN",
        icon: <i className="icon-coms-Custom" />,
        content: "显示列定制",
        onClick: this.showColumn,
      },
    ];
    const collectParams = {
      // 收藏功能配置
      favname: "薪资账套",
      favouritetype: 1,
      objid: 0,
      link: "wui/index.html#/ns_demo03/index",
      importantlevel: 1,
    };
    const adBtn = [
      // 高级搜索内部按钮
      <Button type="primary" onClick={doSearch}>
        搜索
      </Button>,
      <Button type="ghost" onClick={() => form.resetForm()}>
        重置
      </Button>,
      <Button type="ghost" onClick={() => setShowSearchAd(false)}>
        取消
      </Button>,
    ];

    const topTab = [];

    const renderRightOperation = () => {
      return (
        <div style={{ display: "inline-block" }}>
          <Button
            type="primary"
            style={{ marginRight: "10px" }}
            onClick={() => this.handleNew()}>
            新建
          </Button>
          <WeaInputSearch
            value={this.state.searchValue}
            onChange={(value) => {
              this.setState({ searchValue: value });
            }}
            onSearch={(value) => {
              this.handleSearch(value);
            }}
          />
        </div>
      );
    };

    const nextStep = () => {
      const { currentStep } = this.state;
      this.setState({ currentStep: currentStep + 1 });
    };

    const prevStep = () => {
      const { currentStep } = this.state;
      this.setState({ currentStep: currentStep - 1 });
    };
    const steps = [
      "基础设置",
      "关联人员",
      "薪资项目",
      "调薪记薪规则",
      // "校验规则",
    ];

    const handleStep1Save = () => {
      const { step1Request } = this.state;
      const {
        ledgerStore: { saveLedgerBasic, baseInfoRequest },
      } = this.props;
      saveLedgerBasic(baseInfoRequest).then(() => {
        nextStep();
      });
    };

    const handleStep3Save = () => {
      const {
        ledgerStore: { saveAdjustmentRule },
      } = this.props;
      saveAdjustmentRule().then(() => {
        nextStep();
      });
    };

    const handleStepSave = () => {
      const { currentStep } = this.state;
      const {
        ledgerStore: {
          saveLedgerBasic,
          saveLedgerItem,
          saveAdjustmentRule,
          baseInfoRequest,
        },
      } = this.props;
      if (currentStep == 0) {
        saveLedgerBasic(baseInfoRequest).then(() => {
          nextStep();
        });
      } else if (currentStep == 1) {
        nextStep();
      } else if (currentStep == 2) {
        saveLedgerItem().then(() => {
          nextStep();
        });
      } else if (currentStep == 3) {
        saveAdjustmentRule().then(() => {
          this.setState({ stepSlideVisible: false });
        });
      }
    };

    const pagination = {
      total: pageObj.total,
      showTotal: (total) => `共 ${total} 条`,
      showSizeChanger: true,
      onShowSizeChange: (current, pageSize) => {
        setPageObj({ ...pageObj, current, pageSize });
        getTableDatas({ current, pageSize, name: this.state.searchValue });
      },
      onChange: (current) => {
        setPageObj({ ...pageObj, current, pageSize: pageObj.pageSize });
        getTableDatas({
          current,
          pageSize: pageObj.pageSize,
          name: this.state.searchValue,
        });
      },
    };
    const newColumns = _.map([...columns], (item) => {
      if (item.dataIndex === "name") {
        return {
          ...item,
          render: (text, record) => (
            <div className="linkWapper">
              <a
                href="javaScript:void(0);"
                onClick={() => {
                  this.handleItemClick(record);
                }}>
                {text}
              </a>
            </div>
          ),
        };
      } else if (item.dataIndex === "disable") {
        return {
          ...item,
          render: (text, record) => (
            <Switch
              checked={text == 0}
              onChange={(value) => {
                this.handleItemStatusChange(value, record);
              }}
            />
          ),
        };
      } else if (item.dataIndex === "operate") {
        return {
          ...item,
          render: (text, record) => (
            <div className="linkWapper">
              <a
                onClick={() => {
                  this.handleItemClick(record, 1);
                }}>
                关联人员
              </a>
              <Dropdown
                overlay={
                  <Menu
                    onClick={(item) => this.onOperatesClick(record, item.key)}>
                    <Menu.Item key="0">编辑</Menu.Item>
                    <Menu.Item key="1">复制</Menu.Item>
                    <Menu.Item key="3">关联人员</Menu.Item>
                    <Menu.Item key="4">删除</Menu.Item>
                  </Menu>
                }>
                <a className="ant-dropdown-link" href="javaScript:void(0);">
                  <i className="icon-coms-more" style={{ marginLeft: 18 }} />
                </a>
              </Dropdown>
            </div>
          ),
        };
      } else {
        return { ...item };
      }
    });

    return (
      <div className="mySalaryBenefitsWrapper">
        <WeaRightMenu
          datas={rightMenu} // 右键菜单
          collectParams={collectParams} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
        >
          <WeaTop
            title="薪资账套" // 文字
            icon={<i className="icon-coms-meeting" />} // 左侧图标
            iconBgcolor="#F14A2D" // 左侧图标背景色
            showDropIcon={true} // 是否显示下拉按钮
            dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
            dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
          >
            <CustomTab
              searchOperationItem={renderRightOperation()}
              onChange={(v) => {}}
            />
            <WeaTable
              rowKey="id"
              columns={newColumns}
              dataSource={dataSource}
              pagination={pagination}
              loading={loading}
              scroll={{ x: 1300 }}
            />
            {this.state.stepSlideVisible && (
              <StepSlide
                visible={this.state.stepSlideVisible}
                steps={steps}
                currentStep={currentStep}
                onCancel={() => {
                  this.setState({ stepSlideVisible: false });
                }}
                customOperate={
                  <div style={{ display: "inline-block" }}>
                    {currentStep == 0 && (
                      <Button
                        type="primary"
                        onClick={() => {
                          handleStep1Save();
                        }}>
                        保存并进入下一步
                      </Button>
                    )}
                    {currentStep == 1 && (
                      <div style={{ display: "inline-block" }}>
                        <Button
                          type="default"
                          onClick={() => {
                            this.setState({ stepSlideVisible: false });
                          }}>
                          完成，跳过所有步骤
                        </Button>
                        <Button
                          type="primary"
                          style={{ marginLeft: "10px" }}
                          onClick={() => {
                            handleStepSave();
                          }}>
                          下一步
                        </Button>
                      </div>
                    )}
                    {currentStep == 2 && (
                      <div>
                        <Button
                          type="default"
                          onClick={() => {
                            this.setState({ stepSlideVisible: false });
                          }}>
                          完成，跳过所有步骤
                        </Button>
                        <Button
                          type="default"
                          style={{ marginLeft: "10px" }}
                          onClick={() => {
                            prevStep();
                          }}>
                          上一步
                        </Button>
                        <Button
                          type="primary"
                          style={{ marginLeft: "10px" }}
                          onClick={() => {
                            handleStepSave();
                          }}>
                          保存并进入下一步
                        </Button>
                      </div>
                    )}
                    {currentStep == 3 && (
                      <div>
                        <Button
                          type="default"
                          style={{ marginRight: "10px" }}
                          onClick={() => {
                            prevStep();
                          }}>
                          上一步
                        </Button>
                        <Button
                          type="primary"
                          onClick={() => {
                            handleStepSave();
                          }}>
                          完成
                        </Button>
                      </div>
                    )}
                  </div>
                }
                title="新建账套"
                content={
                  <div>
                    {currentStep == 0 && <SlideBaseForm />}
                    {currentStep == 1 && <SlideRefereUser />}
                    {currentStep == 2 && <SalaryItemForm />}
                    {currentStep == 3 && <CalRulesForm />}
                    {/* {
                    currentStep == 4 && <ValidRulesForm />
                  } */}
                  </div>
                }
              />
            )}

            {this.state.editSlideVisible && (
              <WeaSlideModal
                visible={this.state.editSlideVisible}
                top={0}
                width={40}
                height={100}
                direction={"right"}
                measure={"%"}
                title={
                  <SlideModalTitle
                    subtitle={`编辑账套`}
                    tabs={[
                      { title: "基础设置", key: 0 },
                      { title: "关联人员", key: 1 },
                      { title: "薪资项目", key: 2 },
                      { title: "调薪计薪规则", key: 3 },
                    ]}
                    editable={canEdit === "true"}
                    selectedTab={selectedTab}
                    onSave={() => this.handleEditSlideSave()}
                    subItemChange={(item) => {
                      this.setState({ selectedTab: item.key });
                    }}
                  />
                }
                content={
                  <div>
                    {selectedTab == 0 && <SlideBaseForm edit={true} />}
                    {selectedTab == 1 && <SlideRefereUser edit={true} />}
                    {selectedTab == 2 && <SalaryItemForm edit={true} />}
                    {selectedTab == 3 && <CalRulesForm edit={true} />}
                    {/* {
                    selectedTab == 4 && <ValidRulesForm edit={true}/>
                  } */}
                  </div>
                }
                onClose={() => this.setState({ editSlideVisible: false })}
                showMask={true}
                closeMaskOnClick={() =>
                  this.setState({ editSlideVisible: false })
                }
              />
            )}
          </WeaTop>
        </WeaRightMenu>

        {this.state.copyFormVisible && (
          <CopyFormModal
            visible={this.state.copyFormVisible}
            onSave={(value) => this.handleCopySave(value)}
            onCancel={() => {
              this.setState({ copyFormVisible: false });
            }}
          />
        )}
      </div>
    );
  }
}