import React from "react";
import { inject, observer } from "mobx-react";
import { getQueryString } from "../../util/url";
import { WeaDialog, WeaError, WeaInput, WeaLocaleProvider } from "ecCom";
import { Button, message, Modal } from "antd";
import Authority from "../mySalary/authority";
import ComputerTemplate from "../payroll/templatePreview/computerTemplate";
import PhoneTemplate from "../payroll/templatePreview/phoneTemplate";
import "../payroll/templatePreview/index.less";
import * as API 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 "./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: []
      }
    };
    this.id = "";
  }

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

  initMobile = () => {
    const { mySalaryStore: { setInitEmVerify } } = this.props;
    // if (window.em) {
    API.isNeedSecondPwdVerify({ mouldCode: "HRM", itemCode: "SALARY" }).then(({ status, isNeedSecondAuth }) => {
      if (status && isNeedSecondAuth) {
        this.setState({ visible: true }, () => {
          API.getSecondAuthForm({ mouldCode: "HRM", itemCode: "SALARY" }).then(({ status, notSetting }) => {
            this.setState({ notSetting });
          });
        });
      } else {
        this.getMySalaryBill(getQueryString("id"));
        setInitEmVerify();
      }
    });
    // } else {
    //   setInitEmVerify();
    // }
  };
  doSecondAuth = () => {
    const { mySalaryStore: { setInitEmVerify } } = this.props;
    if (!this.state.authCode) {
      this.refs.weaError.showError();
      return;
    }
    API.doSecondAuth({
      authCode: this.state.authCode, mouldCode: "HRM", itemCode: "SALARY"
    }).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 { mySalaryStore: { getMySalaryBill } } = this.props;
    const params = this.getUrlkey();
    const payload = {
      salaryInfoId,
      ..._.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: () => {
        feedBackSalaryBill({ salaryInfoId: getQueryString("id") }).then(({ status, errorMsg }) => {
          if (status) {
            const { mySalaryBillData } = this.state;
            const { salaryTemplate } = mySalaryBillData;
            const { feedbackUrl } = salaryTemplate;
            this.getMySalaryBill(getQueryString("id"));
            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");
    const employeeInformation = mySalaryBillData.employeeInformation ? mySalaryBillData.employeeInformation : {};
    const salaryGroups = mySalaryBillData.salaryGroups ? mySalaryBillData.salaryGroups : [];
    return (
      <div className="computerTemplate" style={{
        height: "100%",
        overflowY: "hidden",
        paddingBottom: "20px"
      }}>
        <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} 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 })}/>
        {
          type === "phone" ?
            <Authority ecId={`${this && this.props && this.props.ecId || ""}_Authority@lulowc`}
                       store={this.props.mySalaryStore}>
              <div className="templatePreview">
                <div className="contentWrapper">
                  <PhoneTemplate
                    isPreview
                    salaryTemplateShowSet={JSON.stringify(mySalaryBillData.salaryTemplate)}
                    salaryItemSet={!_.isEmpty(salaryGroups) ? JSON.stringify([employeeInformation, ...salaryGroups]) : []}
                  >
                    {
                      (!_.isEmpty(salaryGroups) && (_.isNil(mySalaryBillData.confirmStatus) || mySalaryBillData.confirmStatus === "0")) &&
                      <ConfirmBtns
                        confirmSalaryBill={this.confirmSalaryBill}
                        goFeedback={this.handleGoFeedback}
                      />
                    }
                  </PhoneTemplate>
                </div>
              </div>
            </Authority>
            :
            <Authority ecId={`${this && this.props && this.props.ecId || ""}_Authority@lulowc`}
                       store={this.props.mySalaryStore}>
              <div className="templatePreview">
                <div className="contentWrapper">
                  <ComputerTemplate
                    isPreview
                    salaryTemplateShowSet={JSON.stringify(mySalaryBillData.salaryTemplate)}
                    salaryItemSet={!_.isEmpty(salaryGroups) ? JSON.stringify([employeeInformation, ...salaryGroups]) : JSON.stringify([])}
                  >
                    {
                      (!_.isEmpty(salaryGroups) && (_.isNil(mySalaryBillData.confirmStatus) || mySalaryBillData.confirmStatus === "0")) &&
                      <ConfirmBtns
                        confirmSalaryBill={this.confirmSalaryBill}
                        goFeedback={this.handleGoFeedback}
                      />
                    }
                  </ComputerTemplate>
                </div>
              </div>
            </Authority>
        }
        <CaptchaModal
          visible={captchaVisible} id={getQueryString("id")}
          onCancel={() => this.setState({ captchaVisible: false })}
          onConfirm={() => this.props.mySalaryStore.setInitEmVerify()}
        />
      </div>
    );
  }
}