import { PlusOutlined } from '@ant-design/icons';
import { Button, Card, List, Progress, Typography, Image } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { useRequest } from 'umi';
import { querySubjectList } from './service';
import type { SubjectListItemDataType } from './data.d';
import styles from './style.less';
import { Pie } from '@ant-design/charts';
import NumberInfo from './components/NumberInfo';

const { Paragraph } = Typography;
const pie = [
  {
    type: '分类一',
    value: 27,
  },
  {
    type: '分类二',
    value: 25,
  },
  {
    type: '分类三',
    value: 18,
  },
  {
    type: '分类四',
    value: 15,
  },
  {
    type: '分类五',
    value: 10,
  },
  {
    type: '其他',
    value: 5,
  },
];
const config = {
  visible: true,
  appendPadding: 10,
  pie,
  angleField: 'value',
  colorField: 'type',
  radius: 1,
  innerRadius: 0.6,
  label: {
    type: 'inner',
    offset: '-50%',
    content: '{value}',
    style: {
      textAlign: 'center',
      fontSize: 14,
    },
  },
  interactions: [
    {
      type: 'element-selected',
    },
    {
      type: 'element-active',
    },
  ],
  statistic: {
    title: false,
    content: {
      style: {
        whiteSpace: 'pre-wrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
      },
      content: 'AntV\nG2Plot',
    },
  },
};

const SubjectList = () => {
  /** 获取主题列表数据 */
  const { data, loading } = useRequest(() => {
    return querySubjectList({
      count: 10,
    });
  });

  const list = data?.list || [];

  const content = (
    <div className={styles.pageHeaderContent}>
      <p>
        段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，
        提供跨越设计与开发的体验解决方案。
      </p>
    </div>
  );

  return (
    <PageContainer content={content} extraContent={false}>
      <div className={styles.cardList}>
        <List
          rowKey="id"
          loading={loading}
          grid={{
            gutter: 16,
            xs: 1,
            sm: 1,
            md: 1,
            lg: 1,
            xl: 1,
            xxl: 1,
          }}
          dataSource={list}
          renderItem={(item) => {
            if (item && item.subject_id) {
              return (
                <List.Item key={item.subject_id}>
                  <Card
                    title={<a>{item.subject_name}</a>}
                    hoverable
                    className={styles.card}
                    actions={[]}
                    extra={<><span style={{padding:10}}>开始学习时间: 2020-4-9</span><span style={{padding:10}}>距离结束时间：300天</span><span style={{padding:10}}>考核学时：{item.attachment_json.url}学时</span></>}
                  >
                    <Card.Meta
                      avatar={<Image preview={false} width={200} height={150} src={`${item.attachment_json.url}`} fallback="../fallback.svg" />}
                      title={false}
                      description={
                        <>
                          <Card.Grid hoverable={false} style={{width:'50%',padding:0}}>
                            <Paragraph className={styles.item} ellipsis={{ rows: 4 }}>
                              {item.subject_describe}
                            </Paragraph>
                          </Card.Grid>
                          <Card.Grid hoverable={false} style={{width:'30%',textAlign:'center'}}><Progress type="circle" percent={75} /></Card.Grid>
                          <Card.Grid hoverable={false} style={{width:'20%',textAlign:'center'}}><Button type="primary">去学习</Button></Card.Grid>
                        </>                      
                      }
                    />
                  </Card>
                </List.Item>
              );
            }
          }}
        />
      </div>
    </PageContainer>
  );
};

export default SubjectList;
