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

  handleDownClick = (index) => {
    const { payrollStore: { salaryItemSet, setSalaryItemSet } } = this.props;
    let downItem = salaryItemSet[index + 1];
    let thisItem = salaryItemSet[index];
    let resultSet = [...salaryItemSet];
    resultSet[index] = downItem;
    resultSet[index + 1] = thisItem;
    setSalaryItemSet(resultSet);
  };

  handleUpClick = (index) => {
    const { payrollStore: { salaryItemSet, setSalaryItemSet } } = this.props;
    let upItem = salaryItemSet[index - 1];
    let thisItem = salaryItemSet[index];
    let resultSet = [...salaryItemSet];
    resultSet[index] = upItem;
    resultSet[index - 1] = thisItem;
    setSalaryItemSet(resultSet);
  };

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

  handleDeleteClick = (index) => {
    Modal.confirm({
      title: "信息确认",
      content: "确认删除",
      onOk: () => {
        const { payrollStore: { salaryItemSet, setSalaryItemSet } } = this.props;
        let resultSalaryItemSet = [...salaryItemSet];
        resultSalaryItemSet.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="薪资项目设置" items={[]} needTigger showGroup>
          {
            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>
    );
  }
}