import React from "react";
import { Radio, Switch } from "antd";
import { WeaButtonIcon, WeaFormItem, WeaInput, WeaSearchGroup } from "ecCom";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import BackgroundUpload from "../components/backgroundUpload";
import SalaryItemSettings from "./salaryItemSettings";
import "./index.less";


@inject("payrollStore")
@observer
export default class ShowSettingForm extends React.Component {

  componentWillMount() {
    const { payrollStore } = this.props;
    const { initShowSettingForm } = payrollStore;
    initShowSettingForm(this.props.id);
  }

  // form 字段变化时的回调
  handleChange = (params) => {
    const { payrollStore: { salaryTemplateShowSet, setSalaryTemplateShowSet } } = this.props;
    let request = { ...salaryTemplateShowSet, ...params };
    setSalaryTemplateShowSet(request);
    window.localStorage.setItem("salary-showset", JSON.stringify(request));
  };

  // 工资单主题 插入变量
  handleThemeNameCllck = (param) => {
    const { payrollStore } = this.props;
    const { salaryTemplateShowSet, setSalaryTemplateShowSet } = payrollStore;
    let request = { ...salaryTemplateShowSet };
    request.theme = (request.theme ? request.theme : "") + param;
    setSalaryTemplateShowSet(request);
    window.localStorage.setItem("salary-showset", JSON.stringify(request));
  };

  handleChangeSalaryItem = (resultSet) => {
    const { payrollStore: { setSalaryItemSet } } = this.props;
    setSalaryItemSet(resultSet);
  };
  handleChangeSalaryItemShowNamesetting = (itemShowNamesetting) => {
    const { payrollStore: { setSalaryBillItemNameSetting, salaryBillItemNameSetting } } = this.props;
    setSalaryBillItemNameSetting(_.map(salaryBillItemNameSetting, it => {
      if (it.salaryBillType === 0) {
        return { ...it, salaryTemplateId: this.props.id, itemShowNameSetting: itemShowNamesetting };
      }
      return { ...it, salaryTemplateId: this.props.id };
    }));
  };

  render() {
    const { payrollStore, id } = this.props;
    const salaryTemplateShowSetStorage = (id ? "{}" : window.localStorage.getItem("salary-showset") || "{}");
    const { salaryTemplateShowSet } = payrollStore;
    const { salaryItemSet, templateBaseData, salaryBillItemNameSet } = payrollStore;
    const {
      theme,
      background,
      textContent,
      textContentPosition,
      salaryItemNullStatus,
      salaryItemZeroStatus
    } = { ...salaryTemplateShowSet, ...JSON.parse(salaryTemplateShowSetStorage) };
    return (
      <div className="showSettingForm">
        <WeaSearchGroup title="主题及其他设置" items={[]} needTigger showGroup>
          <div className="themeSetting">
            <WeaFormItem
              label="工资单标题"
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 18 }}
            >
              <WeaInput style={{ width: "200px" }} viewAttr={3} value={theme} onChange={(value) => {
                this.handleChange({ theme: value });
              }}/>
              <span style={{ float: "right" }}>
              <span>插入变量：</span>
              <a onClick={() => {
                this.handleThemeNameCllck("${companyName}");
              }} className="themeFormalStr" style={{ marginRight: "10px" }}>公司名称</a>
              <a onClick={() => {
                this.handleThemeNameCllck("${salaryMonth}");
              }} className="themeFormalStr">薪资所属月</a>
            </span>
            </WeaFormItem>
            <WeaFormItem
              label="工资单图片"
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 18 }}
            >
              <BackgroundUpload imageUrl={background || null} onChange={(value) => {
                this.handleChange({ background: value });
              }}/>
            </WeaFormItem>
            <WeaFormItem
              label="文本内容"
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 18 }}
            >
              <WeaInput value={textContent} onChange={(value) => {
                this.handleChange({ textContent: value });
              }}/>
            </WeaFormItem>
            <WeaFormItem
              label="文本内容位置"
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 18 }}
            >
              <Radio.Group value={textContentPosition} onChange={(e) => {
                this.handleChange({ textContentPosition: e.target.value });
              }}>
                <Radio value={"1"}>薪资项目前</Radio>
                <Radio value={"2"}>薪资项目后</Radio>
              </Radio.Group>
            </WeaFormItem>
            <WeaFormItem
              label="薪资项为空时不显示"
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 18 }}
            >
              <Switch checked={salaryItemNullStatus} onChange={(value) => {
                this.handleChange({ salaryItemNullStatus: value });
              }}/>
            </WeaFormItem>
            <WeaFormItem
              label="薪资项为0时不显示"
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 18 }}
            >
              <Switch checked={salaryItemZeroStatus} onChange={(value) => {
                this.handleChange({ salaryItemZeroStatus: value });
              }}/>
            </WeaFormItem>
          </div>
        </WeaSearchGroup>

        <WeaSearchGroup
          title={
            <div className="salarySetTitle">
              <span>薪资项目设置</span>
              <WeaButtonIcon buttonType="add" type="primary"
                             onClick={() => this.salaryItemSettingsRef.handleOpenModal(toJS(templateBaseData).salarySob, "添加分类")}/>
            </div>
          }
          items={[]} needTigger showGroup
        >
          <SalaryItemSettings
            ref={dom => this.salaryItemSettingsRef = dom}
            dataSource={salaryItemSet} salaryTemplateId={this.props.id || ""}
            onChangeSalaryItem={this.handleChangeSalaryItem}
            onChangeSalaryItemShowNamesetting={this.handleChangeSalaryItemShowNamesetting}
            salarySobId={toJS(templateBaseData).salarySob}
            isReplenish={false} salaryBillItemNameSet={salaryBillItemNameSet}
          />
        </WeaSearchGroup>
      </div>
    );
  }
}