import React from "react";
import { Col, DatePicker, Row } from "antd";
import { inject, observer } from "mobx-react";
import { WeaTable } from "ecCom";
import "./editSlideContent.less";
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("cumDeductStore", "taxAgentStore")
@observer
export default class EditSlideContent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      taxAgentId: "",
      startDate: "",
      endDate: "",
      editable:
        this.props.editable === undefined ? "true" : this.props.editable
    };
  }

  componentWillMount() {
    // 初始化渲染页面
    const {
      taxAgentStore: { fetchTaxAgentOption }
    } = this.props;
    fetchTaxAgentOption();
  }

  addItem() {
    const {
      taxRateStore: { setDataSource }
    } = this.props;
    let dataSource = [...this.props.taxRateStore.dataSource];
    let indexNum = 1;
    if (dataSource.length > 0) {
      indexNum = dataSource[dataSource.length - 1].indexNum + 1;
    }
    let item = { ...emptyItem };
    item.indexNum = indexNum;
    dataSource.push(item);
    setDataSource(dataSource);
  }

  fetchCumDeductDetailList(param) {
    const { cumDeductStore } = this.props;
    const { getCumDeductDetailList, currentRecord } = cumDeductStore;
    getCumDeductDetailList(currentRecord.id, param);
  }

  // 日期格式变化加载数据
  handleFetchCumDeductDetailList(startDate, endDate, taxAgentId) {
    let declareMonth = [];
    if (startDate != "" && startDate != undefined) {
      declareMonth.push(startDate);
    }

    if (endDate != "" && endDate != undefined) {
      declareMonth.push(endDate);
    }
    let item = {
      taxAgentId: taxAgentId
    };
    if (declareMonth.length != 0) {
      item.declareMonth = declareMonth;
    }
    this.fetchCumDeductDetailList(item);
  }

  onSelectChange = (val) => {
    const { onChangeSlideSelectKey } = this.props;
    onChangeSlideSelectKey && onChangeSlideSelectKey(val);
  };

  render() {
    const { cumDeductStore } = this.props;
    const {
      currentRecord,
      slideColumns,
      slidePageObj,
      slideTableDataSource,
      setSlidePageObj,
      slideLoading,
      getCumDeductDetailList
    } = cumDeductStore;
    const { startDate, endDate, taxAgentId } = this.state;
    const declareMonth = [startDate, endDate];
    const pagination = {
      current: slidePageObj.current,
      pageSize: slidePageObj.pageSize,
      total: slidePageObj.total,
      showTotal: (total) => `共 ${total} 条`,
      showSizeChanger: true,
      onShowSizeChange(current, pageSize) {
        setSlidePageObj({ ...slidePageObj, current, pageSize });
        getCumDeductDetailList(currentRecord.id, {
          ...slidePageObj,
          taxAgentId: currentRecord.taxAgentId,
          current,
          pageSize,
          declareMonth: _.filter(declareMonth, item => item)
        });
      },
      onChange(current) {
        setSlidePageObj({
          ...slidePageObj,
          current,
          pageSize: slidePageObj.pageSize
        });
        getCumDeductDetailList(currentRecord.id, {
          ...slidePageObj, current,
          taxAgentId: currentRecord.taxAgentId,
          declareMonth: _.filter(declareMonth, item => item)
        });
      }
    };
    const newColumns = _.map([...slideColumns], (item) => ({ ...item }));
    const rowSelection = {
      selectedRowKeys: this.props.slideSelectedKey,
      onChange: this.onSelectChange
    };
    return (
      <div className="cumDeductSlide">
        <Row className="topLabelBar">
          <Col span={4}>
            <span className="username">{currentRecord.username}</span>
          </Col>
          <Col span={12}>
            <span className="formLabel">税款所属期</span>
            <div className="weaRangePickerWrapper">
              <div className="monthPickerWrapper">
                <MonthPicker
                  width={100}
                  value={startDate}
                  onChange={(v) => {
                    let startDate = "";
                    if (v != "" && v != undefined) {
                      startDate = moment(v).format("YYYY-MM");
                    }
                    this.setState({ startDate });
                    this.handleFetchCumDeductDetailList(
                      startDate,
                      endDate,
                      currentRecord.taxAgentId
                    );
                  }}
                />
              </div>
              <span className="betweenLable">至</span>
              <div className="monthPickerWrapper">
                <MonthPicker
                  width={100}
                  value={endDate}
                  onChange={(v) => {
                    let endDate = "";
                    if (v != "" && v != undefined) {
                      endDate = moment(v).format("YYYY-MM");
                    }
                    this.setState({ endDate });
                    this.handleFetchCumDeductDetailList(
                      startDate,
                      endDate,
                      taxAgentId
                    );
                  }}
                />
              </div>
            </div>
          </Col>
        </Row>

        <div>
          <WeaTable
            rowKey="id"
            rowSelection={rowSelection}
            columns={newColumns}
            dataSource={slideTableDataSource}
            pagination={pagination}
            loading={slideLoading}
            scroll={{ x: 900 }}
          />
        </div>
      </div>
    );
  }
}