import React, { useState, useEffect } from 'react'
import { connect } from 'dva'
import { Progress, Empty } from 'antd'
import { $consts } from '../../../plugins'
import { toFixed } from '../../../utils/common'

const strokeColors = [
  {
    '0%': '#007CE6',
    '100%': '#00FCFF'
  },
  {
    '0%': '#18C2B2',
    '100%': '#8CD870'
  },
  {
    '0%': '#9361F9',
    '100%': '#5700E8'
  },
  {
    '0%': '#F6FAAF',
    '100%': '#D3AA3A'
  }
]

const TopConsume = (props) => {
  const [data, setData] = useState({
    columns: [],
    dataSource: []
  })

  useEffect(() => {
    const getData = () => {
      const { OrgId } = props.login
      if (OrgId) {
        props.dispatch({
          type: 'app/getDataByPost',
          url: 'KR/DynamicData/RankingData',
          payload: { OrgId }
        }).then(res => {
          setData(res[0])
        })
      }
    }
    getData()
    let timer = setInterval(getData, $consts['COMMON/REQUEST_INTERVAL_TIME'])
    return () => { clearInterval(timer) }
  }, [props.login.OrgId])

  return (
    <div className='overview__box-middle' style={{ marginBottom: 20 }}>
      <div className='overview__table'>
        <div className='th'>
          {
            data.columns.map((item, index) => {
              return <div key={`${item.key}_${index}`} className='row'>{item.title}</div>
            })
          }
          <div className='row' />
        </div>
        {
          data.dataSource.map((item, index) => {
            return (
              <div key={`${item.Name}_${index}`} className='td'>
                {
                  data.columns.map((dc, dcIndex) => {
                    const val = item[dc.dataIndex]
                    if (dc.dataIndex === 'Ratio') {
                      const percent = Number(val) * 100
                      const maxPercent = Number(data.dataSource[0].Ratio)
                      return (
                        <React.Fragment key={`${val}_${dcIndex}`}>
                          <div title={toFixed(percent, 0) + '%'} className='row'>
                            <Progress
                              strokeColor={strokeColors[index % 4]}
                              percent={toFixed(percent / maxPercent, 0)}
                              trailColor='transparent'
                              showInfo={false}
                            />
                          </div>
                          <div className='row'>{toFixed(percent, 0) + '%'}</div>
                        </React.Fragment>
                      )
                    }
                    return <div key={`${val}_${dcIndex}`} title={val} className='row'>{val}</div>
                  })
                }
              </div>
            )
          })
        }
        {
          !data.dataSource.length
            ? (
              <Empty
                image={Empty.PRESENTED_IMAGE_SIMPLE}
                description='暂无数据'
                style={{ color: '#ffffff', margin: 0 }}
              />
            )
            : null
        }
      </div>
    </div>
  )
}

export default connect(({ login }) => ({ login }))(TopConsume)