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 { querySubjectList,listMyLearningSubject } from './service';
import type { SubjectListItemDataType } from './data.d';
import styles from './style.less';
import NumberInfo from './components/NumberInfo';
import cookie from 'react-cookies';
const { Paragraph } = Typography;
import { useEffect, useRef, useState } from 'react';
const SubjectList = () => {
  const [list,setList]=useState([]);
  /** 获取主题列表数据 */
  const { data, loading } = useRequest(() => {
    return listMyLearningSubject({
      identity_id: cookie.load('identity_id'),
      person_id:cookie.load('person_id')
    });
  },{
    onSuccess:(result)=>{

      if(result.length){
          result.forEach((item)=>{
            item.startTime=item.learning_start_time.split(' ')[0]
            item.endTime=item.learning_end_time.split(' ')[0]
            if(item.distance_end_time.split('天')[1]!==undefined){
              item.distanceTime=item.distance_end_time.split('天')[0]
            }else{
              item.distanceTime=0;
            }

          })
      }
      setList(result)
      console.log('result9999',result)
  }
  });


  return (
    <PageContainer content={false} 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: SubjectListItemDataType) => {
            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}}>学习开始时间：{item?.startTime}</span>
                    <span style={{padding:10}}>距离结束时间：{item?.distanceTime}天</span>
                    <span style={{padding:10}}>学习结束时间：{item?.endTime}</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 }}>
                              {/*{item.subject_describe}*/}
                              <div dangerouslySetInnerHTML={{__html:item.subject_describe}}/>
                            </Paragraph>
                          </Card.Grid>
                          <Card.Grid hoverable={false} style={{width:'30%',textAlign:'center'}}>
                            <Progress type="circle"
                                      percent={item?parseInt(item.subject_learning_progress):0}
                                      format={(percent) => percent === 100 ? '100%' : `${percent}%`}
                            />
                          </Card.Grid>
                          <Card.Grid hoverable={false} style={{width:'20%',textAlign:'center'}}>
                            <Button type="primary" onClick={()=>{
                              const info=item.data_id+','+item.data_type+','+item.subject_id;
                              history.push( '/course/list/'+info);
                            }}>去学习</Button>
                          </Card.Grid>
                        </>
                      }
                    />
                  </Card>
                </List.Item>
              );
            }
          }}
        />
      </div>
    </PageContainer>
  );
};

export default SubjectList;
