/** 资质考试 */
import { AlignLeftOutlined, PlusOutlined } from '@ant-design/icons';
import { Switch, Button, Card, Col, List, Menu, Progress, Row, Typography, Space, Divider, Radio, Checkbox, Form } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { useParams, useRequest, history } from 'umi';
import { useEffect, useRef, useState } from 'react';
const { Text, Link } = Typography;
import { getErrorQuestionList, getPaperQuestionList, finishExamination, savePersonAnswer } from './service';
import type { CardListItemDataType } from '../data';
import styles from './style.less';
import cookie from 'react-cookies';

import ProCard from '@ant-design/pro-card';




const CardList = () => {
    const formRef = useRef<ActionType>();
    const params = useParams();
    // 组卷详情查询
    const [rulesPaperInfo, setRulesPaperInfo] = useState([]);
    // 试题列表
    const [paperInfo, setPaperInfo] = useState([]);
    //答题卡列表
    const [questionTypeList, setQuestionTypeList] = useState([])
    // 当前答题id
    const [questionNow, setQuestionNow] = useState({})
    // 解析可见
    const [parsingShow, setParsingShow] = useState(false)


    const [lastBtnShow, setLastBtnShow] = useState(true)
    const [nextBtnShow, setNextBtnShow] = useState(false)

    // 当前题号
    const [questionNowNum, setQuestionNowNum] = useState(0)
    const [questionNum, setQuestioNum] = useState(0)



    const info = params.info.split(',');



    const { loading, data } = useRequest(() => {
        return getErrorQuestionList({
            subject_id: info[0],
            person_id: info[1],
        });
    },
        {
            formatResult: (result) => {
                return result;
            },
            onSuccess: (result) => {
                const questionList = result.list;
                // const finish_list = result.finish_list;
                setRulesPaperInfo(result)


                // 根据答题卡生成考试顺序
                const questionSort = []
                questionList.map((item, index) => {
                    questionList[index].question_list.map((e, i) => {
                        questionList[index].question_list[i].index = [index, i]
                        questionList[index].question_list[i].state = ""
                        questionSort.push({ ...e, index: [index, i] })

                    })
                }
                )
                // console.log(questionSort, '试题顺序', questionList, "已答", finish_list)
                setPaperInfo(questionSort)
                setQuestionTypeList(questionList || [])
                setQuestionNow(questionSort[0] || [])
                setQuestioNum(questionSort.length)

                // if (result.success) {
                //     setRulesPaperInfo(result.question_list[0] || [])
                //     run({ paper_id: result.question_list[0].paper_id, question_type_count: result.question_list[0].question_type_count })
                //     // setQuestionTypeList(result.question_list[0].question_type_count)
                // }
            }
        });





    useEffect(() => {

        // 已选择题目回显
        formRef?.current?.setFieldsValue({ note: questionNow.answerId });

        paperInfo.map((item, index) => {

            if (item.question_id === questionNow.question_id) {
                setQuestionNowNum(index + 1)
            }
        })
    }, [questionNow]);

    useEffect(() => {
        setLastBtnShow(questionNowNum == 1 ? true : false)
        setNextBtnShow(questionNowNum == questionNum ? true : false)

    }, [questionNowNum, questionNum])

    const content = (
        <div className={styles.pageHeaderContent}>
            <p>
                {/* 试卷信息：{rulesPaperInfo?.question_list[0].rules_name} */}
            </p>
        </div>
    );


    const numbers = [];
    for (let i = 0; i < 50; i++) {
        numbers.push({ id: `${i}` })
    }
    const tiNum = (a: number) => {
        switch (a) {
            case 0:
                return "A："
                break;
            case 1:
                return "B："
                break;
            case 2:
                return "C："
                break;
            case 3:
                return "D："
                break;
            case 4:
                return "E："
                break;
            case 5:
                return "F："
                break;
            case 6:
                return "G："
                break;
            case 7:
                return "H："
                break;
            case 8:
                return "I："
                break;
            case 9:
                return "J："
                break;
            default:
                return ""
                break;
        }

    }

    // 题型回数字
    const tiTypeNum = (a: number) => {
        switch (a) {
            case 0:
                return "一、"
                break;
            case 1:
                return "二、"
                break;
            case 2:
                return "三、"
                break;
            default:
                return ""
                break;
        }
    }







    // 根据题型返回题数、分数、总分
    const showQuestionTypeSocore = (questionType) => {
        let num = 0
        let name = 0
        questionTypeList.map((e) => {
            e.question_type === questionType ? name = e.question_type_name : "";
            e.question_type === questionType ? num = e.question_list.length : ""
        })
        return `${name} (共${num}题)`
    }
    return (
        <PageContainer content={content} extraContent={false}>
            <Row>
                {console.log("试题列表：", paperInfo, "答题卡：", questionTypeList, "当前试题", questionNow)}

                {/* {console.log(questionTypeList, 'uestionTypeList')} */}
                <Col span={6} style={{ paddingRight: 24 }}>
                    <ProCard
                        title="题号列表"
                        bordered
                        className='answerSheet'
                        headStyle={{ padding: 24, border: '#d9d9d9 solid 1px' }}
                    >
                        {

                            questionTypeList && (

                                questionTypeList.map((e, i) => {

                                    return <List
                                        key={i}
                                        header={tiTypeNum(e.question_type) + e.question_type_name}
                                        footer={false}
                                        bordered
                                        dataSource={e.question_list}
                                        renderItem={(item, index) => {
                                            return <List.Item
                                                id={item.question_id}
                                            > <Button
                                                className={
                                                    `pdefault  ${item.state === 0 ? "pok" : item.state === 1 ? "perror" : ""} ${questionNow.question_id === item.question_id ? "pact" : ""}`
                                                }
                                                onClick={() => {
                                                    // 查看解析关闭
                                                    setParsingShow(false)

                                                    paperInfo.map((e) => {

                                                        if (e.question_id === item.question_id) {
                                                            // 重写单选的label、value，index：保存当前试题的index。
                                                            setQuestionNow(item)
                                                        }
                                                    })

                                                }}
                                            >{index + 1}</Button> </List.Item>
                                        }}
                                        style={{ background: '#ffffff', margin: '-25px -24px 24px -24px' }}
                                    />
                                }
                                )


                            )}
                        <div>
                            <div style={{ float: 'right', lineHeight: "28px" }}>未答
                            </div><div className='pdefault dt-demo' />
                            <div style={{ float: 'right', lineHeight: "28px" }}>已答
                            </div><div className='pok dt-demo' />
                        </div>
                    </ProCard>
                </Col>
                {console.log(questionNow, 'questionNow.index[1]')}

                <Col span={13} style={{ background: '#ffffff', padding: 0 }}>
                    <ProCard
                        title={tiTypeNum(questionNow.question_type) + showQuestionTypeSocore(questionNow.question_type)}
                        extra={false}
                        split='vertical'
                        bordered
                        headerBordered
                    >
                        <Space direction="vertical" style={{ width: '100%', padding: '24px 48px' }}>
                            <Typography style={{ marginBottom: 16, fontSize: 18 }}>
                                {JSON.stringify(questionNow) !== "{}" ? questionNow.index[1] + 1 : ""} 、{questionNow?.question_stem}

                            </Typography>
                            <Space direction="vertical" style={{ fontSize: 16 }}>
                                <Form
                                    ref={formRef} name="control-ref"
                                >
                                    <Form.Item name="note">

                                        {questionNow.question_type === 0 ?

                                            (

                                                <Radio.Group>
                                                    <Space direction="vertical">{questionNow?.answers?.map((item, index) => {

                                                        // console.log("答题item", item, "questionNowid", questionNow)
                                                        return <Radio key={item.id}
                                                            onChange={(e) => {
                                                                const qArr = []
                                                                // 默认输出答案0，0，0，0
                                                                questionNow?.answers?.map((qitem) => {
                                                                    qitem.id === e.target.value ? qArr.push("1") : qArr.push("0")
                                                                })
                                                                const questionList = questionTypeList
                                                                const questionAnswer = qArr.join(",")

                                                                // runSavePersonAnswer({
                                                                //     answer_ids: e.target.value,
                                                                //     question_id: questionNow.question_id,
                                                                //     record_id: rulesPaperInfo.record_id
                                                                // })
                                                                console.log("答题：", questionAnswer, qArr, questionNow)
                                                                // 修改答题卡状态 写入答案以及修改答题状态
                                                                questionList[questionNow.index[0]].question_list[questionNow.index[1]].answerSelect = questionAnswer;
                                                                if (questionAnswer === questionNow.answertrue) {
                                                                    questionList[questionNow.index[0]].question_list[questionNow.index[1]].state = 0
                                                                } else {
                                                                    questionList[questionNow.index[0]].question_list[questionNow.index[1]].state = 1
                                                                }
                                                                // 答题状态
                                                                questionList[questionNow.index[0]].question_list[questionNow.index[1]].answerId = item.id
                                                                // 提交答题卡
                                                                setQuestionTypeList(questionList)
                                                            }}
                                                            value={item.id}
                                                            style={{ padding: 5, fontSize: 16 }}
                                                        >{tiNum(index)}{item.answer}</Radio>


                                                    })}</Space></Radio.Group>
                                            ) : questionNow.question_type === 1 ? <Checkbox.Group onChange={(e) => {
                                                // 答案 0101
                                                const qArr = []
                                                // 默认输出答案0，0，0，0
                                                questionNow?.answers?.map((item) => {
                                                    if (e.indexOf(item.id) > -1) {
                                                        qArr.push("1")
                                                    } else {
                                                        qArr.push("0")
                                                    }
                                                })





                                                const questionList = questionTypeList
                                                const questionAnswer = qArr.join(",")

                                                // runSavePersonAnswer({
                                                //     answer_ids: e.join(','),
                                                //     question_id: questionNow.question_id,
                                                //     record_id: rulesPaperInfo.record_id
                                                // })



                                                // 修改答题卡状态 写入答案以及修改答题状态
                                                const qX = questionNow?.question_type;
                                                const qI = questionNow?.index;
                                                questionList[questionNow.index[0]].question_list[questionNow.index[1]].answerSelect = questionAnswer;
                                                // 答题状态
                                                questionList[questionNow.index[0]].question_list[questionNow.index[1]].answerId = e

                                                if (questionAnswer === questionNow.answertrue) {
                                                    questionList[questionNow.index[0]].question_list[questionNow.index[1]].state = 0
                                                } else {
                                                    questionList[questionNow.index[0]].question_list[questionNow.index[1]].state = 1
                                                }


                                                // 提交答题卡
                                                setQuestionTypeList(questionList)

                                            }}>
                                                {questionNow?.answers?.map((item, index) => {


                                                    return <Checkbox key={item.id}

                                                        value={item.id}
                                                        style={{ padding: 5, fontSize: 16 }}
                                                    >{tiNum(index)}{item.answer}</Checkbox>

                                                })}
                                            </Checkbox.Group> : questionNow.question_type === 2 ? (

                                                <Radio.Group>
                                                    <Space direction="vertical">{questionNow?.answers?.map((item, index) => {

                                                        return <Radio key={item.id}
                                                            onChange={(e) => {
                                                                const qArr = []
                                                                // 默认输出答案0，0，0，0
                                                                questionNow?.answers?.map((qitem) => {
                                                                    qitem.id === e.target.value ? qArr.push("1") : qArr.push("0")
                                                                })
                                                                const questionList = questionTypeList
                                                                const questionAnswer = qArr.join(",")


                                                                // runSavePersonAnswer({
                                                                //     answer_ids: e.target.value,
                                                                //     question_id: questionNow.question_id,
                                                                //     record_id: rulesPaperInfo.record_id
                                                                // })
                                                                // console.log("答题：", questionAnswer, qArr, questionNow)
                                                                // 修改答题卡状态 写入答案以及修改答题状态
                                                                const qX = questionNow?.question_type;
                                                                const qI = questionNow?.index;
                                                                questionList[questionNow.index[0]].question_list[questionNow.index[1]].answerSelect = questionAnswer;
                                                                if (questionAnswer === questionNow.answertrue) {
                                                                    questionList[questionNow.index[0]].question_list[questionNow.index[1]].state = 0
                                                                } else {
                                                                    questionList[questionNow.index[0]].question_list[questionNow.index[1]].state = 1
                                                                }
                                                                // 答题状态
                                                                questionList[questionNow.index[0]].question_list[questionNow.index[1]].answerId = item.id
                                                                // 提交答题卡
                                                                setQuestionTypeList(questionList)
                                                            }}
                                                            value={item.id}
                                                            style={{ padding: 5, fontSize: 16 }}
                                                        >{tiNum(index)}{item.answer}</Radio>

                                                    })}</Space></Radio.Group>
                                            ) : ""
                                        }
                                    </Form.Item>
                                </Form>
                            </Space>

                            <Radio.Group onChange={() => { return true }} value={0} size="large">
                                <Space direction="vertical" style={{ fontSize: 16 }}>
                                    <Button type="primary" onClick={() => {
                                        setParsingShow(!parsingShow)
                                      console.log('questionNow',questionNow)
                                    }}>查看答案</Button>

                                    <div style={{ display: (parsingShow ? 'block' : 'none') }} dangerouslySetInnerHTML={{ __html: questionNow.parsing }} />
                                </Space>
                            </Radio.Group>
                        </Space>
                    </ProCard>
                </Col>
                <Col span={5} style={{ paddingLeft: 24 }}>
                    <div style={{ background: '#ffffff', padding: 24 }}>
                        <Space direction="vertical" style={{ width: '100%' }}>
                            <Divider style={{ margin: '6px 0', opacity: 0.5 }} />
                            <strong>答题序号</strong>
                            <Typography>{questionNowNum}/{questionNum}</Typography>
                            <Divider style={{ margin: '6px 0', opacity: 0.5 }} />
                            <Button
                                size="large"
                                disabled={lastBtnShow}

                                onClick={() => {

                                    paperInfo.map((e, i) => {

                                        if (e.question_id === questionNow.question_id) {
                                            const nextTemp = paperInfo[i - 1]
                                            const questionList = questionTypeList
                                            let nextData = {}
                                            questionList[nextTemp.index[0]].question_list.map((item, index) => {
                                                if (item.question_id === nextTemp.question_id) {
                                                    nextData = item
                                                }
                                            })
                                            setQuestionNow(nextData)
                                        }

                                    })

                                }}

                                block>上一题</Button>

                            <Button size="large"
                                disabled={nextBtnShow}
                                block onClick={() => {

                                    paperInfo.map((e, i) => {

                                        if (e.question_id === questionNow.question_id) {
                                            const nextTemp = paperInfo[i + 1]
                                            const questionList = questionTypeList
                                            let nextData = {}
                                            questionList[nextTemp.index[0]].question_list.map((item, index) => {
                                                if (item.question_id === nextTemp.question_id) {
                                                    nextData = item
                                                }
                                            })
                                            setQuestionNow(nextData)
                                        }

                                    })

                                }}>下一题</Button>
                            <Button size="large" type="primary"
                                onClick={() => {

                                    history.goBack();
                                }}
                                block>返回</Button>
                        </Space>
                    </div>
                </Col>
            </Row >
        </PageContainer >
    );
};

export default CardList;
