import React from 'react'
import { Form, Select, Modal, Cascader, Checkbox, Row, message } from 'antd'
import { initFilter } from '../../../utils/common'
const { Option } = Select
class EnergyDosageModel extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      visible: false,
      options: [],
      defaultValue: [],
      boxData: [],
      boxDefaultValue: [],
      typeId: "",
      typeName:"",
      indeterminate: false,
      // 全反选
      checkAll: true,
      option: []
    }
  };

  componentDidMount() {
    this.getTpye()
    if (this.props.onRef) {
      this.props.onRef(this)
    }
  };
  getTpye = () => {
    const { login, dispatch } = this.props
    const json = initFilter(login.OrgId)
    dispatch({
      type: 'app/getDataByPost',
      url: 'BD/BDEnergyClass/FilterOrderPaged',
      payload: json,
      onlyData: false,
      onComplete: (res) => {
        if (res && res.IsSuccessful && res.Data && res.Data) {
          this.setState({ option: res.Data,typeId : res.Data[0].ID,typeName : res.Data[0].Name })
        }
      }
    })
  }
  showModal = () => {
    this.getCascaderData()
    this.getCheckboxData(true)
    this.setState({
      visible: true,
    })
  }

  handleOk = e => {
    this.SettingSave()
  };

  handleCancel = e => {
    this.setState({
      visible: false,
    })
  };

  getCascaderData = () => {
    const json = {
      OrgId: this.props.login.OrgId,
      Parameter1: this.state.typeId,
      Parameter2: this.props.login.userId,
    }
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'EM/EMEnergyDosage/GetEnergyClassNodeData',
      payload: json,
      onlyData: false,
      onComplete: (re) => {
        if (re && re.IsSuccessful && re.Data) {
          this.setState({
            defaultValue: re.Data.DefaultValue,
            options: re.Data.Options
          })
        }
      }
    })
  };

  getCheckboxData = (isFirst) => {
    const json = {
      OrgId: this.props.login.OrgId,
      ParentIds: this.state.defaultValue,
      Code: this.state.typeId,
      IsFirst: isFirst
    }
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'EM/EMEnergyDosage/GetEnergyClassMeasuringData',
      payload: json,
      onlyData: false,
      onComplete: (re) => {
        if (re && re.IsSuccessful && re.Data) {
          let tmp = []
          re.Data.DefaultValue.forEach(element => {
            tmp.push(element)
          })
          this.setState({
            boxData: re.Data.Options
          }, () => {
            const checkedValues = re.Data.DefaultValue
            this.setState({
              boxDefaultValue: checkedValues,
              indeterminate: !!checkedValues.length && checkedValues.length < this.state.boxData.length,
              checkAll: checkedValues.length === this.state.boxData.length
            })
          })
        }
      }
    })
  };

  SettingSave = () => {
    const json = {
      OrgId: this.props.login.OrgId,
      ParentIds: this.state.defaultValue,
      ChildIds: this.state.boxDefaultValue,
    }
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'EM/EMEnergyDosage/SettingClassSave',
      payload: json,
      onlyData: false,
      onComplete: (re) => {
        if (re && re.IsSuccessful && re.Data) {
          if (re.Data.IsSucceed) {
            message.success(re.Data.Msg)
            this.setState({
              visible: false,
            }, () => { this.props.getTableData() })
          }
          else
            message.error(re.Data.Msg)
        }
      }
    })
  };

  onChange = (value) => {
    this.setState({
      defaultValue: value
    }, () => {
      this.getCheckboxData(false)
    })
  }

  onChanges = (value) => {
    this.setState({
      typeId: value,
    }, () => {
      this.getCheckboxData(false)
    })
  }

  onCheck = (checkedValues) => {
    this.setState({
      boxDefaultValue: checkedValues
    })
  }

  onCheckAllChange = (e) => {
    const checkedValues = e.target.checked ? this.state.boxData.map(item => item.Value) : []
    this.setState({
      boxDefaultValue: checkedValues,
      indeterminate: false,
      checkAll: e.target.checked
    })
  }

  render() {
    const { option,typeId} = this.state
    return (
      <Modal title="选择对比计量点" visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel}>
        <Form.Item
          label='矿山安全类型'
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          style={{ marginBottom: 0 }}
        >
           <Select style={{ width: '100%' }}  value={typeId} onChange={this.onChanges}>
                {option.map(item => <Option key={item.ID} value={item.ID}>{item.NAME}</Option>)}               
                </Select>    
        </Form.Item>
        <Form.Item
          label='选择节点'
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          style={{ marginBottom: 0 }}
        >
          <Cascader style={{ width: '100%' }} fieldNames={{ label: 'Label', value: 'Value', children: 'Children' }} value={this.state.defaultValue} options={this.state.options}
            placeholder='请选择节点' onChange={this.onChange} changeOnSelect />
        </Form.Item>
        <div style={{ margin: '4px 0', borderBottom: '1px solid #e9e9e9' }}>
          <Checkbox
            indeterminate={this.state.indeterminate}
            onChange={this.onCheckAllChange}
            checked={this.state.checkAll}
          >
            全/反选
                </Checkbox>
        </div>
        <Checkbox.Group style={{ width: '100%', fontSize: "24px" }} value={this.state.boxDefaultValue} onChange={this.onCheck}>
          <Row>
            {
              this.state.boxData.map(item => {
                return (
                  <div key={item.Value} style={{ marginBottom: 8 }}>
                    <Checkbox
                      value={item.Value}
                    >
                      {item.Label}
                    </Checkbox>
                  </div>
                )
              })
            }
          </Row>
        </Checkbox.Group>
      </Modal>
    )
  }
}
export default EnergyDosageModel