/** 
 * 资质考试自动组卷
 */

//import { AlignLeftOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Col, InputNumber, message, Row } from 'antd';
//import { FooterToolbar, 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 { forwardRef, ReactText, useEffect, useImperativeHandle, useRef, useState } from 'react';
//import { PlusOutlined, DeleteOutlined, DownloadOutlined, UploadOutlined, EditOutlined, EyeOutlined, EyeInvisibleOutlined, DownOutlined } from '@ant-design/icons';
import { useParams, useRequest, history, useRouteMatch } from 'umi';
import { queryCourseView } from '@/pages/course/option/service';
import { queryQuestionList, queryQuestionType } from '@/pages/questionbank/service';
//import ProForm, { ProFormSelect } from '@ant-design/pro-form';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { manualPaper } from '../service';

export type TableListItem = {
  id: string;
  code: number;
  name: string;
  creator: string;
  status: string;
  createdAt: number;
  progress: number;
  money: number;
  memo: string;
};


// 资质考试自动组卷
// React.forwardRef 接受渲染函数作为参数。React 将使用 props 和 ref 作为参数来调用此函数。此函数应返回 React 节点。
const AutoSelector = (props: any, ref: any) => {
  const { questionType } = props;

//  const actionRef = useRef<ActionType>();
  const [questionCount, setQuestionCount] = useState([50,50]) // 题库抽取数量
  const [questionTypeCount, setQuestionTypeCount] = useState(questionType.map(()=>(0))) // 题型抽取数量
  
  const [normalQuestionSum, setNormalQuestionSum] = useState(0) // 常规题库试题数量
  const [attestationQuestionSum, setAttestationQuestionSum] = useState(0) // 资质考试题库试题数量

  const match = useRouteMatch();
  console.log('match', match);

  //const type = history.location.pathname === '/questionbank/attestation' ? 1 : 0 ; // 题库类型
  //const [questionType, setQuestionType] = useState([]);
  //const [selectedRowsState, setSelectedRows] = useState<API.RuleListItem[]>([]);
  //const [addType, setAddType] = useState({name: '', value: 0});

  /** 获取常规题库试题数量 */
  const { data: normalSum } = useRequest(()=>{
    return queryQuestionList({page_number: 1, page_size: 1, type: 0})
  },{
    formatResult: (result) => {
      return result.totalRow;
    }
  });

  /** 获取资质考试题库试题数量 */
  const { data: attestationSum } = useRequest(()=>{
    return queryQuestionList({page_number: 1, page_size: 1, type: 1})
  },{
    formatResult: (result) => {
      return result.totalRow;
    }
  });

  useEffect(() => {
    setNormalQuestionSum(normalSum);
    setAttestationQuestionSum(attestationSum);
  }, [ normalSum, attestationSum]);

  // 暴露组件的方法 接受外部获取的ref
  useImperativeHandle(ref, () => ({
    // 构造ref的获取数据方法
    getData: () => { // 组卷
      return {questionCount, questionTypeCount};
    },
  }));

  return (
    <>
    <Row><Col style={{padding:10}}>题库选择</Col></Row>
    <Row style={{padding:5}}>
      <Col offset={1} span={5}>{`常规题库 ( ${normalQuestionSum} 道题)`}</Col>
      <Col offset={1} span={10}>抽取比例: <InputNumber defaultValue={50} style={{textAlign:'center'}} value={questionCount[0]} onChange={(value)=>{
            setQuestionCount([value, 100 - value])
          }} /> %</Col>
    </Row>
    <Row style={{padding:5}}>
      <Col offset={1} span={5}>{`资质考试题库 ( ${attestationQuestionSum} 道题)`}</Col>
      <Col offset={1} span={10}>抽取比例: <InputNumber defaultValue={50} style={{textAlign:'center'}} value={questionCount[1]} onChange={(value)=>{
            setQuestionCount([100 - value, value])
          }} /> %</Col>
    </Row>

    <Row><Col style={{padding:10}}>题型选择</Col></Row>
    { questionType && questionType.map((item, index)=>{
        return <Row style={{padding:5}}>
          <Col offset={1} span={2}>{`${item?.name}`}</Col>
          <Col offset={1} span={10}><InputNumber defaultValue={0} style={{textAlign:'center'}}  onChange={(value)=>{
            const _data = [];
            questionTypeCount.forEach((val, key) => {
              _data.push(index === key ? value : val)
            });
            setQuestionTypeCount(_data)
          }} /> 题</Col>
        </Row>
      }
    )}
  </>
  );
};
// forwardRef这个组件能够将其接受的 ref 属性转发到其组件树下
export default forwardRef( AutoSelector );