import { Card, Col, Row, Tabs } from 'antd';
import { DualAxes } from '@ant-design/plots';

import styles from '../style.less';
// import { useRequest } from 'react';
import { getCredentialPersonStatistics } from '../service';
import cookie from 'react-cookies';
import { useRequest } from 'umi';
export type TimeType = 'today' | 'week' | 'month' | 'year';


const { TabPane } = Tabs;
// const credentialPersonStatistics = await getCredentialPersonStatistics({
//   province_id: cookie.load('background_province_id')
// });


const SalesCard = () => {
  const { loading: courseBrowseTimesLoading, data: credentialPersonStatistics = null } = useRequest(() => getCredentialPersonStatistics({
    province_id: cookie.load('background_province_id')
  }), {
    formatResult: (result) => {
      return result.list;
    }
  });

  const data = []
  // console.log(credentialPersonStatistics, 'credentialPersonStatistics')

  credentialPersonStatistics?.map((e, i) => {

    data.push({
      city: e.city_name,
      count: e.count,
      credential_rate: e.credential_rate?e.credential_rate:0
    })
  })

  const config = {
    data: [data, data],
    xField: 'city',
    yField: ['count', 'credential_rate'],
    yAxis: [{
      title: {
        text: '资质证书人数',
      },
    }, {
      title: {
        text: '证书比例',
      },
      label: {
        formatter: (val) => `${val}%`,
      },
    }],
    tooltip: {
      customContent: (title, items) => {
        return (
          <>
          <h5 style={{ marginTop: 16 }}>{title}</h5>
          <ul style={{ paddingLeft: 0 }}>
            {items?.map((item, index) => {
              const { name, value, color } = item;
              return (
              <li
              key={item.year}
              className="g2-tooltip-list-item"
              data-index={index}
              style={{ marginBottom: 4, display: 'flex', alignItems: 'center' }}
              >
              <span className="g2-tooltip-marker" style={{ backgroundColor: color }}></span>
              <span
              style={{ display: 'inline-flex', flex: 1, justifyContent: 'space-between' }}
              >
              <span style={{ margiRight: 16 }}>{name}:&nbsp;&nbsp;&nbsp;</span>
              <span className="g2-tooltip-list-item-value">{value}{index===0?'':'%'}</span>
              </span>
              </li>
              );
            })}
          </ul>
          </>
        );
      },
    },
    geometryOptions: [
      {
        geometry: 'column',
      },
      {
        geometry: 'line',
        lineStyle: {
          lineWidth: 2,
        },
      },
    ],
    meta: {
      city: {
        alias: '类别',
      },
      count: {
        alias: '资质证书人数',
      },
      credential_rate: {
        alias: '证书比例',
      },
    }
  };
  return (<Card bordered={false} bodyStyle={{ padding: 0, marginBottom: '24px' }}>
    <div className={styles.salesCard}>
      <Tabs
        size="large"
        tabBarStyle={{ marginBottom: 24 }}
      >
        <TabPane tab="各市州资质证书情况" key="train">
          <Row>
            <Col xl={24} lg={24} md={24} sm={24} xs={24}>
              <div className={styles.salesBar} style={{marginRight:'2rem'}}>
                <DualAxes {...config} />

              </div>
            </Col>
          </Row>
        </TabPane>

      </Tabs>
    </div>
  </Card>
  )
};

export default SalesCard;