import React, { Component, useState, useEffect } from 'react';
import echarts from 'echarts/lib/echarts';
import EChart from '@/components/EchartsTest/EChart';
import request from '@/utils/request';
import apis from '@/services/apis';
import moment from 'moment';
import router from 'umi/router';
import { Table, Select, Row, Col, Card, Dropdown, Button, Icon, message } from 'antd';

const formatDate = (start, end) => {
  const startDate = moment(start).format('YYYY-MM-DDT00:00:00.000') + 'Z';
  const endDate = moment(end).format('YYYY-MM-DDT23:59:59.999') + 'Z';
  return { startDate, endDate };
};
const SourceRole = props => {
  const [data, setData] = useState({ records: [] });
  const endDate = new Date();

  const startDate = moment()
    .subtract(7, 'day')
    .toDate();

  useEffect(() => {
    userResource(formatDate(startDate, endDate));
  }, []);

  function userResource(params) {
    request({
      ...apis.indexEcharts.userResource,
      params,
    }).then(data => {
      setData(data);
    });
  }
  const dataset = data || {};

  const { person_estate_agent = 0, person_null = 0, person_realty_consultant = 0 } =
    dataset.pie || {};

  const pieoptions = {
    color: ['#6B82E6', '#F02D40', '#FF834E'],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
    },
    legend: {
      orient: 'horizontal',
      left: 10,
      data: [`来源置业`, `来源客户`, `其他`],
    },
    // :${person_realty_consultant}:${person_estate_agent}${person_null}
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['45%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '30',
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: person_realty_consultant, name: '来源置业' },
          { value: person_estate_agent, name: '来源客户' },
          { value: person_null, name: '其他' },
        ],
        // data: [
        //     { '用户来源': '来源置业', value: person_realty_consultant, },
        //     { '用户来源': '来源客户', value: person_estate_agent },
        //     { '用户来源': '其他', value: person_null },
        // ]
      },
    ],
  };

  //   const pieoptions = {
  //     color: ['#6B82E6', '#F02D40', '#FF834E'],
  //     legend: {
  //       orient: 'vertical',
  //       x: 'left',
  //       data: ['来源置业', '来源客户', '其他'],
  //     },
  //     tooltip: {
  //       // trigger: 'item',
  //       // formatter: "{a} <br/>{b} : {c} ({d}%)"
  //     },
  //     series: [
  //       {
  //         name: '用户来源',
  //         type: 'pie',
  //         center: ['50%', '65%'],
  //         radius: ['25%', '40%'],
  //         label: {
  //           formatter: '{b} {@value}',
  //           emphasis: {
  //             show: true,
  //             formatter: '{d}%',
  //             textStyle: {
  //               fontSize: '22',
  //               fontWeight: 'bold'
  //             }
  //           },
  //         },
  //       },

  //     ],

  //     dataset: {
  //       id: 'pie',
  //       source: [
  //         { '用户来源': '来源置业', value: person_realty_consultant, },
  //         { '用户来源': '来源客户', value: person_estate_agent },
  //         { '用户来源': '其他', value: person_null },
  //       ]
  //     },
  //   }

  return (
    <Card title="来源角色" headStyle={{textAlign:'left'}}>
      <EChart options={pieoptions} styles={{ width: '100%' }} />
    </Card>
  );
};

export default SourceRole;
