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

@inject("programmeStore", "salaryFileStore", "taxAgentStore")
@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: "向下舍入"
          },
          {
            key: "5",
            selected: false,
            showname: "见分进角"
          },
          {
            key: "6",
            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 (
            <WeaInputNumber
              min={0}
              precision={3}
              value={text}
              onChange={v => {
                this.updateDataSource(record, v, "paymentProportion");
              }}
            />
          );
        };
      } else if (item.dataIndex == "fixedCost") {
        item.render = (text, record) => {
          return (
            <WeaInputNumber
              min={0}
              precision={2}
              value={text}
              onChange={v => {
                this.updateDataSource(record, v, "fixedCost");
              }}
            />
          );
        };
      } else if (item.dataIndex == "upperLimit") {
        item.render = (text, record) => {
          return (
            <WeaInputNumber
              min={0}
              precision={2}
              value={text}
              onChange={v => {
                this.updateDataSource(record, v, "upperLimit");
              }}
            />
          );
        };
      } else if (item.dataIndex == "lowerLimit") {
        item.render = (text, record) => {
          return (
            <WeaInputNumber
              min={0}
              precision={2}
              value={text}
              onChange={v => {
                this.updateDataSource(record, v, "lowerLimit");
              }}
            />
          );
        };
      }
    });
  }

  updateDataSource(record, e, key) {
    const {
      programmeStore: {
        defaultCompanyDataSource,
        defaultPersonDataSource,
        setDefaultPersonDataSource,
        setDefaultCompanyDataSource
      }
    } = this.props;
    let result = { ...record };
    result[key] = e;
    if (key === "upperLimit" || key === "lowerLimit") {
      let dataSource = [...defaultPersonDataSource],
        dataSource_company = [...defaultCompanyDataSource];
      dataSource = dataSource.map(item => {
        if (item.insuranceName === result.insuranceName) return { ...item, [key]: e };
        else return item;
      });
      dataSource_company = dataSource_company.map(item => {
        if (item.insuranceName === result.insuranceName) return { ...item, [key]: e };
        else return item;
      });
      setDefaultPersonDataSource(dataSource);
      setDefaultCompanyDataSource(dataSource_company);
    } else {
      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);
      }
    }
  }

  componentDidMount() {
    const { taxAgentStore } = this.props;
    const { getTaxAgentSelectListAsAdmin } = taxAgentStore;
    getTaxAgentSelectListAsAdmin();
  }

  render() {
    const { programmeStore, salaryFileStore, taxAgentStore } = this.props;
    const { userStatusList } = salaryFileStore;
    const { taxAgentAdminOption, getTaxAgentSelectListAsAdmin } = taxAgentStore;
    const { defaultPersonDataSource, defaultCompanyDataSource } = programmeStore;
    const options = [
      {
        key: "",
        selected: false,
        showname: ""
      },
      {
        key: "SCHEME_TOWN",
        selected: true,
        showname: "城镇"
      },
      {
        key: "SCHEME_VILLAGE",
        selected: false,
        showname: "农村"
      }
    ];

    const handleSmallTabChange = item => {
      this.setState({
        selectItem: item.value
      });
    };

    return (
      <div className="defaultSlideForm">
        <div>
          <Row style={{ lineHeight: "40px" }}>
            <Col span={6}>
              缴纳类型
            </Col>
            <Col span={18}>
              <WeaSelect
                style={{ width: "200px" }}
                options={options}
                viewAttr={3}
                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}>
              方案名称
            </Col>
            <Col span={18}>
              <WeaInput
                style={{ width: "200px" }}
                viewAttr={3}
                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}>
              <WeaSelect
                style={{ width: "200px" }}
                value={this.props.requestParams.sharedType}
                options={userStatusList}
                onChange={(visibleVal) => {
                  let requestParams = { ...this.props.requestParams };
                  visibleVal === "1" && getTaxAgentSelectListAsAdmin();
                  (visibleVal === "0" || visibleVal === "") && (requestParams.taxAgentIds = '');
                  requestParams.sharedType = visibleVal;
                  this.props.onChange(requestParams);
                }}
              />
            </Col>
          </Row>
          {
            this.props.requestParams.sharedType === "1" &&
            <Row style={{ display: "flex", alignItems: "center", height: 40, marginTop: 8 }}>
              <Col span={6}>可见性范围</Col>
              <Col span={18}>
                <WeaSelect
                  multiple
                  viewAttr={3}
                  style={{ width: "200px" }}
                  value={this.props.requestParams.taxAgentIds}
                  options={taxAgentAdminOption}
                  onChange={(value) => {
                    let requestParams = { ...this.props.requestParams };
                    requestParams.taxAgentIds = value;
                    this.props.onChange(requestParams);
                  }}
                />
              </Col>
            </Row>
          }
          <Row style={{ lineHeight: "40px" }}>
            <Col span={6}>备注</Col>
            <Col span={18}>
              <WeaInput
                style={{ width: "200px" }}
                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 == "个人"
              ? <WeaTable
                dataSource={defaultPersonDataSource}
                columns={insertUpdateColumns}
                pagination={false}
              />
              : <WeaTable
                dataSource={defaultCompanyDataSource}
                columns={insertUpdateColumns}
                pagination={false}
              />}
          </div>
        </div>
      </div>
    );
  }
}