import React from "react";
import { inject, observer } from "mobx-react";
import { Button, DatePicker, Dropdown, Menu, message, Modal, Tag } from "antd";
import { WeaInputSearch, WeaLocaleProvider, WeaNewScroll, WeaTop } from "ecCom";
import { renderNoright } from "../../util";
import CustomTab from "../../components/customTab";
import moment from "moment";
import BaseFormModal from "./baseFormModal";
import CustomPaginationTable from "../../components/customPaginationTable";
import ProgressModal from "../../components/progressModal";
import "./index.less";

const { getLabel } = WeaLocaleProvider;
const MonthPicker = DatePicker.MonthPicker;

@inject("calculateStore", "taxAgentStore")
@observer
export default class Calculate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      progressVisible: false,
      progress: 0,
      value: "",
      selectedKey: "0",
      searchValue: "",
      startDate: moment(new Date()).startOf("year").format("YYYY-MM"),
      endDate: moment(new Date()).startOf("month").format("YYYY-MM"),
      current: 1
    };
    this.pageInfo = { current: 1, pageSize: 10 };
  }

  componentWillMount() {
    const { calculateStore } = this.props;
    const { getSalaryAcctList } = calculateStore;
    getSalaryAcctList({
      name: "",
      startMonthStr: this.state.startDate,
      endMonthStr: this.state.endDate
    });
  }

  // 搜索
  handleSearch = (value, extra = {}) => {
    const { calculateStore } = this.props;
    const { getSalaryAcctList } = calculateStore;
    getSalaryAcctList({
      name: value,
      startMonthStr: this.state.startDate,
      endMonthStr: this.state.endDate,
      current: this.state.current,
      ...extra
    });
  };

  handleRangePickerChange(type, value) {
    const { calculateStore: { getSalaryAcctList } } = this.props;
    this.setState({
      [type]: value ? moment(value).format("YYYY-MM") : moment().format("YYYY-MM")
    }, () => {
      const { startDate: startMonthStr, endDate: endMonthStr } = this.state;
      getSalaryAcctList({
        name: this.state.searchValue,
        startMonthStr,
        endMonthStr
      });
    });
  }

  // 列表项核算回调
  handleAccount(record) {
    window.open(
      "/spa/hrmSalary/static/index.html#/main/hrmSalary/calculateDetail?id=" +
      record.id
    );
  }

  // 列表项删除回调
  handleDeleteItem(record) {
    Modal.confirm({
      title: "信息确认",
      content: "确认删除本条数据吗?",
      onOk: () => {
        const { calculateStore: { deleteSalaryacct } } = this.props;
        deleteSalaryacct([record.id]).then(() => {
          this.handleSearch(this.state.searchValue);
        });
      },
      onCancel: () => {
      }
    });
  }

  // 列表项归档回调
  handleFile(record) {
    const { calculateStore: { fileSalaryAcct } } = this.props;
    this.setState({
      progressVisible: true
    }, () => {
      this.timer = setInterval(() => {
        if (this.state.progress !== 100) {
          this.setState({
            progress: this.state.progress + 1
          });
        } else {
          clearInterval(this.timer);
          this.setState({
            progressVisible: false,
            progress: 0
          }, () => {
            message.success("归档成功");
            this.handleSearch(this.state.searchValue);
          });
        }
      }, 800);
    });
    fileSalaryAcct(record.id).then(() => {
      clearInterval(this.timer);
      this.setState({
        progressVisible: false,
        progress: 0
      }, () => {
        message.success("归档成功");
        this.handleSearch(this.state.searchValue);
      });
    }).catch(() => {
      clearInterval(this.timer);
      this.setState({
        progressVisible: false,
        progress: 0
      });
    });
  }

  // 重新核算
  handleReaccount(record) {
    const { calculateStore: { reAccounting } } = this.props;
    reAccounting(record.id).then(() => {
      this.handleSearch(this.state.searchValue);
    });
  }

  // 回算
  handleBackCalculate = (record) => {
    Modal.confirm({
      title: "信息确认",
      content: "确定回算吗？\n 回算后，正常核算的数据会被覆盖，正常核算的工资单不能继续发放或撤回！",
      onOk: () => {
        const { calculateStore: { backCalculate } } = this.props;
        backCalculate(record.id).then(() => {
          this.handleSearch(this.state.searchValue);
        });
      }
    });
  };

  // 查看详情回调
  handleDetail(record) {
    window.open(
      "/spa/hrmSalary/static/index.html#/main/hrmSalary/placeOnFileDetail?id=" +
      record.id
    );
  }

  // 获取列表
  getColumns = () => {
    const {
      calculateStore: { salaryListColumns },
      taxAgentStore: { showOperateBtn }
    } = this.props;
    let columns = [...salaryListColumns].filter(item => item.dataIndex !== "backCalcStatus" && item.dataIndex !== "acctTimes");
    columns.map(item => {
      if (item.dataIndex === "salarySobName") {
        item.width = 300;
        item.render = (text, record) => {
          return <div className="salarySobNameWrapper">
            <span>{text}</span>
            <div className="salarySobNameTagWrapper">
              {
                record.backCalcStatus === 1 &&
                <i className="icon-coms-Refresh" title="回算"/>
              }
              <Tag color="blue">{`第${record.acctTimes}次`}</Tag>
            </div>
          </div>;
        };
      }
      if (item.dataIndex === "operate" && showOperateBtn) {
        item.width = 150;
        item.render = (text, record) => {
          const accountBtn = _.take(record.operate, 2);
          const notAccountBtn = _.drop(record.operate, 2);
          let operateBtn = [];
          if (!_.isEmpty(accountBtn)) {
            operateBtn.push(
              _.map(accountBtn, (it, idx) => {
                return (
                  <div
                    className="linkWapper"
                    key={idx}
                    style={{ display: "inline-block", marginRight: 8 }}>
                    <a
                      href="javascript:void(0);"
                      style={(idx === 1 && it.text.length === 2) ? { padding: "0 12px" } : {}}
                      onClick={() => this.handleOperateClick(it.index, record)}>
                      {it.text}
                    </a>
                  </div>
                );
              })
            );
          }
          if (!_.isEmpty(notAccountBtn)) {
            operateBtn.push(
              <Dropdown
                overlay={
                  <Menu>
                    {notAccountBtn.map(cz =>
                      <Menu.Item>
                        <a
                          onClick={() => this.handleOperateClick(cz.index, record)}>
                          {cz.text}
                        </a>
                      </Menu.Item>
                    )}
                  </Menu>
                }>
                <a href="javascript:void(0);"><i className="icon-coms-more"/></a>
              </Dropdown>
            );
          }
          return operateBtn;
        };
      }
    });
    return showOperateBtn ? columns : _.filter(columns, it => it.title !== "操作");
  };

  handleOperateClick = (index, record) => {
    if (index === "0") {
      this.handleAccount(record);
    } else if (index === "1") {
      this.handleDeleteItem(record);
    } else if (index === "2") {
      this.handleFile(record);
    } else if (index === "4") {
      this.handleReaccount(record);
    } else if (index === "3") {
      this.handleDetail(record);
    } else if (index === "5") {
      this.handleBackCalculate(record);
    }
  };

  // 分页
  handleDataPageChange(value) {
    this.setState({ current: value });
    this.pageInfo.current = value;
    const { calculateStore } = this.props;
    const { getSalaryAcctList } = calculateStore;
    getSalaryAcctList({
      name: this.state.searchValue,
      startMonthStr: this.state.startDate,
      endMonthStr: this.state.endDate,
      current: value
    });
  }

  handleShowSizeChange(pageInfo) {
    const { calculateStore } = this.props;
    const { getSalaryAcctList } = calculateStore;
    getSalaryAcctList({
      name: this.state.searchValue,
      startMonthStr: this.state.startDate,
      endMonthStr: this.state.endDate,
      ...pageInfo
    });
  }

  render() {
    const { calculateStore, taxAgentStore: { showOperateBtn } } = this.props;
    const { salaryListDataSource, loading, hasRight, salaryListPageInfo } = calculateStore;
    const { modalParam } = this.state;
    if (!hasRight && !loading) {
      // 无权限处理
      return renderNoright();
    }

    const renderRightOperation = () => {
      const { startDate, endDate } = this.state;
      return (
        <div style={{ display: "inline-block" }}>
          {showOperateBtn &&
            <Button
              type="primary"
              style={{ marginRight: "10px" }}
              //  onClick={() => window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/calculateDetail")}
              onClick={() => {
                this.setState({ baseFormVisible: true });
              }}>
              核算
            </Button>}
          <div
            style={{ display: "inline-block", position: "relative", top: 2 }}>
            <MonthPicker
              value={startDate}
              format="YYYY-MM"
              disabledDate={(current) => {
                return current && endDate && current.getTime() > new Date(endDate).getTime();
              }}
              onChange={(val) => this.handleRangePickerChange("startDate", val)}
            />
            <span className="to" style={{ margin: "0 10px" }}>至</span>
            <MonthPicker
              value={endDate}
              format="YYYY-MM"
              disabledDate={(current) => {
                return current && startDate && current.getTime() < new Date(startDate).getTime();
              }}
              onChange={(val) => this.handleRangePickerChange("endDate", val)}
            />
          </div>
          <WeaInputSearch
            style={{ marginLeft: "10px" }}
            value={this.state.searchValue}
            placeholder={"请输入薪资账套名称"}
            onChange={value => {
              this.setState({ searchValue: value });
            }}
            onSearch={value => {
              this.handleSearch(value, { current: 1 });
            }}
          />
        </div>
      );
    };

    return (
      <div className="mySalaryBenefitsWrapper">
        {/* 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能 */}
        <WeaTop
          title="薪资核算"
          icon={<i className="icon-coms-fa"/>}
          iconBgcolor="#F14A2D"
          showDropIcon={false}>
          <CustomTab searchOperationItem={renderRightOperation()}/>
          <div className="tableWrapper">
            <WeaNewScroll height="100%">
              <CustomPaginationTable
                loading={loading}
                columns={this.getColumns()}
                dataSource={salaryListDataSource}
                total={salaryListPageInfo.total}
                current={salaryListPageInfo.pageNum}
                pageSize={this.pageInfo.pageSize}
                onPageChange={value => {
                  this.handleDataPageChange(value);
                }}
                onShowSizeChange={(current, pageSize) => {
                  this.pageInfo = { current, pageSize };
                  this.handleShowSizeChange(this.pageInfo);
                }}
              />
            </WeaNewScroll>
          </div>
        </WeaTop>
        {/*归档进度条*/}
        {
          this.state.progressVisible &&
          <ProgressModal
            title="正在归档请稍后"
            visible={this.state.progressVisible}
            onCancel={() => {
              this.setState({ progressVisible: false, progress: 0 });
            }}
            progress={this.state.progress}
          />
        }
        {this.state.baseFormVisible &&
          <BaseFormModal
            visible={this.state.baseFormVisible}
            onRefresh={() => this.handleSearch(this.state.searchValue)}
            onCancel={() => {
              this.setState({ baseFormVisible: false });
            }}
          />}
      </div>
    );
  }
}