import React from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { Button, DatePicker, message, Modal } from "antd";
import moment from "moment";
import {
  WeaHelpfulTip,
  WeaInputSearch,
  WeaLocaleProvider,
  WeaNewScroll,
  WeaSelect,
  WeaSlideModal,
  WeaTop
} from "ecCom";
import { renderLoading } from "../../util";
import CustomTab from "../../components/customTab";
import StepSlide from "../../components/stepSlide";
import BaseInformForm from "./stepForm/baseInformForm";
import ShowSettingForm from "./stepForm/showSettingForm";
import SlideModalTitle from "../../components/slideModalTitle";
import TemplateSettingList from "./templateSettingList";
import TemplateSettingForm from "./stepForm/tmplateSettingForm";
import TemplateBaseSettings from "./templateBaseSettings";
import CopyModal from "./copyModal";
import SalarySendList from "./SalarySendList";
import { getReplenishForm } from "../../apis/payroll";
import "../dataAcquisition/cumDeduct/index.less";

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

@inject("payrollStore", "taxAgentStore")
@observer
export default class Payroll extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      selectedKey: "0",
      currentStep: 0,
      stepSlideVisible: false,
      selectedTab: 0,
      editSlideVisible: false,
      initSelected: false,
      ledgerOptions: [],
      templateSearchValue: "", // 工资单模板列表-搜索条件-名称
      templateSelect: "", // 工资单模板列表-搜索条件-账套下拉选中值
      templateCurrentId: "",
      copyModalVisible: false,
      startDate: moment(new Date()).startOf("year").format("YYYY-MM"),
      endDate: moment(new Date()).startOf("month").format("YYYY-MM"),
      loading: false
    };
    this.recordId = "";
    this.salaryYearMonth = [moment(new Date()).startOf("year").format("YYYY-MM"), moment(new Date()).startOf("month").format("YYYY-MM")];
    this.listPageInfo = { current: 1, pageSize: 10 };
  }

  // 工资单模板-新建表单变化监听
  handleBaseInfoChange = (request) => {
    const { payrollStore: { setTemplateBaseData } } = this.props;
    setTemplateBaseData(request);
  };

  getReplenishForm = (isEdit = false, params = {}) => {
    const { payrollStore } = this.props;
    const {
      templateBaseData,
      salaryTemplateShowSet,
      setReplenishSalaryTemplateSalaryItemSet,
      setSalaryBillItemNameSet
    } = payrollStore;
    if (!salaryTemplateShowSet.theme && !isEdit) {
      Modal.warning({
        title: "信息确认",
        content: "必要信息不完整，红色*为必填项！"
      });
      return;
    }
    getReplenishForm({ salarySobId: templateBaseData.salarySob, ...params }).then(({ status, data }) => {
      if (status) {
        if (!isEdit) {
          this.setState({ currentStep: this.state.currentStep + 1 }, () => {
            setReplenishSalaryTemplateSalaryItemSet(data.replenishSalaryTemplateSalaryItemSet);
            setSalaryBillItemNameSet(data.salaryBillItemNameSet);
            window.localStorage.setItem("salary-showset", JSON.stringify(salaryTemplateShowSet));
          });
        } else {
          setReplenishSalaryTemplateSalaryItemSet(data.replenishSalaryTemplateSalaryItemSet);
          setSalaryBillItemNameSet(data.salaryBillItemNameSet);
          window.localStorage.setItem("salary-showset", JSON.stringify(salaryTemplateShowSet));
        }
      }
    });
  };
  // 新建保存
  handleSave = () => {
    const { payrollStore } = this.props;
    const { fetchSavePayroll } = payrollStore;
    fetchSavePayroll().then(() => {
      window.localStorage.removeItem("template-basedata");
      window.localStorage.removeItem("salary-showset");
      this.setState({ currentStep: 0, stepSlideVisible: false });
    });
  };

  componentWillMount() {
    const { payrollStore } = this.props;
    const { getPayrollTemplateLedgerList } = payrollStore;
    // 获取薪资账套下拉列表
    getPayrollTemplateLedgerList().then((options) => {
      this.setState({
        initSelected: true,
        ledgerOptions: [{ key: "", showname: "" }, ...options]
      });
    });
  }

  // 模板搜索
  handleTemplateSearch() {
    const { templateSearchValue, templateSelect } = this.state;
    let params = { name: templateSearchValue, salarySobId: templateSelect, current: 1 };
    const { payrollStore: { getPayrollTemplateList } } = this.props;
    getPayrollTemplateList(params);
  }

  // 模板选择框下拉改变事件
  handleTemplateSelectChange(value) {
    this.setState({ templateSelect: value }, () => {
      this.handleTemplateSearch();
    });
  }

  // 模板列表编辑
  handleTemplateListEdit(record) {
    const { payrollStore } = this.props;
    const { getPayrollShowForm } = payrollStore;
    this.recordId = record.id;
    getPayrollShowForm(record.id);
    this.setState({ templateCurrentId: record.id, selectedTab: 0 }, () => {
      this.setState({ editSlideVisible: true });
    });
  }

  // 模板列表复制
  handleTemplateListCopy(record) {
    this.setState({
      templateCurrentId: record.id
    }, () => {
      this.setState({
        copyModalVisible: true
      });
    });
  }

  // 复制模板保存事件监听
  handleCopyModalSave(value) {
    const { payrollStore } = this.props;
    const { duplicatePayroll } = payrollStore;
    duplicatePayroll(this.state.templateCurrentId, value).then(() => {
      this.setState({
        copyModalVisible: false
      });
    });
  }

  //  模板列表删除
  handleTemplateListDelete(record) {
    const { payrollStore: { deletePayroll } } = this.props;
    Modal.confirm({
      title: "信息确认",
      content: "确认删除",
      onOk: () => {
        deletePayroll([record.id]);
      }
    });
  }


  handleRangePickerChange(type, value) {
    const { payrollStore: { getPayrollList } } = this.props;
    this.setState({
      [type]: value ? moment(value).format("YYYY-MM") : moment().format("YYYY-MM")
    }, () => {
      const { startDate, endDate } = this.state;
      this.salaryYearMonth = [startDate, endDate];
      getPayrollList({ salaryYearMonth: [startDate, endDate], ...this.listPageInfo });
    });
  }

  // 预览
  handlePreview = () => {
    const { payrollStore: { templateBaseData, salaryTemplateShowSet, salaryItemSet } } = this.props;
    window.localStorage.setItem("template-basedata", JSON.stringify(templateBaseData));
    window.localStorage.setItem("salary-showset", JSON.stringify(salaryTemplateShowSet));
    window.localStorage.setItem("salaryItemSet", JSON.stringify(salaryItemSet));
    window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/templatePreview");
  };

  // 更新保存
  handleUpdateSave = () => {
    const { selectedTab } = this.state;
    const { payrollStore } = this.props;
    const { fetchUpdatePayroll } = payrollStore;
    if (selectedTab === 0) {
      if (!this.validateStep1()) {
        Modal.warning({
          title: "信息确认",
          content: "必要信息不完整，红色*为必填项！"
        });
        return;
      }
    } else if (selectedTab === 1) {
      const { salaryTemplateShowSet } = payrollStore;
      if (!salaryTemplateShowSet.theme) {
        Modal.warning({
          title: "信息确认",
          content: "必要信息不完整，红色*为必填项！"
        });
        return;
      }
    }


    fetchUpdatePayroll(this.recordId).then(() => {
      this.setState({
        editSlideVisible: false,
        selectedTab: 0
      }, () => {
        window.localStorage.removeItem("template-basedata");
        window.localStorage.removeItem("salary-showset");
      });
    });
  };

  // 发放页面页码跳转
  handleListDataPageChange(value, pageInfo) {
    const { payrollStore: { getPayrollList } } = this.props;
    this.listPageInfo = pageInfo;
    getPayrollList({ salaryYearMonth: this.salaryYearMonth, ...pageInfo });
  }

  // 发放页面每页条数
  handleListShowSizeChange(pageInfo) {
    const { payrollStore: { getPayrollList } } = this.props;
    this.listPageInfo = pageInfo;
    getPayrollList({ salaryYearMonth: this.salaryYearMonth, ...pageInfo });
  }

  validateStep1 = () => {
    const { payrollStore: { templateBaseData } } = this.props;
    const { reissueRule = "0" } = templateBaseData;
    const validList = reissueRule === "0" ? ["name", "replenishName", "salarySob"] : ["name", "replenishName", "salarySob", "replenishRule"];
    if (_.every(validList, it => !!templateBaseData[it])) {
      window.localStorage.setItem("template-basedata", JSON.stringify(templateBaseData));
    } else {
      window.localStorage.removeItem("template-basedata");
    }
    return _.every(validList, it => !!templateBaseData[it]);
  };

  render() {
    const { payrollStore, taxAgentStore: { showOperateBtn } } = this.props;
    const {
      loading,
      hasRight,
      templateTableSelectedRowKeys,
      setTemplateTableSelectedRowKeys,
      deletePayroll,
      templateBaseData,
      setTemplateTablePageInfo,
      setSalaryBillItemNameSetting,
      salaryBillItemNameSetting
    } = payrollStore;
    const { currentStep, selectedTab, templateSearchValue, templateSelect, startDate, endDate } = this.state;
    if (!hasRight && !loading) { // 无权限处理
      return renderLoading();
    }
    const topTab = [
      {
        title: "工资单发放",
        viewcondition: "0"
      },
      {
        title: "工资单模板设置",
        viewcondition: "1"
      },
      {
        title: getLabel(111, "工资单模板基础设置"),
        viewcondition: "2"
      }
    ];
    const renderRightOperation = () => {
      if (this.state.selectedKey === "0") {
        return <div style={{ display: "inline-block" }}>
          <WeaHelpfulTip
            width={200}
            title="提示：无工资单模板无法发放工资单，请先设置一个默认使用的工资单模板"
            placement="topLeft"
          />
          <div style={{ display: "inline-block", marginLeft: "10px" }}>
            <MonthPicker
              value={startDate}
              disabledDate={(current) => {
                return current && endDate && current.getTime() > new Date(endDate).getTime();
              }}
              format="YYYY-MM"
              onChange={(val) => this.handleRangePickerChange("startDate", val)}
            />
            <span className="to" style={{ margin: "0 10px" }}>至</span>
            <MonthPicker
              value={endDate}
              disabledDate={(current) => {
                return current && startDate && current.getTime() < new Date(startDate).getTime();
              }}
              getCalendarContainer={trigger => trigger.parentNode}
              format="YYYY-MM"
              onChange={(val) => this.handleRangePickerChange("endDate", val)}
            />
          </div>
        </div>;
      } else if (this.state.selectedKey === "1") {
        return (
          <div style={{ display: "inline-block" }}>
            {
              showOperateBtn &&
              <Button type="primary" onClick={() => {
                this.setState({ stepSlideVisible: true, currentStep: 0 });
              }}>新建</Button>
            }
            {
              showOperateBtn &&
              <Button
                style={{ marginLeft: 10 }}
                type="ghost"
                onClick={() => {
                  const selectedRowKeys = toJS(templateTableSelectedRowKeys);
                  if (!selectedRowKeys.length) {
                    message.info("未选中任何数据!");
                    return;
                  }
                  Modal.confirm({
                    title: "信息确认",
                    content: `确定要将所选的工资单模板（共${selectedRowKeys.length}条数据）删除吗？`,
                    onOk: () => {
                      deletePayroll(selectedRowKeys);
                    }
                  });
                }}
              >批量删除工资单模板</Button>
            }
            {
              this.state.initSelected && <WeaSelect options={this.state.ledgerOptions}
                                                    placeholder="请选择账套"
                                                    style={{ width: "200px", marginLeft: "10px", marginRight: "10px" }}
                                                    value={templateSelect} onChange={(value) => {
                this.handleTemplateSelectChange(value);
              }}/>
            }
            <WeaInputSearch style={{ marginleft: "10px" }} placeholder="请输入工资单名称" value={templateSearchValue}
                            onChange={(value) => {
                              this.setState({ templateSearchValue: value });
                            }}
                            onSearch={(value) => {
                              this.handleTemplateSearch(value);
                            }}
            />
          </div>
        );
      } else if (this.state.selectedKey === "2") {
        return <Button type="primary"
                       onClick={() => this.baseSetRef.salaryBillBaseSetSave()}
                       loading={this.state.loading}
        >{getLabel(111, "保存")}</Button>;
      }
    };
    const steps = ["基础设置", "正常核算工资单模板", "补发工资单模版"];
    const nextStep = () => {
      if (!this.validateStep1()) {
        Modal.warning({
          title: "信息确认",
          content: "必要信息不完整，红色*为必填项！"
        });
        return;
      }
      if (templateBaseData.replenishName === templateBaseData.name) {
        message.error("工资单模板名称和补发工资单模板名称不可相同");
        return;
      }
      this.setState({
        currentStep: this.state.currentStep + 1
      });
    };
    // 上一步
    const prevStep = () => {
      this.setState({
        currentStep: this.state.currentStep - 1
      });
    };

    return (
      <div className="payrollDistributionWrapper">
        <WeaTop
          title="工资单发放" // 文字
          icon={<i className="icon-coms-fa"/>} // 左侧图标
          iconBgcolor="#F14A2D" // 左侧图标背景色
          showDropIcon={false} // 是否显示下拉按钮
        >
          <CustomTab
            topTab={topTab}
            searchOperationItem={renderRightOperation()}
            onChange={(v) => {
              this.setState({
                selectedKey: v,
                stepSlideVisible: false,
                editSlideVisible: false
              }, () => {
                setTemplateTablePageInfo({ current: 1 });
                setTemplateTableSelectedRowKeys([]);
              });
            }}
          />
          <div className="tableWrapper">
            <WeaNewScroll height="100%">
              {
                this.state.selectedKey === "0" &&
                <SalarySendList
                  onEditTemplate={(record) => {
                    this.handleTemplateListEdit(record);
                  }}
                  salaryYearMonth={this.salaryYearMonth}
                  handleListDataPageChange={(value, pageInfo) => {
                    this.handleListDataPageChange(value, pageInfo);
                  }}
                  handleListShowSizeChange={(pageInfo) => {
                    this.handleListShowSizeChange(pageInfo);
                  }}
                />
              }

              {
                this.state.selectedKey === "1" &&
                <TemplateSettingList
                  onEdit={(record) => {
                    this.handleTemplateListEdit(record);
                  }}
                  onCopy={(record) => {
                    this.handleTemplateListCopy(record);
                  }}
                  showOperateBtn={showOperateBtn}
                  onDelete={(record) => this.handleTemplateListDelete(record)}
                />
              }
              {
                this.state.selectedKey === "2" &&
                <TemplateBaseSettings
                  ref={dom => this.baseSetRef = dom}
                  onChangeLoading={loading => this.setState({ loading })}
                />
              }
            </WeaNewScroll>
          </div>
        </WeaTop>
        {
          this.state.stepSlideVisible && <StepSlide
            visible={this.state.stepSlideVisible}
            currentStep={currentStep}
            steps={steps}
            onCancel={() => {
              window.localStorage.removeItem("template-basedata");
              window.localStorage.removeItem("salary-showset");
              this.setState({ stepSlideVisible: false });
            }}
            customOperate={
              currentStep === 0 ? [
                <Button type="primary" onClick={() => {
                  setSalaryBillItemNameSetting(_.map(salaryBillItemNameSetting, it => {
                    return { ...it, salaryTemplateId: "", itemShowNameSetting: [] };
                  }));
                  nextStep();
                }}>下一步</Button>
              ] : currentStep === 1 ? [
                <Button type="default" onClick={() => {
                  setSalaryBillItemNameSetting(_.map(salaryBillItemNameSetting, it => {
                    return { ...it, salaryTemplateId: "", itemShowNameSetting: [] };
                  }));
                  prevStep();
                }}>上一步</Button>,
                <Button type="primary" onClick={() => this.getReplenishForm()}>下一步</Button>,
                <Button type="default" onClick={() => {
                  this.handlePreview();
                }}>预览</Button>
              ] : currentStep === 2 ? [
                  <Button type="default" onClick={() => {
                    setSalaryBillItemNameSetting(_.map(salaryBillItemNameSetting, it => {
                      return { ...it, salaryTemplateId: "", itemShowNameSetting: [] };
                    }));
                    prevStep();
                  }}>上一步</Button>,
                  <Button type="primary" onClick={this.handleSave}>保存</Button>
                ] :
                []
            }
            title="新建工资单模板"
            content={
              <div>
                {
                  currentStep === 0 && <BaseInformForm onChange={(request) => this.handleBaseInfoChange(request)}/>
                }
                {
                  currentStep === 1 && <ShowSettingForm/>
                }
                {
                  currentStep === 2 && <TemplateSettingForm/>
                }
              </div>
            }
          />
        }

        {
          this.state.editSlideVisible &&
          <WeaSlideModal
            className="slideOuterWrapper"
            visible={this.state.editSlideVisible}
            top={0}
            width={65}
            height={100}
            direction="right"
            measure="%"
            title={
              <SlideModalTitle
                subtitle="编辑工资单模板"
                tabs={[
                  { title: "基础设置", key: 0 },
                  { title: "正常核算工资单模板", key: 1 },
                  { title: "补发工资单模版", key: 2 }
                ]}
                editable={false}
                selectedTab={selectedTab}
                showOperateBtn={showOperateBtn}
                customOperate={
                  selectedTab === 0 ? [
                    <Button type="primary" onClick={() => {
                      this.handleUpdateSave();
                    }}>保存</Button>
                  ] : selectedTab === 1 ? [
                    <Button type="primary" onClick={() => {
                      this.handleUpdateSave();
                    }}>保存</Button>,
                    <Button type="default" onClick={this.handlePreview}>预览</Button>
                  ] : [
                    <Button type="primary" onClick={() => {
                      this.handleUpdateSave();
                    }}>保存</Button>
                  ]
                }
                subItemChange={(selectedTab) => {
                  this.setState({ selectedTab: Number(selectedTab) }, () => {
                    setSalaryBillItemNameSetting(_.map(salaryBillItemNameSetting, it => {
                      return { ...it, salaryTemplateId: "", itemShowNameSetting: [] };
                    }));
                    if (this.state.selectedTab === 2) this.getReplenishForm(true, { id: this.state.templateCurrentId });
                  });
                }}
              />
            }
            content={<div>
              {
                selectedTab === 0 &&
                <BaseInformForm id={this.state.templateCurrentId}
                                onChange={(request) => this.handleBaseInfoChange(request)}/>
              }
              {
                selectedTab === 1 && <ShowSettingForm id={this.state.templateCurrentId}/>
              }
              {
                selectedTab === 2 && <TemplateSettingForm id={this.state.templateCurrentId}/>
              }
            </div>}
            onClose={() => this.setState({ editSlideVisible: false }, () => {
              window.localStorage.removeItem("template-basedata");
              window.localStorage.removeItem("salary-showset");
              this.setState({ selectedTab: 0 });
            })}
          />
        }
        {
          this.state.copyModalVisible &&
          <CopyModal
            onSave={(value) => this.handleCopyModalSave(value)}
            visible={this.state.copyModalVisible}
            onCancel={() => {
              this.setState({ copyModalVisible: false });
            }}/>
        }
      </div>
    );
  }
}