import React, { Component, useState, useEffect } from 'react';

import EChart from '../../../components/EchartsTest/EChart';
import request from '../../../utils/request';
import apis from '../../../services/apis';
import dayjs from 'dayjs';
import router from 'umi/router';
import {Table, Select, Row, Col, Menu, Dropdown, Button, Icon, message } from 'antd';
// import UserSource from './mmm';


const UserSource = (props) => {

  const [data, setData] = useState({ records: [] })
  //柱图

  useEffect(() => {
    userResource()
  }, [])

  function userResource () {
    request({
      ...apis.indexEcharts.userResource,
      params: { pageNum: 1, pageSize: 9999 }
    }).then((data) => {
      // console.log(data , '3333')
      setData(data)
    })
  }

  function toEdit () {
    router.push({
      pathname: '/indexEcharts/userSource',
      // query: {
      //   a: 'b',
      // },
    });
  }

  const dataset = data || {};
  const source = dataset.columnar || [];

  // const source = this.dataset.columnar || [];
  const subtitle = '最近7天';
  const baroptions = {
    color: ['#286DD0', '#8565CE', '#6A96F8', '#F5749E', '#8B7FE2'],
    xAxis: { type: 'category' },
    legend: {
      left: '20%',
      data: ['所有用户', '注册用户'],
    },

    tooltip: {},

    yAxis: {},
    series: [
      { type: 'bar', name: '所有用户', datasetIndex: 0 },
      { type: 'bar', name: '注册用户' },
    ],
    dataset: {
      id: 'bar',
      dimensions: ['fromName', 'userCount', 'registered'],
      source: source,
    },

  }
  const { person_estate_agent = 0, person_null = 0, person_realty_consultant = 0 } = dataset.pie || {};
  const pieoptions = {
    // xAxis: {},
    color: ['#286DD0', '#8565CE', '#6A96F8', '#F5749E', '#8B7FE2'],
    legend: {
      // left: '70%',
      data: ['来源置业顾问', '来源全民经纪人', '自主进入'],
    },
    tooltip: {},
    // yAxis: {},

    series: [
      {
        type: 'pie',
        // datasetIndex: 1,
        center: ['50%', '50%'],
        radius: [0, '50%'],
      },
    ],
    dataset: {
      id: 'pie',
      source: [
        { form: '来源置业顾问', value: person_realty_consultant },
        { form: '来源全民经纪人', value: person_estate_agent },
        { form: '自主进入', value: person_null },
      ]
    },





  }
  function handleSelectChange (e) {
    // eslint-disable-next-line no-console
    console.log(e)
  }

  //表格
  const dataSource = [
    {
      name: '置业顾问',
      status: '1',//显示停用
    },
    {
      name: '置业经理',
      status: '1',//停用
    },
  ];

  const columns = [
    // {
    //   title: '商品图片',
    //   dataIndex: 'img',
    //   key: 'img',
    //   align: 'center',
  
    //   render: (text, record) => <img src={record.img} className={channels.touxiang} />,
    // },
    {
      title: '角色名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      render: text => <a>{text}</a>,
    },
  
    {
      title: '操作  ',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
  
      render: () => <>11</>
       
    },
  ];

  const style = {
    width: '100%',
    height: '400px',

  }
  const styles = {
    width: '100%',
    height: '400px',

  }


  return (
    <>
      <div>
        <h3>用户来源 <small>{subtitle}</small></h3>
        <Row>
          <Col span={16}>
            <EChart options={baroptions} style={style} /></Col>
          <Col span={8}>
            <EChart options={pieoptions} style={styles} /></Col>
        </Row>
      </div>
      <Select style={{ width: '180px' }} placeholder="所有用户" onChange={handleSelectChange}>
        <Option value={0}>所有用户</Option>
        <Option value={1}>注册用户</Option>
      </Select>


      <Table dataSource={dataSource} columns={columns} />

    </>
  )
}

export default UserSource;