//import { InfoCircleOutlined } from '@ant-design/icons';
import { Column } from '@ant-design/charts';
import { Col, Row, } from 'antd';

import numeral from 'numeral';
import { ChartCard, } from './Charts';
// import type { SubjectAndCourseNumberStatistics } from '../data.d';
//import styles from '../style.less';
import { useRequest } from 'umi';
import { subjectAndCourseNumberStatistics, trainNumberBySubjectStatistics } from '../service';

const IntroduceRow = () => {
  const { loading: subjectAndCourseLoading, data: subjectAndCourseData = null } = useRequest(subjectAndCourseNumberStatistics); // 主题数、课程数统计
  const { loading: trainNumberBySubjectLoading, data: trainNumberBySubjectData = null } = useRequest(trainNumberBySubjectStatistics); // 主题数、课程数统计
  console.log('subjectAndCourseData::', subjectAndCourseData);
  console.log('trainNumberBySubjectData::', trainNumberBySubjectData);
  return (
    <Row gutter={24}>
      <Col xs={6} sm={6} md={6} lg={6} xl={6}>
        <ChartCard
          bordered={false}
          loading={subjectAndCourseLoading}
          title="主题数"
          action={false}
          total={numeral(subjectAndCourseData?.subject_numbers || 0).format('0,0')}
          footer={false}
          //contentHeight={150}
          style={{ flex: 1, marginBottom: 24, height: 120 }}
        />
        <ChartCard
          bordered={false}
          loading={subjectAndCourseLoading}
          title="课程数"
          action={false}
          total={numeral(subjectAndCourseData?.course_numbers || 0).format('0,0')}
          footer={false}
          //contentHeight={150}
          style={{ flex: 1, marginBottom: 24, height: 120 }}
        />
      </Col>
      <Col xs={18} sm={18} md={18} lg={18} xl={18}>
        <ChartCard
          bordered={false}
          loading={trainNumberBySubjectLoading}
          title="培训情况"
          action={false}
          total={false}
          footer={false}
          // contentHeight={300}
          style={{ marginBottom: 24 }}
        >
          <Column
            height={202}
            forceFit
            data={trainNumberBySubjectData?.subject_train_list || [] as any}
            xField="subject_name"
            yField="train_number"

            tooltip={{
              formatter: (name, value: number) => {
                // const {name, value} = args;
                console.log('args', name)
                return { name: '关联培训数量', value: value };
              }
            }}
            xAxis={{
              visible: true,
              title: {
                text: '主题名称',
                visible: false,
              },
              label: {
                interval: 0,//横轴信息全部显示  
                rotate: 0.3,//-30度角倾斜显示 \
                autoEllipsis: true,
                style: {
                  textAlign: 'left'
                }
              }
            }}
            yAxis={{
              visible: true,
              title: {
                text: '数量',
                visible: false,
              },
            }}
            title={{
              visible: false,
              style: {
                fontSize: 14,
              },
            }}

          />
        </ChartCard>
      </Col>
    </Row>
  );
}
export default IntroduceRow;