import React from 'react'
import { Tree, Upload, Icon, Button, message, Span, Modal, Tag, Table } from 'antd';
import FormList from './formList/index';

const TreeNode = Tree.TreeNode;


import { connect } from 'dva';
@connect(({ DataColumn, SqlManageEntity, loading }) => ({
  DataColumn, SqlManageEntity,
  loading: loading.models.DataColumn || loading.models.SqlManageEntity
}))
export default class TableSelect extends React.Component {
  constructor(props) {
    super(props)
    const value = props.value || {};

    this.state = {
      selects: value.selects || {},
      visiable: value.visiable,
      isAll: value.isAll != null ? value.isAll : false,
      querys: value.querys || [],
      sql: value.sql,
    }
  }

  triggerChange = (changedValue) => {
    // Should provide an event to pass value to Form.
    const onChange = this.props.onChange;
    if (onChange) {
      console.log("changedValue", changedValue)
      onChange(Object.assign({}, this.state, changedValue));
    }
  }
  componentWillReceiveProps(nextProps) {
    // Should be a controlled component.
    if ('value' in nextProps) {
      const value = nextProps.value;

      if (value != null && value instanceof Object) {
        this.setState(value);
      }
      //
    }
  }
  remove = (rowKey) => {
    console.log(rowKey)
    const { selects } = this.state
    delete selects[rowKey]
    console.log(selects)
    if (!('value' in this.props)) {
      this.setState({ selects });
    }
    this.triggerChange({ selects });
  }

  select = (obj) => {
    var { selects } = this.state
    const { json: { isMultiple, optionType } } = this.props
    let valueName = this.props.json.valueName

    if (optionType == "reference" && this.props.dataColumn.referenceObjId) {
      valueName = this.props.dataColumn.referenceCodeName

    }

    const kk = obj[valueName]
    if (kk == null) {
      message.error("指定的取值字段不存在或者值为空")
      return
    }
    if (!isMultiple) {
      selects = { [kk]: { ...obj, selectKey: kk } }
    } else {
      selects[kk] = obj;
      selects[kk].selectKey = kk
    }

    if (!('value' in this.props)) {
      this.setState({ selects });
    }
    this.triggerChange({ selects });






  }
  close = (i) => {
    var { values, labels } = this.state
    values.splice(i, 1)
    labels.splice(i, 1)
    if (!('value' in this.props)) {
      this.setState({ values, labels });
    }
    this.triggerChange({ values, labels });



  }
  open = () => {

    if (!('value' in this.props)) {
      this.setState({ visiable: true });
    }
    this.triggerChange({ visiable: true });

  }
  closeModal = () => {
    if (!('value' in this.props)) {
      this.setState({ visiable: false });
    }
    this.triggerChange({ visiable: false });

  }

  render() {
    const { json: { isMultiple, sql, optionType, showTable }, dataColumn: { referenceObjId }, sqlModel, columns, dataSource } = this.props
    let { valueName, labelName } = this.props.json
    if (optionType == "reference" && referenceObjId) {
      valueName = this.props.dataColumn.referenceCodeName
      labelName = this.props.dataColumn.referenceNameName
    }



    if (valueName == null || valueName == "") {
      return <>请指定取值的列名</>
    }
    const { selects, visiable, labels } = this.state



    const keys = []
    for (let i in selects) {
      keys.push(selects[i][valueName])
    }


    const columns2 = [...columns, {
      title: "操作",
      render: (val, record) => <a onClick={this.remove.bind(this, record.selectKey)}>移除</a>
    }]
    const columns3 = [...columns, {
      title: "操作",
      render: (val, record) =>
        keys.includes(record[valueName]) ? <span>已选择</span> : <a onClick={this.select.bind(this, record)}>选择</a>
    }]
    const custom = {
      isAll: this.state.isAll,
      querys: this.state.querys,
      sql: this.state.sql,
    }
    // console.log(columns3)
    let allWidth = 0
    if (columns3) {
      columns3.map((item, index) => {
        if (index === columns3.length - 1) {
          item.fixed = 'right'
          item.width = 50
          allWidth += 50
          return item
        }
        if (index === columns3.length - 2) {
          allWidth += 150
        } else {
          if (item.width) {
            allWidth += item.width
          } else {
            item.width = 180
            allWidth += 180
          }
        }
        return item
      })
    }
    return (
      <div>
        {Object.keys(selects).length > 0 ?
          showTable ? <Table rowKey={valueName} size="small" dataSource={Object.values(selects)} columns={columns2} pagination={false} /> :
            Object.keys(selects).map((k) => <Tag key={k} closable onClose={this.remove.bind(this, k)}>{selects[k][labelName]}</Tag>)
          : ""
        }


        <Button type="primary" onClick={this.open}>选择</Button>
        <Modal
          width={this.props.get==='mobile'?"100%":"60%"}
          maskClosable={false}
          title={`请选择`}
          visible={visiable}
          onOk={this.closeModal}
          onCancel={this.closeModal}
        >

          {optionType == "reference" ? referenceObjId ?
            <FormList rights={this.props.rights || []} notShowBack={true} value={custom} objId={referenceObjId} isFormCom={true} isSelect={true} selects={keys} valueName={valueName} callback={this.select} sql={sql} />
            : "未关联数据对象"
            : sqlModel.dataObjId ?
              <FormList rights={this.props.rights || []} notShowBack={true} value={custom} objId={sqlModel.dataObjId} isFormCom={true} isSelect={true} selects={keys} valueName={valueName} callback={this.select} sql={sql} />
              : <Table rowKey={valueName} size="small" dataSource={dataSource.list} columns={columns3} scroll={{ x: allWidth }} />}
        </Modal>
      </div>

    );

  }
}