/** 试题答案选项添加/编辑*/
//import { AlignLeftOutlined, PlusOutlined } from '@ant-design/icons';
import { Switch, Button, Card, Col, List, Menu, Progress, Row, Typography, Space, Divider, Radio, Checkbox, Tag, Dropdown, Upload, Modal, Form, Input } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
//import { 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';
import ProList from '@ant-design/pro-list';
import { ReactText, useEffect, useRef, useState } from 'react';
import { PlusOutlined, DeleteOutlined, DownloadOutlined, UploadOutlined, EditOutlined, EyeOutlined, EyeInvisibleOutlined, DownOutlined, MinusCircleOutlined } from '@ant-design/icons';
import { useParams, useRequest, history, useRouteMatch } from 'umi';
import { queryCourseView } from '@/pages/course/option/service';
import { queryQuestionById, queryQuestionList, queryQuestionType } from '@/pages/questionbank/service';
import ProForm, { ProFormSelect } from '@ant-design/pro-form';
import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';

const labels = ['A','B','C','D','E','F','G','H','I','J']; // 默认10个

//const { Paragraph } = Typography;
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 20 },
  },
};
const formItemLayoutWithOutLabel = {
  wrapperCol: {
    xs: { span: 24, offset: 0 },
    sm: { span: 20, offset: 4 },
  },
};
console.log('first');
const AnswersSelector = (props) => {
  const {type,num} = props;
  console.log('num',num)
  return (
    <Form.List
        initialValue={type === 2 ? ['正确','错误'] : ['','','','']}
        name="answers"
        rules={[
          {
            validator: async (_, names) => {
              if (!names || names.length < 2) {
                return Promise.reject(new Error('至少填写2个选项'));
              }
            },
          },
        ]}
      >
        {(fields, { add, remove }, { errors }) => (
          <>
            {fields.map((field, index) => (
              <Form.Item
                label={labels[index]}
                required={false}
                key={field.key}
              >
                <Form.Item

                  {...field}
                  validateTrigger={['onChange', 'onBlur']}
                  rules={[
                    {
                      required: true,
                      whitespace: true,
                      message: "选项不能为空",
                    },
                  ]}
                  noStyle
                >
                  <Input placeholder="" maxLength="100" style={{ width: '80%' }} />
                </Form.Item>
                {(fields.length > 1) && (type !== 2) &&
                  <MinusCircleOutlined
                    className="dynamic-delete-button"
                    onClick={() => remove(field.name)}
                  />
                }
              </Form.Item>
            ))}
            { (type !== 2) &&
            <Form.Item>
              <Button
                type="dashed"
                disabled={num>=10 ? true : false}
                onClick={() => {
                  add()
                  console.log('fields',fields)
                }}
                style={{ marginLeft: 22, width: '60%' }}
                icon={<PlusOutlined />}
              >
                添加选项
              </Button>
              <Form.ErrorList errors={errors} />
            </Form.Item>
            }
          </>
        )}
      </Form.List>

  );
};

export default AnswersSelector;
