// 核心库
import React from 'react'
import { connect } from 'dva'
// 组件库
import { Form, Row, Col, Table, Progress } from 'antd'
import { FullDatePicker, LayoutCard } from '@woowalker/feui'
import { LocalSearch } from '@woowalker/feui'
// 工具库
import moment from 'moment'
// 样式
import '../../BoardPages/DashBoard/index.less'

const { DashboardCard } = LayoutCard

class BDDataQualityPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      dateType: '0',
      dateString: moment().format('YYYY'),
      dataSource: [],
      statisticalDatas: [],
      energyTypeDatas: []
    }
  };

  componentDidMount() {
    this.getMonitorData()
  }

  handleSearch = () => {
    this.getMonitorData()
  };

  getMonitorData = () => {
    const json = {
      OrgId: this.props.login.OrgId,
      Parameter1: this.state.dateType,
      Parameter2: this.state.dateString,
    }

    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'BD/BDDataQuality/GetDataQualityData',
      payload: json,
      onlyData: false,
      onComplete: (re) => {
        if (re && re.IsSuccessful && re.Data) {
          const { dataSource, statisticalDatas, energyTypeDatas } = re.Data
          this.setState({
            dataSource,
            statisticalDatas,
            energyTypeDatas
          })
        }
      }
    })
  };

  render() {
    const columns = [
      { title: '器具名称', dataIndex: 'Name' },
      { title: '数据总量', dataIndex: 'TOTAL' },
      { title: '修复数量', dataIndex: 'REPAIR' },
      { title: '修复比例（%）', dataIndex: 'RepairRatio' },
      { title: '离线数量', dataIndex: 'OFFLINE' },
      { title: '离线比例（%）', dataIndex: 'OfflineRatio' },
    ]

    const { dateType, dateString, dataSource, statisticalDatas, energyTypeDatas } = this.state
    return (
      <div className='bd-page__monitor'>
        <LocalSearch onSearch={this.handleSearch}>
          <FullDatePicker
            dateType={dateType}
            dateString={dateString}
            onlyItem
            onChange={({ dateString, dateType }) => this.setState({ dateString, dateType })}
          />
        </LocalSearch>
        <Row gutter={24}>
          <Col span={18}>
            <div className='dashboard__gradient-wrap'>
              {
                statisticalDatas ? statisticalDatas.map((item, index) => {
                  return (
                    <DashboardCard
                      key={'BD-DataQuality-DashboardGradientCard' + index}
                      title={item.Name}
                      iconType={item.Icon}
                      colors={item.Colors}
                    >
                      <span>{item.Value}</span>
                      {
                        item.Value2 ? <span>（未接入{item.Value2}）</span> : null
                      }
                    </DashboardCard>
                  )
                }) : null
              }
            </div>
            <LayoutCard style={{ marginTop: '0.15rem' }}>
              {
                dataSource.length ? <Table
                  size='small'
                  columns={columns}
                  dataSource={dataSource}
                  style={{ marginTop: '0.15rem' }}
                />
                  : null
              }
            </LayoutCard>
          </Col>
          <Col span={6}>
            {
              energyTypeDatas ? energyTypeDatas.map((item, index) => {
                return (
                  <LayoutCard style={{ marginBottom: '0.15rem' }}>
                    <h2 className='dashboard__process-title' style={{ marginBottom: '0.15rem' }}>{item.Name}</h2>
                    <div className='dashboard__sysinfo' style={{ marginBottom: '0.15rem' }}>
                      <div className='dashboard__sysinfo-title'>
                        <span>修复比例</span>
                        <span>{item.Value} %</span>
                      </div>
                      <Progress
                        showInfo={false}
                        strokeColor={{
                          '0%': '#9593fd',
                          '100%': '#6e9ade',
                        }}
                        percent={Number(item.Value)}
                      />
                    </div>
                    <div className='dashboard__sysinfo' style={{ marginBottom: '0.15rem' }}>
                      <div className='dashboard__sysinfo-title'>
                        <span>离线比例</span>
                        <span>{item.Value2} %</span>
                      </div>
                      <Progress
                        showInfo={false}
                        strokeColor={{
                          '0%': '#0bd0a5',
                          '100%': '#13c5c7',
                        }}
                        percent={Number(item.Value2)}
                      />
                    </div>
                  </LayoutCard>
                )
              }) : null
            }
          </Col>
        </Row>
      </div>
    )
  }
}

BDDataQualityPage.propTypes = {
}

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