import React from "react";
import { Row, Col, Table, DatePicker } from "antd";
import { inject, observer } from "mobx-react";
import {
  WeaInput,
  WeaTextarea,
  WeaSearchGroup,
  WeaSelect,
  WeaCheckbox,
  WeaTable
} from "ecCom";
import { slideColumns, slideDataSource, columns } from "./columns";
import "./editSlideContent.less";

// import { WeaTableNew } from "comsMobx"
// const WeaTable = WeaTableNew.WeaTable;
import moment from "moment";

const { MonthPicker } = DatePicker;

let emptyItem = {
  incomeLowerLimit: "0.00",
  incomeUpperLimit: "0.00",
  dutyFreeValue: "0.00",
  dutyFreeRate: "0.00",
  taxableIncomeLl: "0.00",
  taxableIncomeUl: "0.00",
  taxRate: "0.00",
  taxDeduction: "0.00"
};

@inject("attendanceStore")
@observer
export default class EditSlideContent extends React.Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    // 初始化渲染页面
    const { attendanceStore: { viewAttendQuote } } = this.props;
    viewAttendQuote({ attendQuoteId: this.props.id });
  }

  getColumns(columns) {
    let result = [...columns];
    return result.filter(item => item.hide == "false");
  }

  getScrollWidth() {
    const { attendanceStore } = this.props;
    const { attendQuoteDetailTableStore } = attendanceStore;
    return (
      this.getColumns(
        attendQuoteDetailTableStore.columns
          ? attendQuoteDetailTableStore.columns
          : []
      ).length * 150
    );
  }

  render() {
    const {
      attendanceStore,
      attendanceStore: { viewAttendQuote }
    } = this.props;
    const {
      attendQuoteDetailPageInfo,
      attendQuoteDetailTableStore
    } = attendanceStore;

    const pagination = {
      total: attendQuoteDetailPageInfo.total,
      showTotal: total => `共 ${total} 条`,
      showSizeChanger: true,
      pageSizeOptions: ["10", "20", "50", "100"],
      onShowSizeChange: (current, pageSize) => {
        viewAttendQuote({ attendQuoteId: this.props.id, current, pageSize });
      },
      onChange: current => {
        viewAttendQuote({
          attendQuoteId: this.props.id,
          current,
          pageSize: attendQuoteDetailPageInfo.pageSize
        });
      }
    };
    return (
      <div className="attendSlide">
        <div className="titleWrapper">
          {this.props.salaryYearMonth != "" &&
            <div className="slideLeftTitle">
              考勤周期： {this.props.salaryYearMonth}
            </div>}
        </div>
        <div>
          <WeaTable
            columns={this.getColumns(
              attendQuoteDetailTableStore.columns
                ? attendQuoteDetailTableStore.columns
                : []
            )}
            dataSource={
              attendQuoteDetailPageInfo.list
                ? attendQuoteDetailPageInfo.list
                : []
            }
            pagination={pagination}
            scroll={{ x: this.getScrollWidth() }}
          />
        </div>
      </div>
    );
  }
}