import React from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { getQueryString } from "../../util/url";
import { WeaDialog, WeaError, WeaInput, WeaLocaleProvider } from "ecCom";
import { Button, message, Modal } from "antd";
import Authority from "../mySalary/authority";
import "../payroll/templatePreview/index.less";
import * as API from "../../apis/mySalaryBenefits";
import { salaryBillGetToken } from "../../apis/mySalaryBenefits";
import { confirmSalaryBill, feedBackSalaryBill, payrollCheckType } from "../../apis/payroll";
import CaptchaModal from "../../components/captchaModal";
import PassSetDialog from "./passSetDialog";
import { ConfirmBtns } from "../mySalary/mySalaryView";
import Content from "../../components/pcTemplate/content";
import MobileTemplate from "../../components/mobileTemplate";
import "../mySalary/index.less";

const getLabel = WeaLocaleProvider.getLabel;

@inject("mySalaryStore")
@observer
export default class MobilePayroll extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pwdSetVisible: false,
      visible: false,
      captchaVisible: false,
      authCode: "",
      notSetting: false,
      mySalaryBillData: {
        employeeInformation: {},
        salaryTemplate: []
      },
      salaryBillToken: {}
    };
    this.id = "";
  }

  async componentWillMount() {
    const type = getQueryString("type");
    this.id = getQueryString("id");
    const { mySalaryStore: { init } } = this.props;
    if (type !== "phone") {
      const { data, status } = await payrollCheckType();
      if (status && data === "PWD") {
        init(false, () => this.getMySalaryBill(this.id));
      } else {
        this.setState({ captchaVisible: true });
      }
    }
    type === "phone" && await this.initMobile();
  }

  initMobile = async () => {
    const { mySalaryStore: { setInitEmVerify } } = this.props;
    if (window.em) {
      API.isNeedSecondPwdVerify({ mouldCode: "HRM", itemCode: "SALARY" }, this.state.salaryBillToken)
        .then(({ status, isNeedSecondAuth }) => {
          if (status && isNeedSecondAuth) {
            this.setState({ visible: true }, () => {
              API.getSecondAuthForm({ mouldCode: "HRM", itemCode: "SALARY" }, this.state.salaryBillToken)
                .then(({ status, notSetting }) => {
                  this.setState({ notSetting });
                });
            });
          } else {
            this.getMySalaryBill(getQueryString("id"));
            setInitEmVerify();
          }
        });
    } else {
      const params = this.getUrlkey();
      const { data } = await salaryBillGetToken({ uid: _.pick(params, ["recipient"]).recipient });
      this.setState({ salaryBillToken: data }, () => {
        API.isNeedSecondPwdVerify({ mouldCode: "HRM", itemCode: "SALARY" }, this.state.salaryBillToken)
          .then(({ status, isNeedSecondAuth }) => {
            if (status && isNeedSecondAuth) {
              this.setState({ visible: true }, () => {
                API.getSecondAuthForm({ mouldCode: "HRM", itemCode: "SALARY" }, this.state.salaryBillToken)
                  .then(({ status, notSetting }) => {
                    this.setState({ notSetting });
                  });
              });
            } else {
              this.getMySalaryBill(getQueryString("id"));
              setInitEmVerify();
            }
          });
      });
    }
  };
  doSecondAuth = () => {
    const { salaryBillToken } = this.state;
    const { mySalaryStore: { setInitEmVerify } } = this.props;
    if (!this.state.authCode) {
      this.refs.weaError.showError();
      return;
    }
    API.doSecondAuth({
      authCode: this.state.authCode, mouldCode: "HRM", itemCode: "SALARY"
    }, salaryBillToken).then(({ status, checkStatus, checkMsg }) => {
      if (status && checkStatus === "1") {
        message.success(checkMsg);
        setInitEmVerify();
        this.setState({ visible: false });
        this.getMySalaryBill(getQueryString("id"));
      } else {
        message.error(checkMsg);
      }
    });
  };
  getMySalaryBill = (salaryInfoId) => {
    const { salaryBillToken } = this.state;
    const { mySalaryStore: { getMySalaryBill } } = this.props;
    const params = this.getUrlkey();
    const payload = {
      salaryInfoId, header: salaryBillToken,
      ..._.pick(params, ["recipient"])
    };
    getMySalaryBill(payload).then(result => {
      this.setState({
        mySalaryBillData: result
      });
    });
  };
  getUrlkey = () => {
    let url = window.location.href;
    let params = {},
      arr = url.split("?");
    if (arr.length <= 1)
      return params;
    arr = arr[1].split("&");
    for (var i = 0, l = arr.length; i < l; i++) {
      var a = arr[i].split("=");
      params[a[0]] = a[1];
    }
    return params;
  };
  confirmSalaryBill = () => {
    confirmSalaryBill({ salaryInfoId: getQueryString("id") }).then(({ status, errormsg }) => {
      if (status) {
        message.success(getLabel(30700, "操作成功"));
        this.getMySalaryBill(getQueryString("id"));
      } else {
        message.error(errormsg || getLabel(30651, "操作失败"));
      }
    });
  };
  handleGoFeedback = () => {
    Modal.confirm({
      title: getLabel(131329, "信息确认"),
      content: getLabel(111, "请确认薪资信息是有误，进行反馈并发起反馈流程。"),
      onOk: () => {
        const { salaryBillToken } = this.state;
        feedBackSalaryBill({ salaryInfoId: getQueryString("id"), header: salaryBillToken })
          .then(({ status, errorMsg }) => {
            if (status) {
              const { mySalaryBillData } = this.state;
              const { salaryTemplate } = mySalaryBillData;
              const { feedbackUrl, mobileFeedbackUrl } = salaryTemplate;
              this.getMySalaryBill(getQueryString("id"));
              window.location.href = `${window.ecologyContentPath || ""}${getQueryString("type") === "phone" ? mobileFeedbackUrl : feedbackUrl}`;
              // window.open(`${window.ecologyContentPath || ""}${feedbackUrl}`);
            } else {
              message.error(errorMsg);
            }
          });
      }
    });
  };

  render() {
    const { mySalaryStore: { clearLoading, pwdForm } } = this.props;
    const { mySalaryBillData, visible, captchaVisible, notSetting, pwdSetVisible } = this.state;
    const type = getQueryString("type");
    if (_.isEmpty(toJS(this.props.mySalaryStore.mySalaryBill))) return <div>
      <WeaDialog
        onCancel={() => this.setState({ visible: false }, () => clearLoading())}
        title="请输入二次验证密码" visible={visible} initLoadCss
        className="verifyWrapper"
        hasScroll buttons={[
        <Button type="primary" size="small" onClick={this.doSecondAuth}>确定</Button>
      ]}
      >
        <WeaError tipPosition="bottom" ref="weaError" error="此项必填">
          <WeaInput value={this.state.authCode} type="password" viewAttr={3}
                    onChange={authCode => this.setState({ authCode })}/>
        </WeaError>
        {
          notSetting &&
          <div style={{ clear: "both", paddingTop: 10 }}>
            {getLabel("514970", "您还未设置二次验证密码，点击")}
            <a href="javascript:void(0);"
               onClick={() => this.setState({ pwdSetVisible: true })}>{getLabel("30747", "设置")}</a>
          </div>
        }
      </WeaDialog>
      <PassSetDialog form={pwdForm} visible={pwdSetVisible} onCancel={() => this.setState({ pwdSetVisible: false })}/>
    </div>;
    const {
      salaryTemplate, salaryGroups, employeeInformation,
      sendTime, confirmStatus
    } = toJS(this.props.mySalaryStore.mySalaryBill);
    const salaryProps = {
      theme: salaryTemplate.theme, tip: salaryTemplate.textContent, sendTime,
      background: salaryTemplate.background, tipPosi: salaryTemplate.textContentPosition || "",
      itemTypeList: [employeeInformation, ...salaryGroups]
    };
    return (
      <React.Fragment>
        {
          type === "phone" ?
            <Authority ecId={`${this && this.props && this.props.ecId || ""}_Authority@lulowc`}
                       store={this.props.mySalaryStore}>
              <MobileTemplate {...salaryProps} title={getLabel(111, "工资单查看")}>
                {
                  (_.isNil(confirmStatus) || confirmStatus === "0") &&
                  <ConfirmBtns
                    confirmSalaryBill={this.confirmSalaryBill}
                    goFeedback={this.handleGoFeedback}
                  />
                }
              </MobileTemplate>
            </Authority>
            :
            <Authority ecId={`${this && this.props && this.props.ecId || ""}_Authority@lulowc`}
                       store={this.props.mySalaryStore}>
              <div className="weapp-salary-my-salary-view-payroll">
                <Content {...salaryProps}>
                  {
                    (_.isNil(confirmStatus) || confirmStatus === "0") &&
                    <ConfirmBtns
                      confirmSalaryBill={this.confirmSalaryBill}
                      goFeedback={this.handleGoFeedback}
                    />
                  }
                </Content>
              </div>
            </Authority>
        }
        <CaptchaModal
          visible={captchaVisible} id={getQueryString("id")}
          onCancel={() => this.setState({ captchaVisible: false })}
          onConfirm={() => this.props.mySalaryStore.setInitEmVerify()}
        />
      </React.Fragment>
    );
  }
}