/*
 * Author: 黎永顺
 * name: 考情数据导入的，表单选项
 * Description:
 * Date: 2023/3/3
 */
import React, { Component } from "react";
import { WeaFormItem, WeaInput, WeaSearchGroup } from "ecCom";
import { DataCollectionDatePicker, DataCollectionSelect } from "../../cumDeduct";
import "./index.less";

const Input = (label, value, labelCol = 8, wrapperCol = 16) => {
  return (
    <WeaFormItem label={label} labelCol={{ span: labelCol }} wrapperCol={{ span: wrapperCol }}>
      <WeaInput viewAttr={1} value={value}/>
    </WeaFormItem>
  );
};

class ImportFormOptions extends Component {
  screenChange = ({ key, value }) => {
    const { onChangeImportForm } = this.props;
    onChangeImportForm(key, value);
  };

  render() {
    const { salarySobList = [], salaryYearMonth, salarySobId, salaryCycle, attendCycle } = this.props;
    const items = [
      {
        com: DataCollectionDatePicker({
          label: "薪资所属月",
          value: salaryYearMonth,
          onChange: this.screenChange,
          key: "salaryYearMonth",
          screen: false
        })
      },
      {
        com: DataCollectionSelect({
          label: "薪资账套",
          value: salarySobId || "",
          onChange: this.screenChange,
          options: [{ key: "", showname: "" }, ...salarySobList],
          key: "salarySobId"
        })
      },
      { com: Input("薪资周期", salaryCycle) },
      { com: Input("考勤周期", attendCycle, 10, 14) }
    ];
    return (
      <WeaSearchGroup className="attendanceFormWrapper" showGroup needTigger={false} items={items}
                      col={2}/>
    );
  }
}

export default ImportFormOptions;