import { PlusOutlined } from '@ant-design/icons';
import { Button, Card, List, Progress, Typography, Image } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { useRequest, history } from 'umi';
import { listMyLearningSubject } from './service';

import styles from './style.less';
import NumberInfo from './components/NumberInfo';
import cookie from 'react-cookies';
const { Paragraph } = Typography;

const SubjectList = () => {
  /** 获取主题列表数据 */
  const { loading: subjectListLoading, data: subjectList = [] } = useRequest(
    () => listMyLearningSubject(
      {
        identity_id: cookie.load('identity_id'),
        person_id: cookie.load('person_id')
      }));
  console.log(subjectList);

  return (
    <PageContainer content={false} extraContent={false}>
      <div className={styles.cardList}>
        <List
          rowKey="id"
          loading={subjectListLoading}
          grid={{
            gutter: 16,
            xs: 1,
            sm: 1,
            md: 1,
            lg: 1,
            xl: 1,
            xxl: 1,
          }}
          dataSource={subjectList}
          renderItem={(item: SubjectListItemDataType) => {
            if (item && item.subject_id) {
              return (
                <List.Item key={item?.subject_id}>
                  <Card
                    title={<a>{item?.subject_name}</a>}
                    hoverable={false}
                    className={styles.card}
                    actions={[]}
                  // extra={<><span style={{ padding: 10 }}>开始学习时间:{item?.learning_start_time}</span><span style={{ padding: 10 }}>距离结束时间：{item?.distance_end_time}</span><span style={{ padding: 10 }}>考核学时：{item?.total_course_hours}小时</span></>}
                  >
                    <Card.Meta
                      avatar={<Image preview={false} width={200} height={150} src={`/dsideal_yy/html/${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 }}>
                              <div dangerouslySetInnerHTML={{ __html: item.subject_describe }} />
                            </Paragraph>
                          </Card.Grid>
                          {/*<Card.Grid hoverable={false} style={{ width: '30%', textAlign: 'center' }}><Progress type="circle" percent={item?.subject_learning_progress * 100} /></Card.Grid>*/}
                          <Card.Grid hoverable={false} style={{ width: '50%', textAlign: 'right' }}>
                            <Button type="primary" onClick={() => {
                              const info = item.data_id + ',' + item.data_type + ',' + item.subject_id;
                              history.push(`/mockExamination/chapterExamination/chapterList/${item.data_id}/${item.data_type}/${item.subject_id}`);
                            }}>去学习</Button>
                          </Card.Grid>
                        </>
                      }
                    />
                  </Card>
                </List.Item>
              );
            }
          }}
        />
      </div>
    </PageContainer>
  );
};

export default SubjectList;
