import React, { PureComponent } from "react";
import { Icon, Radio, Input, Table, InputNumber, Divider, Button } from "antd";
import { connect } from "dva";
import BreadcrumbPackage from "@/components/BreadcrumbPackage/index.js";
import styles from "./index.less";
const RadioGroup = Radio.Group;

class ReplenishmentParameter extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      isShow: false,
      value: 1,
      replenishmentParameterSearch: "",
      classifyCode: "",
      isEdit: false
    };
  }
  componentWillMount() {
    this.search();
    this.getClassifyData();
  }
  onShowSizeChange(current, pageSize) {
    this.search(current - 1, pageSize);
  }
  // 获取不同的分类
  getClassifyData() {
    const { dispatch } = this.props;
    dispatch({
      type: "replenishmentParameter/getClassifyData",
      payload: null
    });
  }
  search(page = 0, pageSize = 10) {
    const { dispatch } = this.props;
    const { value, replenishmentParameterSearch, classifyCode } = this.state;
    const searchConditions = {};
    searchConditions.page = page ? page : 0;
    searchConditions.pageSize = pageSize ? pageSize : 10;
    value ? (searchConditions[`search_EQ_status`] = value) : null;
    classifyCode
      ? (searchConditions[`search_EQ_classifyCode`] = classifyCode)
      : null;
    replenishmentParameterSearch
      ? (searchConditions[
          `search_EQ_replenishmentParameter`
        ] = replenishmentParameterSearch)
      : null;
    dispatch({
      type: "replenishmentParameter/getReplenishmentParameterData",
      payload: searchConditions
    });
  }
  paginationChange(page, pageSize) {
    this.search(page - 1, pageSize);
  }
  // 列表栏能否展示
  dialogSelect() {
    this.setState({
      isShow: !this.state.isShow
    });
  }
  // 单选值
  radioSelect = e => {
    this.setState({
      value: e.target.value
    });
  };
  // 搜索框
  replenishmentParameterSearch = e => {
    e.preventDefault();
    this.setState({
      replenishmentParameterSearch: e.target.value
    });
  };
  // 馆藏改变
  changeClassifyCode = status => {
    this.setState(
      {
        classifyCode: status
      },
      () => {
        this.search();
      }
    );
  };
  // 修改按钮事件
  editHandle = () => {
    this.setState({
      isEdit: true
    });
  };
  // 保存按钮事件
  saveHandle = () => {
    const { dispatch } = this.props;
    this.setState({
      isEdit: false
    });
    dispatch({
      type: "replenismentPatameter/saveReplenishmentParameterData",
      payload: this.props.replenishmentParameterData
    });
  };
  render() {
    const { isShow, replenishmentParameterSearch } = this.state;
    const {
      replenishmentParameterData,
      pagination,
      dispatch,
      classifyData
    } = this.props;
    const styleOrderStatus = {
      background: "#E14C46",
      borderRadius: 2,
      color: "#fff"
    };
    if (!replenishmentParameterData) return null;
    // 日均销量改变
    const checkDayAverageNum = (index, e) => {
      replenishmentParameterData[index][`dayAverageNum`] = e;
      if (replenishmentParameterData[index][`safeDay`] != 0) {
        replenishmentParameterData[index][`safeNum`] =
          replenishmentParameterData[index][`safeDay`] * e;
      }
      const newReplenishmentParameterData = replenishmentParameterData.concat(
        []
      );
      dispatch({
        type: "replenishmentParameter/replenishmentParameterData",
        replenishmentParameterData: newReplenishmentParameterData
      });
    };
    // 安全天数改变
    const checkSafeDay = (index, e) => {
      replenishmentParameterData[index][`safeDay`] = e;
      if (replenishmentParameterData[index][`safeDay`] != 0) {
        replenishmentParameterData[index][`safeNum`] =
          replenishmentParameterData[index][`dayAverageNum`] * e;
      }
      const newReplenishmentParameterData = replenishmentParameterData.concat(
        []
      );
      dispatch({
        type: "replenishmentParameter/replenishmentParameterData",
        replenishmentParameterData: newReplenishmentParameterData
      });
    };
    // 安全数量改变
    const checkSafeNum = (index, e) => {
      replenishmentParameterData[index][`safeNum`] = e;
      if (replenishmentParameterData[index][`safeDay`] != 0) {
        replenishmentParameterData[index][`dayAverageNum`] =
          e / replenishmentParameterData[index][`safeDay`];
      } else {
        replenishmentParameterData[index][`safeDay`] =
          e / replenishmentParameterData[index][`dayAverageNum`];
      }
      const newReplenishmentParameterData = replenishmentParameterData.concat(
        []
      );
      dispatch({
        type: "replenishmentParameter/replenishmentParameterData",
        replenishmentParameterData: newReplenishmentParameterData
      });
      // didChange = `safeNum`;
      // this.changeDidHandle(`safeNum`);
    };
    const columns = [
      {
        title: "商品名称",
        dataIndex: "goodName",
        key: "goodName",
        render: (text, record) => (
          <div className={styles.nameBox}>
            <div className={styles.imgBox}>
              <img src={text.img} alt="" />
            </div>
            <div className={styles.goodName}>{text.title}</div>
            <div className={styles.goodName}>{record.goodCode}</div>
          </div>
        )
      },
      {
        title: "近30天销量",
        dataIndex: "amountNum",
        key: "amountNum",
        render: (text, record) => <div>{`${text} ${record.rare}`}</div>
      },
      {
        title: "日销量",
        dataIndex: "dayNum",
        key: "dayNum",
        render: (text, record) => <div>{`${text} ${record.rare}`}</div>
      },
      {
        title: "日均销量",
        dataIndex: "dayAverageNum",
        key: "dayAverageNum",
        render: (text, record, index) =>
          this.state.isEdit ? (
            <div>
              <InputNumber
                value={text}
                onChange={checkDayAverageNum.bind(this, index)}
                style={{ width: "60px" }}
              />
              <span>{`${record.rare}`}</span>
            </div>
          ) : (
            <div style={{ width: "75px" }}>{`${text}${record.rare}`}</div>
          )
      },
      {
        title: "安全库存天数",
        dataIndex: "safeDay",
        key: "safeDay",
        render: (text, record, index) =>
          this.state.isEdit ? (
            <div>
              <InputNumber
                value={text}
                onChange={checkSafeDay.bind(this, index)}
                style={{ width: "60px" }}
              />
            </div>
          ) : (
            <div style={{ width: "75px" }}>{text}</div>
          )
      },
      {
        title: "安全库存量",
        dataIndex: "safeNum",
        key: "safeNum",
        render: (text, record, index) =>
          this.state.isEdit ? (
            <div>
              <InputNumber
                value={text}
                onChange={checkSafeNum.bind(this, index)}
                style={{ width: "60px" }}
              />
              <span>{`${record.rare}`}</span>
            </div>
          ) : (
            <div style={{ width: "74px" }}>{`${text}${record.rare}`}</div>
          )
      }
    ];
    const paginationSetting = {
      size: "small",
      total: pagination ? pagination.total : 0,
      showSizeChanger: true,
      showQuickJumper: true,
      showTotal: this.showTotaFun,
      onShowSizeChange: this.onShowSizeChange.bind(this),
      onChange: this.paginationChange.bind(this)
    };
    return (
      <div className={styles.replenishmentParameterBox}>
        <BreadcrumbPackage />
        <div className={styles.classifyBox}>
          <div
            className={styles.classifyTitle}
            key={1}
            onClick={this.changeClassifyCode.bind(this, "")}
            style={this.state.classifyCode == "" ? styleOrderStatus : null}
          >
            全部商品分类
          </div>
          <div
            className={
              isShow ? styles.classifyChildBox : styles.classifyChildBoxHidden
            }
          >
            {classifyData.map(item => (
              <div
                className={styles.classifyChild}
                key={item.name}
                onClick={this.changeClassifyCode.bind(this, item.code)}
                style={
                  this.state.classifyCode == item.code ? styleOrderStatus : null
                }
              >
                {item.name}
              </div>
            ))}
          </div>
          <div className={styles.iconBox}>
            <Icon
              type="up"
              style={{ display: isShow ? "" : "none" }}
              onClick={this.dialogSelect.bind(this)}
            />
            <Icon
              type="down"
              style={{ display: isShow ? "none" : "" }}
              onClick={this.dialogSelect.bind(this)}
            />
          </div>
        </div>
        <Divider />
        <div className={styles.raidoAndSearch}>
          <RadioGroup
            value={this.state.value}
            onChange={this.radioSelect}
            className={styles.radioBox}
          >
            <Radio value={1}>基于订货单位</Radio>
            <Radio value={2}>基于主单位</Radio>
          </RadioGroup>
          <Button
            className={styles.buttonStyle}
            onClick={this.editHandle}
            type="primary"
          >
            编辑
          </Button>
          <Button
            className={styles.buttonStyle}
            onClick={this.saveHandle}
            type="primary"
          >
            保存
          </Button>
          <div className={styles.searchBox}>
            <Input.Search
              placeholder="输入产品编码/名称/规格"
              enterButton="搜索"
              style={{ width: 280 }}
              onChange={this.replenishmentParameterSearch.bind(this)}
            />
          </div>
        </div>
        <Table
          columns={columns}
          dataSource={replenishmentParameterData}
          pagination={paginationSetting}
        />
      </div>
    );
  }
}
export default connect(state => ({
  replenishmentParameterData:
    state.replenishmentParameter.replenishmentParameterData,
  pagination: state.replenishmentParameter.pagination,
  classifyData: state.replenishmentParameter.classifyData
}))(ReplenishmentParameter);
// export default ReplenishmentParameter;
