import React from "react";
import { Modal, Radio, Switch } from "antd";
import { WeaButtonIcon, WeaFormItem, WeaInput, WeaSearchGroup } from "ecCom";
import { inject, observer } from "mobx-react";
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);
  };

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

  handleChangeSalaryItem = (resultSet) => {
    const { payrollStore: { setSalaryItemSet } } = this.props;
    setSalaryItemSet(resultSet);
  };

  handleDeleteItem = (group, item) => {
    const { payrollStore: { salaryItemSet, setSalaryItemSet } } = this.props;
    let resultSalaryItemSet = [...salaryItemSet];
    resultSalaryItemSet.map(sourceGroup => {
      if (sourceGroup.groupId === group.groupId) {
        sourceGroup.items.map((sourceItem, index) => {
          if (sourceItem.id === item.id) {
            sourceGroup.items.splice(index, 1);
          }
        });
      }
    });
    setSalaryItemSet(resultSalaryItemSet);
  };


  render() {
    const { payrollStore, id } = this.props;
    const salaryTemplateShowSetStorage = id ? "{}" : window.localStorage.getItem("salary-showset") || "{}";
    const { salaryTemplateShowSet } = payrollStore;
    const { salaryItemSet } = payrollStore;
    const {
      theme,
      background,
      textContent,
      textContentPosition,
      salaryItemNullStatus,
      salaryItemZeroStatus
    } = { ...salaryTemplateShowSet, ...JSON.parse(salaryTemplateShowSetStorage) };
    return (
      <div className="showSettingForm">
        <WeaSearchGroup title="主题及其他设置" items={[]} needTigger showGroup center>
          <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} 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>
        </WeaSearchGroup>

        <WeaSearchGroup
          title={
            <div className="salarySetTitle">
              <span>薪资项目设置</span>
              <WeaButtonIcon buttonType="add" type="primary"/>
            </div>
          }
          items={[]}
          needTigger
          showGroup
        >
          <SalaryItemSettings
            dataSource={salaryItemSet}
            onChangeSalaryItem={this.handleChangeSalaryItem}
          />
          {/*{*/}
          {/*  salaryItemSet.map((group, index) => (*/}
          {/*    <div className="configItemWrapper">*/}
          {/*      <div className="configTitle">{group.groupName}*/}
          {/*        {*/}
          {/*          index < salaryItemSet.length - 1 &&*/}
          {/*          <Icon*/}
          {/*            type="caret-down"*/}
          {/*            style={{ marginLeft: "10px", cursor: "pointer", color: "#666" }}*/}
          {/*            onClick={() => {*/}
          {/*              this.handleDownClick(index);*/}
          {/*            }}*/}
          {/*          />*/}
          {/*        }*/}
          {/*        {*/}
          {/*          index > 0 &&*/}
          {/*          <Icon*/}
          {/*            type="caret-up"*/}
          {/*            style={{ marginLeft: "10px", cursor: "pointer", color: "#666" }}*/}
          {/*            onClick={() => {*/}
          {/*              this.handleUpClick(index);*/}
          {/*            }}*/}
          {/*          />*/}
          {/*        }*/}
          {/*        <i*/}
          {/*          className="icon-coms-Delete"*/}
          {/*          style={{ cursor: "pointer", color: "#666", marginLeft: "10px" }}*/}
          {/*          onClick={() => {*/}
          {/*            this.handleDeleteClick(index);*/}
          {/*          }}*/}
          {/*        />*/}
          {/*      </div>*/}
          {/*      <div className="configContent">*/}
          {/*        {group.items.map(item => (*/}
          {/*          <span className="editItem">{item.name}*/}
          {/*            <Icon*/}
          {/*              type="cross" style={{ cursor: "pointer" }}*/}
          {/*              onClick={() => {*/}
          {/*                this.handleDeleteItem(group, item);*/}
          {/*              }}*/}
          {/*            />*/}
          {/*          </span>*/}
          {/*        ))}*/}
          {/*      </div>*/}
          {/*    </div>*/}
          {/*  ))*/}
          {/*}*/}
        </WeaSearchGroup>
      </div>
    );
  }
}