// 核心库
import React from 'react'
import { connect } from 'dva'
// 组件库
import ReactEcharts from 'echarts-for-react'
import { Form, Table } from 'antd'
import { Search, LayoutCard } from '@woowalker/feui'
// 工具库
import { initFilter, addRuleAndGroups } from '../../../utils/common'

class EaWriteOffStatisticalPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [],
      nodes: [],
      links: []
    }
  }

  handleSearch = (value) => {
    this.setState({
      searchRules: value
    }, () => {
      this.loadData(value);
    })
  }

  loadData = (value) => {
    const json = initFilter(this.props.login.OrgId)
    addRuleAndGroups(json, value)
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'EA/AdjustAccounts/GetWriteOffStatisticalData',
      payload: json,
      onlyData: false,
      onComplete: (re) => {
        if (re && re.IsSuccessful && re.Data && re.Data.nodes) {
          const { nodes, links, data } = re.Data
          const currState = {
            nodes,
            links,
            data
          }
          this.setState(currState)
        }
      }
    })
  }

  getOption = () => {
    const { nodes, links } = this.state

    let option = {
      tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove',
        formatter: "{b} :{c}%"
      },
      series: [
        {
          type: 'sankey',
          layout: 'none',
          nodeWidth: 200,//几点宽度
          data: nodes,
          links: links,
          focusNodeAdjacency: true,
          label: {
            position: ['20%', '50%']
          },
          itemStyle: {
            normal: {
              borderWidth: 1,
              borderColor: '#bbb'
            }
          },
          lineStyle: {
            normal: {
              curveness: 0.5
            }
          }
        }
      ]
    }
    return option;
  }

  render() {
    const { data } = this.state
    const { formId, formCode } = this.props

    const columns = [
      { title: '序号', dataIndex: 'Index' },
      { title: '核销节点', dataIndex: 'Name' },
      { title: '核销能耗（tce）', dataIndex: 'Value' },
      { title: '核销成本（万元）', dataIndex: 'Price' },
    ]

    return (
      <>
        <Search
          formId={formId}
          formCode={formCode}
          onSearch={this.handleSearch}
        />
        <LayoutCard style={{marginBottom: "0.2rem"}}>
          <ReactEcharts option={this.getOption()} style={{ height: 400 }} />
        </LayoutCard>
        <LayoutCard title='数据列表' >
          <Table
            id='EaWriteOffStatisticalPageExport'
            size='small'
            columns={columns}
            dataSource={data}
            style={{ marginTop: 10 }}
          />
        </LayoutCard>
      </>
    )
  }
}

EaWriteOffStatisticalPage.propTypes = {
}

export default connect(({ login, app, search }) => ({ login, app, search }))(Form.create()(EaWriteOffStatisticalPage))