/** 
 * 模拟考试自动组卷 
 */

//import { AlignLeftOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Form, Input, InputNumber, message } 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 { ActionType, EditableProTable, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { manualPaper } from '../service';
import ProCard from '@ant-design/pro-card';
import { ProFormField } from '@ant-design/pro-form';
//import dataSource from 'mock/dataSource';
import { queryListChapterBySubject } from '@/pages/course/subject/service';

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

type DataSourceType = {
  id: React.Key;
  title?: string;
  decs?: string;
  state?: string;
  created_at?: string;
  children?: DataSourceType[];
};

// 需要处理
// React.forwardRef 接受渲染函数作为参数。React 将使用 props 和 ref 作为参数来调用此函数。此函数应返回 React 节点。
const AutoSelector = (props: any, ref: any) => {
  const formRef = useRef()
  /** 获取章节数据 */
  // 获取主题id
  console.log('props ==', props)
  const { subjectId, questionType } = props;
  console.log('questionType', questionType)
  const [rows, setRows] = useState([]) ; // 章节

  //const [dataSource, setDataSource] = useState<DataSourceType[]>(() => defaultData);

  const columns: ProColumns<DataSourceType>[] = [
    {
      title: '章节',
      dataIndex: 'chapter_name',
      width: '40%', 
      /*    
      renderFormItem: ( item, { defaultRender, ...rest }, form) => {
        return item?.entry?.title;
      },*/
    },
  ];

  /* 动态设置题型列 */
  questionType?.forEach((item, idx)=>{
    columns.push({
      title: <>{item?.name} <Form.Item style={{margin:0}} name={['type',idx,'sum']}><Input type='text' defaultValue={0} onInput={(e)=>{

      }}
      onChange={(e)=>{
        const val = e.currentTarget.value;
        console.log('onchange==', val)
        const values = formRef?.current.getFieldsValue()
        console.log('values', values)
        const { questionType } = values;
        const avg = val / questionType[idx].length // 平均数
        const rem = val % questionType[idx].length // 余数
        const _questionType = questionType[idx].map((item, key)=>{return key < rem ? Math.ceil(avg) : Math.floor(avg)})
        console.log('questionTypeData', _questionType)
        questionType[idx] = _questionType;
        //[[10]]
        formRef?.current.setFieldsValue({questionType: questionType})
      }}
      /></Form.Item></>,
      key: 'code',
      dataIndex: `type${item?.code}`,
      render: ( _dom, record, index) => {
        return <Form.Item style={{margin:0}} name={['questionType', idx, index]}><Input min={0} max={3} defaultValue={0} type='text' /></Form.Item>;
      },
    })
  })


  // 暴露组件的方法 接受外部获取的ref
  useImperativeHandle(ref, () => ({
    // 构造ref的获取数据方法
    getData: () => { // 组卷数据
      console.log('useImperativeHandle')
      const values = formRef.current.getFieldsValue()
      console.log(values)
      const data = values?.questionType.map((item, key)=>{
        return {
          question_type:key, 
          chapter_list: item.map((val,idx)=>(
            {chapter_id:rows[idx]?.chapter_id, count: val}
          ))
        }
      }) // 题型分数数组 [{"question_type":0,"chapter_list": [{ "chapter_id":3, "count":1 }]}]
      return data;
    },
  }));

  return (
    <>
    <Form ref={formRef}>
      <ProTable
        bordered
        pagination={false}
        //recordCreatorProps={false}
        //formRef={formRef}
        headerTitle={false}
        columns={columns}
        rowKey="id"
        key="id"
        search={false}
        // value={dataSource}
        request={async (value) => {
          const { data } = await queryListChapterBySubject({
            subject_id: subjectId,
            page_number: 1,
            page_size: 1000,
          });
          setRows(data?.list)
          console.log('data--',data)
          /*
          const _data = [];
          data?.list.forEach((item)=>{
            _data.push({
              id: item?.chapter_id,
              chapter_name: item?.chapter_name,
            })
          })*/
          //chapter_name
          return {data: data?.list};
          /*
          return {
            current: data?.page_number,
            data: data?.list,
            pageSize: data?.page_size,
            success: true,
            total: data?.total_row || 0,
          };*/
        }}
        onChange={()=>{
          // setDataSource
        }}
        toolBarRender={false}
      />
      </Form>
    </>
  );
};
// forwardRef这个组件能够将其接受的 ref 属性转发到其组件树下
export default forwardRef( AutoSelector );
