// 核心库
import React from 'react'
import { connect } from 'dva'
// 组件库
import { Form, Table, message, Button, Modal } from 'antd'
import { Search, LayoutCard } from '@woowalker/feui'
import EDUnitUseSettingModal from './EDUnitUseSettingModal'
// 工具库
import { initFilter, addRuleAndGroups } from '../../../utils/common'
import moment from 'moment'

class EDUnitUsePage2 extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      searchRules: [],
      boxProNameData: [],
      boxProNameDefaultValue: [],
      data: [],
      legend: [],
      xAxis: [],
      proData: [],
      selectData: [],
      selectKey: [],
      startTime: [],
      endTime: [],
      head: [],
      visible: false
    }
  }

  onModalRef = (ref) => {
    this.modalChild = ref
  }

  showTitleModal = () => {
    this.setState({
      visible: true,
    })
  }

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

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

  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]
    if (moment(startDate, 'YYYY-MM-DD').add(1, 'month') <= moment(endDate, 'YYYY-MM-DD')) {
      message.error("开始时间和结束时间不能超过1个月！")
      return;
    }

    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,
    }
    let rule8 = {
      field: "Parameter8",
      operator: 0,
      value: "ProNameSelect_" + this.props.login.userId + "_Select",
      isCustom: true,
      isSysParam: false,
    }
    value.rules.push(rule1)
    value.rules.push(rule2)
    value.rules.push(rule7)
    value.rules.push(rule8)
    this.setState({
      searchRules: value,
    }, () => {
      this.getUnitUseChartData(value, true)
    })
  }

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

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

    const json = initFilter(this.props.login.OrgId)
    addRuleAndGroups(json, value)
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'ED/EDUnitUse/GetTableData',
      payload: json,
      onlyData: false,
      onComplete: (re) => {
        if (re && re.IsSuccessful && re.Data) {
          this.setState({
            head: re.Data.head,
            data: re.Data.data,
            searchRules: value,
            selectData: re.Data.SelectData
          })
        }
      }
    })
  };

  //保存选中项
  ProNameSettingSave = (select, code, isReData = true) => {
    const json = {
      OrgId: this.props.login.OrgId,
      UserId: this.props.login.userId,
      ChildIds: select,
      Code: code
    }
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'FM/Product/ProNameSelectSave',
      payload: json,
      onlyData: false,
      onComplete: (re) => {
        if (re && re.IsSuccessful && re.Data) {
          if (isReData)
            this.getUnitUseChartData(this.state.searchRules, false)
        }
      }
    })
  }

  showModal = () => {
    this.modalChild.showModal()
  }

  render() {
    const { searchRules } = this.state
    const { formParam, login, dispatch } = this.props

    const columns = []
    const render = (value, row, index) => {
      return <p style={{ width: 80, display: 'inline-block' }}>{value}</p>;
    }
    this.state.head.forEach((n, i) => {
      var item = {
        title: n.Title, dataIndex: n.DataIndex, key: n.DataIndex, render: render
      }
      columns.push(item)
    })
    return (
      <>
        <Search
          formId={this.props.formId}
          formCode={this.props.formCode}
          onSearch={this.handleSearch}
          iconEle={
            <>
              <Button onClick={this.showModal}>配置</Button>
              <Button style={{ marginLeft: 4 }} onClick={this.showTitleModal}>单耗说明</Button>
            </>
          }
        />
        <LayoutCard>
          <Table size='small' scroll={{ x: true }} columns={columns} dataSource={this.state.data} />
        </LayoutCard>

        <EDUnitUseSettingModal
          onRef={this.onModalRef}
          getUnitUseChartData={this.getUnitUseChartData}
          searchRules={searchRules}
          login={login}
          formParam={formParam}
          dispatch={dispatch}
        />

        <Modal
          title="单耗说明"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p>动态单耗即历史平均单位能耗，实现各品类具体产品的单耗计算</p>
          <p style={{ color: "black", fontWeight: "800" }}>计算公式：</p>
          <p style={{ color: "black", fontWeight: "800" }}>动态单耗 = 累计用能 ÷ 累计生产数</p>
        </Modal>
      </>
    )
  }
}

EDUnitUsePage2.propTypes = {
}

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