// 核心库
import React from 'react'
import { connect } from 'dva'
// 组件库
import { FullDatePicker, LocalSearch, LayoutCard } from '@woowalker/feui'
import { Row, Col, Table, message, Tabs } from 'antd'
import CommonChart from '../../Chart/CommonChart'
// 工具库
import moment from 'moment'
const { TabPane } = Tabs;

class EDEnergyKpiItemPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      dateType: '0',
      dateString: moment().format('YYYY'),
      tabsData: [],
      columns: [
        { title: '起始值', dataIndex: 'START_VALUE' },
        { title: '结束值', dataIndex: 'END_VALUE' },
        { title: '分数', dataIndex: 'SCORE' },
      ],
      itemRatio: [],
      columnsRatio: [
        { title: '打分项', dataIndex: 'NAME' },
        { title: '最大分值', dataIndex: 'MaxScore' },
        { title: '权重', dataIndex: 'RATIO' }
      ],
      tabsIndex: 0,
      targetChartData: [],
      scoreChartData: [],
      targetChart: {},
      scoreChart: {}
    }
  }


  handleSearch = () => {
    const { dateType, dateString, tabsIndex } = this.state
    const json = {
      Keyword: this.props.data.TreeSelected.join(','),
      OrgId: this.props.login.OrgId,
      Parameter1: dateType,
      Parameter2: dateString,
    }

    if (dateType == '0' && moment(dateString) > moment().startOf('year')) {
      message.error("选中的年份不能大于当前月！")
      this.setState({ dateString: moment().format('YYYY') })
      return
    }

    if (dateType == '1' && moment(dateString) > moment().startOf('month')) {
      message.error("选中的月份不能大于当前月！")
      this.setState({ dateString: moment().format('YYYY-MM') })
      return
    }

    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'ED/Calculate/GetMarkItemSubentryData',
      payload: json
    }).then(res => {
      if (res && res.tabsData) {
        this.setState({
          ...res
        }, () => {
          this.buildChartData(tabsIndex);
        })
      }
    })
  }

  callback = (key) => {
    const index = +key.replace('EDMarkItemEnum_', '');
    this.setState({ tabsIndex: index }, () => {
      this.buildChartData(index);
    })

  }

  buildChartData = (tabsIndex) => {
    const { targetChartData, scoreChartData } = this.state
    this.setState({
      targetChart: {
        xAxis: targetChartData[tabsIndex].XAxis[0].Data,
        yAxis: [{ Name: '' }],
        data: targetChartData[tabsIndex].Data
      },
      scoreChart:{
        xAxis: scoreChartData[tabsIndex].XAxis[0].Data,
        yAxis: [{ Name: '' }],
        data: scoreChartData[tabsIndex].Data
      }
    })
  }

  render() {
    const { data, loading } = this.props
    const { selectedNodes = [] } = data
    const { tabsData, columns, itemRatio, columnsRatio, targetChart, scoreChart } = this.state
    return (
      <div className='scroll_page'>
        <LocalSearch
          onSearch={this.handleSearch}
          isRemember
          shareKey='EDEnergyKpiItem'
          setExtraData={({ dateString, dateType }, callback) => this.setState({ dateString, dateType }, callback)}
          getExtraData={() => ({ dateType: this.state.dateType, dateString: this.state.dateString })}
        >
          <FullDatePicker
            dateType={this.state.dateType}
            dateString={this.state.dateString}
            onlyItem
            onChange={({ dateString, dateType }) => this.setState({ dateString, dateType })}
            options={['0', '1']}
          />
        </LocalSearch>
        <LayoutCard>
          <Row gutter={16}>
            <Col span={12}>
              <CommonChart
                chartId='EDEnergyKpiItemPage_target_line'
                {...targetChart}
                saveImgName={selectedNodes.length ? `${selectedNodes.map(item => item.node.name).join('-')}能耗Kpi指标` : '能耗Kpi指标'}
                style={{ height: 400 }}
              />
            </Col>
            <Col span={12}>
              <CommonChart
                chartId='EDEnergyKpiItemPage_score_line'
                {...scoreChart}
                saveImgName={selectedNodes.length ? `${selectedNodes.map(item => item.node.name).join('-')}能耗Kpi分值` : '能耗Kpi分值'}
                style={{ height: 400 }}
              />
            </Col>
          </Row>
        </LayoutCard>
        <LayoutCard>
          <Tabs type="card" onChange={this.callback}>
            {
              tabsData.map((item, index) => {
                if (item.Data.length == 1) {
                  return (
                    <TabPane tab={item.Name} key={"EDMarkItemEnum_" + index}>
                      <h4>{"公式：" + item.Formula}</h4>
                      <Row gutter={16}>
                        <Col span={12}>
                          <Table
                            loading={loading.effects['app/getDataByPost']}
                            size='small'
                            columns={columns}
                            dataSource={item.Data[0].Item}
                            pagination={false}
                            style={{ marginTop: 8 }}
                          />
                        </Col>
                        <Col span={12}>
                          <Table
                            loading={loading.effects['app/getDataByPost']}
                            size='small'
                            columns={columnsRatio}
                            dataSource={itemRatio}
                            pagination={false}
                            style={{ marginTop: 8 }}
                          />
                        </Col>
                      </Row>
                    </TabPane>
                  )
                }
                else {
                  return (
                    <TabPane tab={item.Name} key={"EDMarkItemEnum_" + index}>
                      <h4>{"公式：" + item.Formula}</h4>
                      <Tabs>
                        {
                          item.Data.map((it, index2) => {
                            return (
                              <TabPane tab={it.Name} key={"EDMarkItemEnum_Ele_" + index2}>
                                <Row gutter={16}>
                                  <Col span={12}>
                                    <Table
                                      loading={loading.effects['app/getDataByPost']}
                                      size='small'
                                      columns={columns}
                                      dataSource={it.Item}
                                      pagination={false}
                                      scroll={{ x: '100%' }}
                                      style={{ marginTop: 8 }}
                                    />
                                  </Col>
                                  <Col span={12}>
                                    <Table
                                      loading={loading.effects['app/getDataByPost']}
                                      size='small'
                                      columns={columnsRatio}
                                      dataSource={itemRatio}
                                      pagination={false}
                                      style={{ marginTop: 8 }}
                                    />
                                  </Col>
                                </Row>
                              </TabPane>
                            )
                          })
                        }
                      </Tabs>
                    </TabPane>
                  )
                }
              })
            }
          </Tabs>
        </LayoutCard>
      </div>
    )
  }
}

export default connect(({ login, loading, app }) => ({ login, loading, app }))(EDEnergyKpiItemPage)
