import React from "react";
import { Row, Col, Table, DatePicker } from "antd";
import { inject, observer } from "mobx-react";
import {
  WeaInput,
  WeaTextarea,
  WeaSearchGroup,
  WeaSelect,
  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("otherDeductStore", "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 { otherDeductStore } = this.props;
    const { getOtherDeductDetailList, currentRecord } = otherDeductStore;
    getOtherDeductDetailList(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 {
      taxAgentStore: { taxAgentOption },
    } = this.props;
    const { otherDeductStore } = this.props;
    const {
      slideTableStore,
      currentRecord,
      slideColumns,
      slidePageObj,
      slideTableDataSource,
      setSlidePageObj,
      slideLoading,
    } = otherDeductStore;
    const { startDate, endDate, taxAgentId } = this.state;

    const pagination = {
      total: slidePageObj.total,
      showTotal: (total) => `共 ${total} 条`,
      showSizeChanger: true,
      onShowSizeChange(current, pageSize) {
        setSlidePageObj({ ...slidePageObj, current, pageSize });
      },
      onChange(current) {
        setSlidePageObj({
          ...slidePageObj,
          current,
          pageSize: slidePageObj.pageSize,
        });
      },
    };
    const newColumns = _.map([...slideColumns], (item) => {
      if (item.dataIndex === "declareMonth") {
        return {
          ...item,
          width: 120,
          fixed: "left",
        };
      } else {
        return { ...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}
                  format="YYYY-MM"
                  value={startDate}
                  onChange={(v) => {
                    let startDate = "";
                    if (v != "" && v != undefined) {
                      startDate = moment(v).format("YYYY-MM");
                    }
                    this.setState({ startDate });
                    this.handleFetchCumDeductDetailList(
                      startDate,
                      endDate,
                      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>
          <Col span={8}>
            <span className="formLabel">个税扣缴义务人</span>
            <WeaSelect
              showSearch // 设置select可搜索
              style={{ width: 100 }}
              options={taxAgentOption}
              value={taxAgentId}
              onChange={(v) => {
                this.setState({ taxAgentId: v });
                this.handleFetchCumDeductDetailList(startDate, endDate, v);
              }}
            />
          </Col>
        </Row>

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