// 核心库
import React from 'react'
import { connect } from 'dva'
// 组件库
import { Form, Checkbox } from 'antd'
import { Search } from '@woowalker/feui'
import ChartLine from './ChartLine'
// 工具库
import { initFilter, addRuleAndGroups } from '../../../utils/common'

class EDUnitUsePage extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      boxProNameData: [],
      boxProNameDefaultValue: [],
      data: [],
      legend: [],
      xAxis: []
    }
  }

  onBarRef = (ref) => {
    this.barChild = ref
  }

  onPieRef = (ref) => {
    this.pieChild = ref
  }

  handleSearch = (value) => {
    var searchD = ""
    value.rules.forEach(d => {
      if (d.field == "SEARCH_DATE")
        searchD = d.value
    })

    var searchDate = searchD.split(',')
    let startDate = searchDate[0]
    let endDate = searchDate[1]
    let rule1 = {
      field: "Parameter1",
      operator: 0,
      value: startDate,
      isCustom: true,
      isSysParam: false,
    }
    let rule2 = {
      field: "Parameter2",
      operator: 0,
      value: endDate,
      isCustom: true,
      isSysParam: false,
    }
    let rule7 = {
      field: "Parameter7",
      operator: 0,
      value: "ProNameSelect_" + this.props.login.userId,
      isCustom: true,
      isSysParam: false,
    }
    value.rules.push(rule1)
    value.rules.push(rule2)
    value.rules.push(rule7)
    this.setState({
      searchRules: value
    }, () => {
      this.getUnitUseChartData(value, true)
      this.getProNameCheckboxData(true)
    })
  }

  //图表信息
  getUnitUseChartData = (value, isFirst) => {
    //非首次加载的话，加载选中条件
    for (var i = 0; i < value.rules.length; i++) {
      var v = value.rules[i]
      if (v.field == 'Parameter7') {
        value.rules.splice(i--, 1)
      }
    }

    let rule7 = {
      field: "Parameter7",
      operator: 0,
      value: "ProNameSelect_" + this.props.login.userId,
      isCustom: true,
      isSysParam: false,
    }
    value.rules.push(rule7)

    const json = initFilter(this.props.login.OrgId)
    addRuleAndGroups(json, value)
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'ED/EDUnitUse/ChartData',
      payload: json,
      onlyData: false,
      onComplete: (re) => {
        if (re && re.IsSuccessful && re.Data) {
          const chartDataModel = re.Data
          this.setState({
            xAxis: chartDataModel.XData.XAxis,
            legend: chartDataModel.Legend,
            data: chartDataModel.ChartApiData,
            searchRules: value
          })
          this.barChild.setValue(this.state.xAxis, this.state.data, this.state.legend)
        }
      }
    })
  };

  //产品名称
  getProNameCheckboxData = (isFirst) => {
    const json = {
      OrgId: this.props.login.OrgId,
      ParentIds: this.state.proNameDefaultValue,
      Code: "ProNameSelect_" + this.props.login.userId,
      IsFirst: isFirst
    }
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'FM/Product/GetProNameList',
      payload: json,
      onlyData: false,
      onComplete: (re) => {
        if (re && re.IsSuccessful && re.Data) {
          this.setState({
            boxProNameData: re.Data.Options,
            boxProNameDefaultValue: re.Data.DefaultValue
          })
          this.getUnitUseChartData(this.state.searchRules, isFirst)
        }
      }
    })
  }

  //保存选中项（产品名称）
  ProNameSettingSave = () => {
    const json = {
      OrgId: this.props.login.OrgId,
      ParentIds: this.state.proNameDefaultValue,
      ChildIds: this.state.boxProNameDefaultValue,
      Code: "ProNameSelect_" + this.props.login.userId,
    }
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'FM/Product/ProNameSelectSave',
      payload: json,
      onlyData: false,
      onComplete: (re) => {
        if (re && re.IsSuccessful && re.Data) {
          this.getProNameCheckboxData(false)
        }
      }
    })
  }

  onProNameChange = (value) => {
    this.setState({
      proNameDefaultValue: value
    }, () => {
      this.getProNameCheckboxData(false)
    })
  }

  onProNameCheck = (checkedValues) => {
    this.setState({
      boxProNameDefaultValue: checkedValues
    }, () => {
      this.ProNameSettingSave()
    })
  }

  render () {
    const color = ["#54D9FD", "#CB0013"]
    const { boxProNameDefaultValue, boxProNameData } = this.state
    return (
      <div>
        <div>
          <Search formId={this.props.formId} formCode={this.props.formCode} onSearch={this.handleSearch} />
        </div>
        <div>
          <div style={{ width: "20%", display: 'inline-block', float: "left", border: "1px solid #ddd", padding: "2em", backgroundColor: "#fff" }}>
            <div style={{ width: "100%" }}>
              <div style={{ lineHeight: "3em", fontSize: "1.5em", fontWeight: "600" }}>产品名称</div>
              <div style={{ height: "200px", overflowY: "scroll" }}>
                <Checkbox.Group
                  value={boxProNameDefaultValue}
                  onChange={this.onProNameCheck}>
                  {
                    boxProNameData.map(item => {
                      return (
                        <div key={item.Value} style={{ marginBottom: 8 }}>
                          <Checkbox value={item.Value}>{item.Label}</Checkbox>
                        </div>
                      )
                    })
                  }
                </Checkbox.Group>
              </div>
            </div>
          </div>
          <div style={{ width: "80%", display: 'inline-block', float: "left" }}>
            <ChartLine onRef={this.onBarRef} color={color} />
          </div>
        </div>
      </div>
    )
  }
}

EDUnitUsePage.propTypes = {
}

export default connect(({ login, loading, EMemOrder, custom, app }) => ({ login, loading, EMemOrder, custom, app }))(Form.create()(EDUnitUsePage))
