import React, { PureComponent } from "react";
import { connect } from "dva";
import { Input, Icon, Modal, Table } from "antd";
import styles from "./index.less";
// import fields from "./listField.json";

// 参照列表字段
const columns = [
  {
    title: "序号",
    dataIndex: "key",
    key: "key",
    render: (text, record, index) => {
      return <span>{index + 1}</span>;
    }
  },
  {
    title: "id",
    dataIndex: "id",
    key: "id",
    className: `${styles.display}`
  },
  {
    title: "编码",
    dataIndex: "refcode",
    key: "id"
  },
  {
    title: "名称",
    dataIndex: "refname",
    key: "name"
  }
];
class Reference extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      visible: false, // 参照弹出框状态
      filterReferVisible: false, // 参照过滤下拉框状态
      isClick: false, // 是否点击下拉
      showValue: "", // 参照显示的值
      // fieldValueObj: { id: "", code: "", name: "" }, // 参照的值 id、code、name
      selectedRefer: [] // 所选的参照
      // filterRefer: [] // 输入时过滤出来的参照
    };
  }
  componentWillReceiveProps(nextProps) {
    setTimeout(() => {
      const { list } = this.props;
      if (list.length > 0) {
        if (this.state.isClick) {
          this.setState({ filterReferVisible: true });
        } else {
          this.setState({ filterReferVisible: false });
        }
      } else {
        this.setState({ filterReferVisible: false });
      }
    }, 0);
  }
  onValueChange(e) {
    this.setState({ showValue: e.target.value, isClick: true });
    // 此处应该加上过滤条件请求数据，后期需要和后台联调
    this.getData();
  }
  getData(page = { current: 0, pageSize: 10 }) {
    const { dispatch, referUrl, params } = this.props;
    const searchConditions = {};
    searchConditions.page = page.current ? page.current : 0;
    searchConditions.size = page.pageSize ? page.pageSize : 10;
    dispatch({
      type: "refer/getData",
      payload: searchConditions,
      url: `${referUrl}`
    });
  }
  showModal() {
    this.setState({
      visible: true
    });
    this.getData();
  }
  hideModal() {
    this.setState({
      visible: false
    });
  }
  okHandle() {
    const { selectedRefer, showValue } = this.state;
    const { showField, referType } = this.props;
    const valArr =
      referType == "radio" ? [selectedRefer] : selectedRefer.map(item => item);
    const id = valArr.map(item => item.id);
    const onChange = this.props.onChange;
    let showValArrr;
    if (showField == "code") {
      showValArrr = valArr.map(item => item.refcode);
      this.setState({ showValue: showValArrr.join("") });
    } else {
      showValArrr = valArr.map(item => item.refname);
      this.setState({ showValue: showValArrr.join("") });
    }
    if (onChange) {
      onChange(id.join(""));
    }
    this.hideModal();
  }
  referSearch(value) {
    this.getData();
  }
  selectReferClick(val, e) {
    const { isClick } = this.state;
    const { showField } = this.props;
    const onChange = this.props.onChange;
    let showVal;
    if (showField == "code") {
      showValr = val.orderCode;
      this.setState({ showValue: showValr, isClick: !isClick });
    } else {
      showVal = val.poTypeName;
      this.setState({ showValue: showVal, isClick: !isClick });
    }
    // this.props.handleFieldValue(val);
    if (onChange) {
      onChange(val.id);
    }
  }
  referChangeHandle(changedValue) {
    //
  }
  render() {
    const { list, loading, pagination, referType } = this.props;
    const { selectedRefer } = this.state;
    const $this = this;
    const onChange = page => {
      this.getData(page);
    };
    const onShowSizeChange = page => {
      this.getData({ page });
    };
    const rowSelection = {
      type: `${referType}`,
      onChange(selectedRowKeys, selectedRows) {
        if (referType == "radio") {
          $this.setState({ selectedRefer: selectedRows[0] });
        }
      }
      // onSelect(changeableRowKeys) {
      //   console.log(changeableRowKeys);
      // }
    };
    const referContent = () => (
      <Table
        columns={columns}
        dataSource={list}
        pagination={pagination}
        loading={loading}
        onChange={onChange}
        onShowSizeChange={onShowSizeChange}
        rowSelection={rowSelection}
        rowKey={record => record.id}
      />
    );
    const modalRender = () => (
      <Modal
        title="参照demo"
        width="50%"
        visible={this.state.visible}
        onOk={this.okHandle.bind(this)}
        onCancel={this.hideModal.bind(this)}
        okText="确认"
        cancelText="取消"
        closable={false}
        destroyOnClose
        style={{ position: "relative" }}
      >
        <Input.Search
          placeholder="请输入"
          onSearch={this.referSearch.bind(this)}
          enterButton
          style={{
            width: "220px",
            position: "absolute",
            top: "15px",
            right: "20px"
          }}
          className={styles.searchBtn}
          onChange={this.referChangeHandle.bind(this)}
        />
        {referContent()}
      </Modal>
    );
    const referItemRender = () => {
      const referItemArr = [];
      if (list.length > 0) {
        const len = list.length > 10 ? 10 : list.length;
        for (let i = 0; i < len; i++) {
          referItemArr.push(
            <li
              key={list[i].id}
              className={styles.referItem}
              onClick={this.selectReferClick.bind(this, list[i])}
            >
              {list[i].orderCode}
            </li>
          );
        }
      }
      return referItemArr;
    };
    const inputRender = () => (
      <div className={styles.iptBox}>
        <Input
          value={this.state.showValue}
          onChange={this.onValueChange.bind(this)}
          suffix={
            <Icon
              type="search"
              style={{ cursor: "pointer" }}
              onClick={this.showModal.bind(this)}
            />
          }
          style={{ width: "220px" }}
        />
        <ul
          className={styles.referList}
          style={{ display: this.state.filterReferVisible ? "block" : "none" }}
        >
          {referItemRender()}
        </ul>
      </div>
    );
    return (
      <div style={{ width: "200px" }}>
        {modalRender()}
        {inputRender()}
      </div>
    );
  }
}
export default connect(state => ({
  loading: state.refer.loading,
  list: state.refer.list,
  pagination: state.refer.pagination
}))(Reference);
