import React from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { WeaHelpfulTip, WeaTab, WeaTop } from "ecCom";
import { Button, Menu } from "antd";
import "./index.less";
import { getQueryString } from "../../../util/url";
import { getSearchs } from "../../../util";
import CustomPaginationTable from "../../../components/customPaginationTable";

@inject("payrollStore")
@observer
export default class PayrollDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentId: "",
      current: 1
    };
    this.pageInfo = { current: 1, pageSize: 10 };
  }

  componentWillMount() {
    let id = getQueryString("id");
    this.setState({ currentId: id });
    const { payrollStore: { getPayrollInfo, getPayrollDetailList, getPayrollDetailSa } } = this.props;
    getPayrollInfo(id);
    getPayrollDetailList({ salarySendId: id });
    getPayrollDetailSa();
  }

  // 撤回
  handleWithdraw(record) {
    const { payrollStore } = this.props;
    const { withdrawPayroll, getInfoList } = payrollStore;
    withdrawPayroll({
      ids: [record.id],
      salarySendId: this.state.currentId
    }).then(() => {
      getInfoList({
        salarySendId: this.state.currentId
      });
    });
  }

  // 发送
  handleGrant(record) {
    const { payrollStore } = this.props;
    const { grantPayroll, getInfoList } = payrollStore;
    grantPayroll({
      ids: [record.id],
      salarySendId: this.state.currentId
    }).then(() => {
      getInfoList({
        salarySendId: this.state.currentId
      });
    });
  }

  getColumns() {
    const { payrollStore } = this.props;
    const { salarySendDetailTableStore } = payrollStore;
    const { columns } = salarySendDetailTableStore;
    if (!columns) {
      return [];
    }
    let result = columns.filter(item => item.hide == "false").map(item => {
      item = { ...item };
      if (item.dataIndex == "operation") {
        item.render = (text, record) => {
          if (text == "ALREADYSEND") {
            return (
              <a onClick={() => {
                this.handleWithdraw(record);
              }}>撤回</a>
            );
          } else {
            return (
              <a onClick={() => {
                this.handleGrant(record);
              }}>发送</a>
            );
          }
        };
      }
      return item;
    });
    return result;
  }

  // 导出所选
  handleExportSelected() {

  }

  // 导出全部
  handleExportAll = () => {
    // const { payrollStore } = this.props;
    // const { exportDetailList } = payrollStore
    // exportDetailList({salarySendId: this.state.currentId})
    const url = `${window.location.origin}/api/bs/hrmsalary/salaryBill/send/exportDetailList?salarySendId=${this.state.currentId}`;
    window.open(url, "_self");
  };

  getSearchsAdQuick() {
    const handleMenuClick = (e) => {
      switch (e.key) {
        case "1":
          this.handleExportSelected();
          break;
      }
    };
    const menu = (
      <Menu onClick={handleMenuClick}>
        <Menu.Item key="1">导出所选</Menu.Item>
      </Menu>
    );
    return (
      // <Dropdown.Button type="primary" style={{marginRight: "10px"}} overlay={menu} onClick={() => {this.handleExportAll()}}>导出全部</Dropdown.Button>
      <Button type="primary" onClick={this.handleExportAll}>导出全部</Button>
    );
    // return (<div></div>)
  }


  // 分页
  handleDataPageChange(value) {
    const { payrollStore: { getPayrollInfo, getPayrollDetailList, getPayrollDetailSa } } = this.props;
    getPayrollDetailList({ salarySendId: this.state.currentId, ...this.pageInfo });
  }


  handleShowSizeChange(pageInfo) {
    const { payrollStore: { getPayrollInfo, getPayrollDetailList, getPayrollDetailSa } } = this.props;
    getPayrollDetailList({ salarySendId: this.state.currentId, ...pageInfo });
  }

  handleSearch=()=> {
    const { payrollStore: { getPayrollDetailList, setDetailListShowSearchAd } } = this.props;
    setDetailListShowSearchAd(false);
    getPayrollDetailList({ salarySendId: this.state.currentId, ...this.pageInfo });
  }

  render() {
    const { payrollStore } = this.props;
    const {
      setDetailListShowSearchAd,
      detailListShowSearchAd,
      getPayrollDetailList,
      detailListCondition,
      detailListConditionForm,
      salarySendDetailBaseInfo,
      salarySendDetailTableStore,
      salarySendDetailDataSource,
      salarySendDetailPageInfo
    } = payrollStore;
    const adBtn = [
      // 高级搜索内部按钮
      <Button type="primary" onClick={()=>this.handleSearch()}>
        搜索
      </Button>,
      <Button type="ghost" onClick={() => detailListConditionForm.resetForm()}>
        重置
      </Button>,
      <Button type="ghost" onClick={() => setDetailListShowSearchAd(false)}>
        取消
      </Button>
    ];
    return (
      <div className="payrollGrant">
        <WeaTop
          title="工资单发放" // 文字
          icon={<i className="icon-coms-fa"/>} // 左侧图标
          iconBgcolor="#F14A2D" // 左侧图标背景色
          showDropIcon={true} // 是否显示下拉按钮
          buttons={[this.getSearchsAdQuick()]}
        ></WeaTop>
        <WeaTab
          searchType={["base", "advanced"]} // base：基础搜索框 advanced：显示高级搜索按钮
          searchsBasePlaceHolder="请输入姓名"
          showSearchAd={detailListShowSearchAd} // 是否展开高级搜索面板
          setShowSearchAd={bool => setDetailListShowSearchAd(bool)} //高级搜索面板受控
          searchsAd={getSearchs(detailListConditionForm, toJS(detailListCondition), 2)} // 高级搜索内部数据
          buttonsAd={adBtn} // 高级搜索内部按钮
          onSearch={() => {
            this.handleSearch();
          }} // 点搜索按钮时的回调
          // searchsAdQuick={this.getSearchsAdQuick()}
          onSearchChange={v => detailListConditionForm.updateFields({ username: v })} // 在搜索框中输入的文字改变时的回调: 这里需要同步高级搜索和外部搜索框的值
          searchsBaseValue={detailListConditionForm.getFormParams().username} // 外部input搜索值受控: 这里和高级搜索的requestname同步
        />
        <div className="titleBar">
          <div className="titleBarLeft">
            <span>薪资所属月：{salarySendDetailBaseInfo.salaryMonth && salarySendDetailBaseInfo.salaryMonth.year}-{salarySendDetailBaseInfo.salaryMonth && salarySendDetailBaseInfo.salaryMonth.monthValue}</span>
            <WeaHelpfulTip
              style={{ marginLeft: "10px", marginRight: "10px" }}
              width={200}
              title={`薪资周期\n
                            ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle.fromDate}至 ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle && salarySendDetailBaseInfo.salarySobCycle.salaryCycle.endDate}\n
                            税款所属期\n
                            ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.taxCycle}\n
                            考勤取值周期\n
                            ${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle.fromDate}至${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle && salarySendDetailBaseInfo.salarySobCycle.attendCycle.endDate}\n
                            福利台账月份\n
                            引用${salarySendDetailBaseInfo.salarySobCycle && salarySendDetailBaseInfo.salarySobCycle.socialSecurityCycle}的福利台账数据`}
              placement="topLeft"
            />
            <span>工资单模板：{salarySendDetailBaseInfo.template}</span>
          </div>

          <div className="titleBarRight">
            <span>已发放：{salarySendDetailBaseInfo.sendNum}/<span
              style={{ color: "red" }}>{salarySendDetailBaseInfo.sendTotal}</span></span>
          </div>
        </div>

        <div className="tableWrapper">

          <CustomPaginationTable
            dataSource={salarySendDetailDataSource}
            columns={this.getColumns()}
            scroll={{ x: this.getColumns().length * 150 }}
            total={salarySendDetailPageInfo.total}
            current={salarySendDetailPageInfo.pageNum}
            pageSize={this.pageInfo.pageSize}
            onPageChange={(value) => {
              this.pageInfo.current = value;
              this.handleDataPageChange(value);
            }}
            onShowSizeChange={(current, pageSize) => {
              this.pageInfo = { current, pageSize };
              this.handleShowSizeChange(this.pageInfo);
            }}
          />
        </div>
      </div>
    );
  }
}