/** 资质考试 */
import { AlignLeftOutlined, PlusOutlined } from '@ant-design/icons';
import { Switch, Button, Card, Col, List, Menu, Progress, Row, Typography, Space, Divider, Radio, Checkbox } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { useParams, useRequest } from 'umi';
import { queryFakeList } from '../service';
import type { CardListItemDataType } from '../data';
import styles from './style.less';
import SubMenu from 'antd/lib/menu/SubMenu';
import ProCard from '@ant-design/pro-card';

const { Paragraph } = Typography;

const CardList = () => {
  const params = useParams();
  const { data, loading } = useRequest(() => {
    return queryFakeList({
      count: params.rules_id,
    });
  });

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

  const content = (
    <div className={styles.pageHeaderContent}>
      <p>
        试卷信息：XXXXXXXX
      </p>
    </div>
  );



  const numbers = [];
  for (let i = 0; i < 50; i++) {
    numbers.push({ id: `${i}` })
  }
  return (
    <PageContainer content={content} extraContent={false}>
      <Row>
        <Col span={6} style={{ paddingRight: 24 }}>
          <ProCard
            title="题号列表"
            bordered
            headStyle={{ padding: 24, border: '#d9d9d9 solid 1px' }}
          >
            <List
              header={<div>一. 单选题</div>}
              footer={false}
              bordered
              dataSource={numbers}
              renderItem={item => (
                <List.Item>
                  <Typography.Text mark={item.id === '3' ? false : true}><span className="number">{item.id}</span></Typography.Text>
                </List.Item>
              )}
              style={{ background: '#ffffff', margin: '-25px -24px 0 -24px' }}
            />
            <List
              header={<div>二. 多选题</div>}
              footer={false}
              bordered
              dataSource={numbers}
              renderItem={item => (
                <List.Item>
                  <Typography.Text mark={item.id === '3' ? false : true}><span className="number">{item.id}</span></Typography.Text>
                </List.Item>
              )}
              style={{ background: '#ffffff', margin: '-1px -24px' }}
            />
            <List
              header={<div>三. 判断题</div>}
              footer={false}
              bordered
              dataSource={numbers}
              renderItem={item => (
                <List.Item>
                  <Typography.Text mark={item.id === '3' ? false : true}><span className="number">{item.id}</span></Typography.Text>
                </List.Item>
              )}
              style={{ background: '#ffffff', margin: '-1px -24px -24px -24px' }}
            />
          </ProCard>
        </Col>
        <Col span={13} style={{ background: '#ffffff', padding: 0 }}>
          <ProCard
            title="一. 单选题 （共50分，每题1分）"
            extra={false}
            split='vertical'
            bordered
            headerBordered
          >
            <Space direction="vertical" style={{ width: '100%', padding: '24px 48px' }}>

              <Typography style={{ marginBottom: 16, fontSize: 18 }}>
                4. 以下哪些是符合法律规定的 ？
              </Typography>
              <Radio.Group onChange={() => { return true }} value={0} size="large">
                <Space direction="vertical" style={{ fontSize: 16 }}>
                  <Radio value={1} style={{ padding: 5, fontSize: 16 }}>A. 单位在试用期辞退员工</Radio>
                  <Radio value={2} style={{ padding: 5, fontSize: 16 }}>B. 社会中介收取中介费</Radio>
                  <Radio value={3} style={{ padding: 5, fontSize: 16 }}>C. 单位不缴纳五险一金</Radio>
                  <Radio value={4} style={{ padding: 5, fontSize: 16 }}>D. 要求员工支付押金</Radio>
                </Space>
              </Radio.Group>

              <Typography style={{ marginBottom: 16, fontSize: 18 }}>
                5. 以下哪些是不符合法律规定的(多选) ？
              </Typography>
              <Checkbox.Group onChange={() => { return true }}>
                <Space direction="vertical" style={{}}>
                  <Checkbox value={1} style={{ padding: 5, fontSize: 16 }}>A. 单位在试用期辞退员工</Checkbox>
                  <Checkbox value={2} style={{ padding: 5, fontSize: 16 }}>B. 社会中介收取中介费</Checkbox>
                  <Checkbox value={3} style={{ padding: 5, fontSize: 16 }}>C. 单位不缴纳五险一金</Checkbox>
                  <Checkbox value={4} style={{ padding: 5, fontSize: 16 }}>D. 要求员工支付押金</Checkbox>
                </Space>
              </Checkbox.Group>

              <Typography style={{ marginBottom: 16, fontSize: 18 }}>
                6. 单位在试用期辞退员工是符合法律规定的 ？
              </Typography>
              <Radio.Group onChange={() => { return true }} value={0} size="large">
                <Space direction="vertical" style={{ fontSize: 16 }}>
                  <Radio value={1} style={{ padding: 5, fontSize: 16 }}>正确</Radio>
                  <Radio value={2} style={{ padding: 5, fontSize: 16 }}>错误</Radio>
                </Space>
              </Radio.Group>
            </Space>
          </ProCard>
        </Col>
        <Col span={5} style={{ paddingLeft: 24 }}>
          <div style={{ background: '#ffffff', padding: 24 }}>
            <Space direction="vertical" style={{ width: '100%' }}>
              <strong>剩余时间</strong>
              <Typography>6分14秒</Typography>
              <Divider style={{ margin: '6px 0', opacity: 0.5 }} />
              <strong>答题序号</strong>
              <Typography>14/80</Typography>
              <Divider style={{ margin: '6px 0', opacity: 0.5 }} />
              <Button size="large" block>上一题</Button>
              <Button size="large" block>下一题</Button>
              <Button size="large" type="primary" block>提交答卷</Button>
            </Space>
          </div>
        </Col>
      </Row>
    </PageContainer>
  );
};

export default CardList;
