/*
 * Author: 黎永顺
 * name: 考情引用
 * Description:
 * Date: 2023/2/23
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { Button, DatePicker } from "antd";
import { WeaFormItem, WeaNewScroll, WeaTab } from "ecCom";
import AttendanceDataComp from "./components/attendanceDataComp";
import FieldMangComp from "./components/fieldMangComp";
import moment from "moment";
import "./index.less";

const { MonthPicker } = DatePicker;

@inject("taxAgentStore")
@observer
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fieldName: "",
      selectedKey: "DATA",
      salaryMonth: []
    };
  }

  /*
   * Author: 黎永顺
   * Description: 考勤数据删选条件
   * Params:
   * Date: 2023/2/24
   */
  getAttendanceDataScreen = () => {
    const { salaryMonth } = this.state;
    const [value1 = "", value2 = ""] = salaryMonth;
    return <WeaFormItem label="薪资所属月" labelCol={{ span: 2 }} wrapperCol={{ span: 22 }}>
      <MonthPicker
        value={value1} format="YYYY-MM"
        disabledDate={(current) => {
          return current && value2 && current.getTime() > new Date(value2).getTime();
        }}
        onChange={(val) => this.handleChangeSalaryMonth([val ? moment(val).format("YYYY-MM") : "", value2])}
      />
      <span className="to">至</span>
      <MonthPicker
        value={value2} format="YYYY-MM"
        disabledDate={(current) => {
          return current && value1 && current.getTime() < new Date(value1).getTime();
        }}
        onChange={(val) => this.handleChangeSalaryMonth([value1, val ? moment(val).format("YYYY-MM") : ""])}
      />
    </WeaFormItem>;
  };
  handleChangeSalaryMonth = (salaryMonth) => this.setState({ salaryMonth }, () => this.attendanceTableRef.getAttendanceList({ salaryYearMonth: _.compact(this.state.salaryMonth) }));
  handleAddAttendFileds = () => this.fieldMangRef.handleTriggerAttendFileds();
  handleImportAttendanceData = () => {
    this.attendanceTableRef.handleImportAttendanceData({
      visiable: true, params: {}, step: 0,
      columns: [], slideDataSource: [], importResult: []
    });
  };
  handleQuoteAttendanceData = () => {
    this.attendanceTableRef.handleQuoteAttendanceData({
      visible: true, title: "引用考勤数据"
    });
  };

  render() {
    const { selectedKey, salaryMonth, fieldName } = this.state;
    const { taxAgentStore: { showOperateBtn } } = this.props;
    const topTab = [
      { title: "考勤数据", viewcondition: "DATA" },
      { title: "字段管理", viewcondition: "FIELD" }
    ];
    const buttons = selectedKey === "DATA" ? [
      <Button type="primary" onClick={this.handleQuoteAttendanceData}>引用</Button>,
      <Button type="ghost" onClick={this.handleImportAttendanceData}>导入</Button>
    ] : [<Button type="primary" onClick={this.handleAddAttendFileds}>新建</Button>];
    return (
      <div className="attendanceRefWrapper">
        <WeaTab
          datas={topTab} keyParam="viewcondition" selectedKey={selectedKey} buttons={showOperateBtn ? buttons : []}
          searchType={selectedKey === "FIELD" ? ["base"] : []} searchsBasePlaceHolder="请输入字段名称"
          onChange={v => this.setState({ selectedKey: v })}
          searchsBaseValue={fieldName} onSearchChange={fieldName => this.setState({ fieldName })}
          onSearch={() => this.fieldMangRef.getAttendanceFieldList({ fieldName, current: 1 })}
        />
        {
          selectedKey === "DATA" && this.getAttendanceDataScreen()
        }
        <div className="tableWrapper">
          <WeaNewScroll height="100%">
            {
              selectedKey === "DATA" ?
                <AttendanceDataComp
                  ref={dom => this.attendanceTableRef = dom}
                  showOperateBtn={showOperateBtn}
                  salaryYearMonth={salaryMonth}
                /> :
                <FieldMangComp
                  ref={dom => this.fieldMangRef = dom}
                  showOperateBtn={showOperateBtn}
                  fieldName={fieldName}
                />
            }
          </WeaNewScroll>
        </div>
      </div>
    );
  }
}

export default Index;