import React from "react";
import { toJS } from "mobx";
import CustomTab from "../../components/customTab";
import { Dropdown, Menu, message } from "antd";
import { WeaHelpfulTip, WeaInputSearch, WeaLocaleProvider, WeaSlideModal } from "ecCom";
import SlideModalTitle from "../../components/slideModalTitle";
import FileMergeDetail from "./fileMergeDetail";
import { getQueryString } from "../../util/url";
import { inject, observer } from "mobx-react";
import { getExportField } from "../../apis/calculate";
import "./index.less";
import CustomExportDialog from "./customExportDialog";

const getLabel = WeaLocaleProvider.getLabel;
@inject("calculateStore")
@observer
export default class PlaceOnFileDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      slideVisiable: false,
      selectedRowKeys: [],
      searchValue: "",
      columnIndex: "",
      customExportParams: {
        visible: false, checkItems: [], itemsByGroup: []
      }
    };
    this.id = "";
  }

  componentWillMount() {
    this.id = getQueryString("id");
    const { calculateStore: { getSalarySobCycle } } = this.props;
    getSalarySobCycle(this.id);
  }

  componentDidMount() {
    window.addEventListener("message", this.handleClick, false);
  }

  componentWillUnmount() {
    window.removeEventListener("message", this.handleClick, false);
  }

  handleClick = ({ data }) => {
    const childFrameObj = document.getElementById("atdTable");
    const salaryAcctRecordId = getQueryString("id");
    const { type, data: { id, data: record, extraId = "" } = {} } = data;
    if (type === "PR") {
      if (id === "BATCHDELETE") {
        this.setState({ selectedRowKeys: record });
      } else if (id === "PAGEINFO") {
        const { pageNum: current, size: pageSize } = record;
        this.pageInfo = { current, pageSize };
        const payload = {
          type: "PR",
          listType: "",
          hasOperate: false,
          url: "/api/bs/hrmsalary/salaryacct/acctresult/list",
          queryParams: {
            salaryAcctRecordId,
            employeeName: this.state.searchValue,
            current, pageSize
          }
        };
        childFrameObj.contentWindow.postMessage(JSON.stringify(payload), "*");
      } else if (id === "COLUMNINDEX") {
        if (!extraId) {
          this.setState({ columnIndex: record });
        }
      }
    } else {
      const payload = {
        type: "PR",
        listType: "",
        hasOperate: false,
        url: "/api/bs/hrmsalary/salaryacct/acctresult/list",
        queryParams: {
          salaryAcctRecordId,
          employeeName: this.state.searchValue
        }
      };
      type && childFrameObj.contentWindow.postMessage(JSON.stringify(payload), "*");
    }
  };

  handleSearch = (employeeName) => {
    const childFrameObj = document.getElementById("atdTable");
    const salaryAcctRecordId = getQueryString("id");
    const payload = {
      type: "PR",
      listType: "",
      hasOperate: false,
      url: "/api/bs/hrmsalary/salaryacct/acctresult/list",
      queryParams: {
        salaryAcctRecordId,
        employeeName
      }
    };
    childFrameObj.contentWindow.postMessage(JSON.stringify(payload), "*");
  };

  handleMenuClick = ({ key }) => {
    if (key === "3") {
      const { calculateStore: { exportAll } } = this.props;
      const { selectedRowKeys } = this.state;
      if (selectedRowKeys.length === 0) {
        message.warning("未选择条目");
        return;
      }
      exportAll(this.id, selectedRowKeys.join(","));
    } else if (key === "4") {
      this.getExportField();
    }
  };

  getExportField = () => {
    getExportField({ salaryAcctRecordId: getQueryString("id") }).then(({ status, data }) => {
      if (status) {
        const { checkItems, itemsByGroup } = data;
        this.setState({
          customExportParams: {
            visible: true,
            checkItems, itemsByGroup
          }
        });
      }
    });
  };

  handleExportAll = () => {
    const { calculateStore: { exportAll } } = this.props;
    exportAll(this.id);
  };

  render() {
    const { calculateStore } = this.props;
    const { baseSalarySobCycle, columnDescList } = calculateStore;
    const { slideVisiable, columnIndex, customExportParams } = this.state;

    const menu = (
      <Menu onClick={(e) => this.handleMenuClick(e)}>
        <Menu.Item key="3">导出所选</Menu.Item>
        <Menu.Item key="4">{getLabel(111, "自定义导出")}</Menu.Item>
      </Menu>
    );

    const renderRightOperation = () => {
      return (
        <div style={{ display: "inline-block" }}>
          <Dropdown.Button type="primary" style={{ marginRight: "10px" }} onClick={() => {
            this.handleExportAll();
          }} overlay={menu}>导出全部</Dropdown.Button>
          <WeaInputSearch placeholder="请输入姓名" onChange={(value) => {
            this.setState({ searchValue: value });
          }} value={this.state.searchValue} onSearch={(value) => {
            this.handleSearch(value);
          }}/>
        </div>
      );
    };

    return (
      <div className="placeOnFileDetail">
        <CustomTab
          searchOperationItem={
            renderRightOperation()
          }
        />
        <div className="tabWrapper" style={{ borderBottom: "none" }}>
          <span style={{ marginRight: 10 }}>薪资所属月：{baseSalarySobCycle.salaryMonth}</span>
          <WeaHelpfulTip
            width={100}
            title={`薪资周期\n
                        ${baseSalarySobCycle.salaryCycle && baseSalarySobCycle.salaryCycle.fromDate}至${baseSalarySobCycle.salaryCycle && baseSalarySobCycle.salaryCycle.endDate}\n
                        税款所属期\n
                        ${baseSalarySobCycle.taxCycle}\n
                        考勤取值周期\n
                        ${baseSalarySobCycle.attendCycle && baseSalarySobCycle.attendCycle.fromDate}至${baseSalarySobCycle.attendCycle && baseSalarySobCycle.attendCycle.endDate}\n
                        福利台账月份\n
                        引用${baseSalarySobCycle.socialSecurityCycle}的福利台账数据`}
            placement="topLeft"
          />
        </div>
        <div className="tabWrapper">
          <span>公式=</span>
          <span>{toJS(columnDescList)[columnIndex] && toJS(columnDescList)[columnIndex].formulaContent}</span>
        </div>
        <div className="tableWrapper">
          <iframe
            style={{ border: 0, width: "100%", height: "100%" }}
            // src="http://localhost:7607/#/atdTable"
            src="/spa/hrmSalary/hrmSalaryCalculateDetail/index.html#/atdTable"
            id="atdTable"
          />
        </div>
        <CustomExportDialog
          {...customExportParams}
          searchItemsValue={{ employeeName: this.state.searchValue }}
          onCancel={() => {
            this.setState({
              customExportParams: {
                visible: false, checkItems: [], itemsByGroup: []
              }
            });
          }}
        />
        {
          slideVisiable &&
          <WeaSlideModal
            visible={slideVisiable}
            top={0}
            width={40}
            height={100}
            direction={"right"}
            measure={"%"}
            title={
              <SlideModalTitle
                subtitle={"合并计税详情"}
                editable={true}
              />
            }
            content={(<FileMergeDetail/>)}
            onClose={() => this.setState({ slideVisiable: false })}
            showMask={true}
            closeMaskOnClick={() => this.setState({ slideVisiable: false })}/>
        }
      </div>
    );
  }
}