import React from "react";
import { WeaSelect, WeaInput } from "ecCom";
import { Table, Row, Col, Switch } from "antd";
import { insertUpdateColumns } from "./columns";
import { inject, observer } from "mobx-react";
import SmallTab from "../../../components/smallTab";
import "./index.less";
import RequiredLabelTip from "../../../components/requiredLabelTip";

@inject("programmeStore")
@observer
export default class DefaultSlideForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "SCHEME_TOWN",
      selectItem: "个人",
      dataSource: {}
    };
    insertUpdateColumns.map(item => {
      if (item.dataIndex == "isPayment") {
        item.render = (text, record) => {
          return (
            <Switch
              checked={text}
              onChange={e => {
                this.updateDataSource(record, e, "isPayment");
              }}
            />
          );
        };
      } else if (item.dataIndex == "validNum") {
        let options = [
          {
            key: "0",
            selected: false,
            showname: "0"
          },
          {
            key: "1",
            selected: false,
            showname: "1"
          },
          {
            key: "2",
            selected: true,
            showname: "2"
          }
        ];
        item.render = (text, record) => {
          return (
            <WeaSelect
              options={options}
              value={String(text)}
              onChange={v => {
                this.updateDataSource(record, v, "validNum");
              }}
            />
          );
        };
      } else if (item.dataIndex == "rententionRule") {
        let options = [
          {
            key: "1",
            selected: false,
            showname: "原始数据"
          },
          {
            key: "2",
            selected: false,
            showname: "四舍五入"
          },
          {
            key: "3",
            selected: false,
            showname: "向上舍入"
          },
          {
            key: "4",
            selected: false,
            showname: "向下舍入"
          }
        ];
        item.render = (text, record) => {
          return (
            <WeaSelect
              options={options}
              value={text}
              onChange={v => {
                this.updateDataSource(record, v, "rententionRule");
              }}
            />
          );
        };
      } else if (item.dataIndex == "paymentProportion") {
        item.render = (text, record) => {
          return (
            <WeaInput
              value={text}
              onChange={v => {
                this.updateDataSource(record, v, "paymentProportion");
              }}
            />
          );
        };
      } else if (item.dataIndex == "fixedCost") {
        item.render = (text, record) => {
          return (
            <WeaInput
              value={text}
              onChange={v => {
                this.updateDataSource(record, v, "fixedCost");
              }}
            />
          );
        };
      }
    });
  }

  updateDataSource(record, e, key) {
    const {
      programmeStore: {
        defaultCompanyDataSource,
        defaultPersonDataSource,
        setDefaultPersonDataSource,
        setDefaultCompanyDataSource
      }
    } = this.props;
    let result = { ...record };
    result[key] = e;
    if (this.state.selectItem == "个人") {
      let dataSource = [...defaultPersonDataSource];
      dataSource = dataSource.map(item => {
        if (item.id == result.id) return result;
        else return item;
      });
      setDefaultPersonDataSource(dataSource);
    } else {
      let dataSource = [...defaultCompanyDataSource];
      dataSource = dataSource.map(item => {
        if (item.id == result.id) return result;
        else return item;
      });
      setDefaultCompanyDataSource(dataSource);
    }
  }

  componentWillMount() {
    const { programmeStore } = this.props;
    const { getForm, selectedKey, defaultPersonDataSource } = programmeStore;
  }

  render() {
    const { programmeStore } = this.props;
    const {
      defaultPersonDataSource,
      defaultCompanyDataSource,
      selectedKey
    } = programmeStore;
    const { dataSource } = this.state;
    const options = [
      {
        key: "SCHEME_TOWN",
        selected: true,
        showname: "城镇"
      },
      {
        key: "SCHEME_VILLAGE",
        selected: false,
        showname: "农村"
      }
    ];

    const handleSmallTabChange = item => {
      // let paymentArea = item == "paymentArea" ? "1": "2"
      // let requestParams = {...this.props.requestParams}
      // requestParams.paymentArea = paymentArea
      this.setState({
        selectItem: item.value
      });
      // this.props.onChange(requestParams)
    };

    return (
      <div className="defaultSlideForm">
        <div>
          <Row style={{ lineHeight: "40px" }}>
            <Col span={6}>
              缴纳类型<RequiredLabelTip />
            </Col>
            <Col span={18}>
              <WeaSelect
                style={{ width: "200px" }}
                options={options}
                value={this.props.requestParams.paymentType}
                onChange={(v, showname) => {
                  let requestParams = { ...this.props.requestParams };
                  requestParams.paymentType = v;
                  this.props.onChange(requestParams);
                }}
              />
            </Col>
          </Row>

          <Row style={{ lineHeight: "40px" }}>
            <Col span={6}>
              方案名称<RequiredLabelTip />
            </Col>
            <Col span={18}>
              <WeaInput
                value={this.props.requestParams.schemeName}
                onChange={value => {
                  let requestParams = { ...this.props.requestParams };
                  requestParams.schemeName = value;
                  this.props.onChange(requestParams);
                }}
              />
            </Col>
          </Row>

          <Row style={{ lineHeight: "40px" }}>
            <Col span={6}>备注</Col>
            <Col span={18}>
              <WeaInput
                value={this.props.requestParams.remarks}
                onChange={value => {
                  let requestParams = { ...this.props.requestParams };
                  requestParams.remarks = value;
                  this.props.onChange(requestParams);
                }}
              />
            </Col>
          </Row>
        </div>

        <div className="tableBar">
          <div>
            <SmallTab
              items={[
                { title: "个人", value: "个人" },
                { title: "公司", value: "公司" }
              ]}
              onChange={item => {
                handleSmallTabChange(item);
              }}
            />
          </div>

          <div className="tableWrapper">
            {this.state.selectItem == "个人"
              ? <Table
                  dataSource={defaultPersonDataSource}
                  columns={insertUpdateColumns}
                  pagination={false}
                />
              : <Table
                  dataSource={defaultCompanyDataSource}
                  columns={insertUpdateColumns}
                  pagination={false}
                />}
          </div>
        </div>
      </div>
    );
  }
}