import React, { Component } from'react';
import { Form, Input, Button, Radio, Checkbox, Select, message } from 'antd';
import { dictionary } from "api/dict/index";
import { addQuestion, findIndustry } from 'api/question';
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';

const { Option} = Select;

interface States {
    industryDict: any;
    serviceTypeDict: any;
    formCount: number;
}

class QuestionAdd extends Component<any, States> {
    formRef: any;
    fileInputRef: any;
    constructor(props: any) {
        super(props);
        this.formRef = React.createRef();
        this.fileInputRef = React.createRef();
        this.state = {
            industryDict: [],
            serviceTypeDict: [],
            formCount: 1
        };
    }

    componentDidMount() {
        this.handleFindDict();
    }

    // 字典
    handleFindDict() {
        // 监管行业
        findIndustry()
            .then((res: any) => {
                if (res.data) {
                    this.setState({ industryDict: res.data });
                }
            })
            .catch(() => {
                message.error('获取监管行业字典数据失败，请稍后重试');
            });
        // AQ服务类型
        dictionary('serviceTypeDict')
            .then((res) => {
                if (res.data) {
                    this.setState({ serviceTypeDict: res.data });
                }
            })
            .catch(() => {
                message.error('获取AQ服务类型字典数据失败，请稍后重试');
            });
    }

    // 题型切换
    handleQuestionTypeChange = (index: number, value: string) => {
        const formValues = {};
        formValues[`questionTypes_${index}`] = value;
        formValues[`answer_${index}`] = '';
        this.formRef.current.setFieldsValue(formValues);
    };

    // 新增试题
    handleAddNewQuestion = () => {
        this.setState((prevState) => ({
            formCount: prevState.formCount + 1,
        }));
    };

    // 删除试题
    handleDeleteQuestion = (index: number) => {
        this.setState((prevState) => ({
            formCount: prevState.formCount - 1,
        }));
    };

    // 处理表单提交
    handleSubmit = () => {
        this.formRef.current.validateFields().then((values: any) => {
            const questions = [];
            for (let i = 0; i < this.state.formCount; i++) {
                const question = {
                    questionTypes: values[`questionTypes_${i}`],
                    industryId: values[`industryId_${i}`],
                    serviceTypeId: values[`serviceTypeId_${i}`],
                    questionContent: values[`questionContent_${i}`],
                    optionA: values[`optionA_${i}`],
                    optionB: values[`optionB_${i}`],
                    optionC: values[`optionC_${i}`],
                    optionD: values[`optionD_${i}`],
                    answer: values[`answer_${i}`],
                };
                questions.push(question);
            }

            addQuestion(questions).then((res) => {
                const success = res['success'];
                if (success) {
                    message.success(`新增成功`);
                    this.props.history.push('/questionList');
                } else {
                    message.error('新增试题失败，请稍后重试');
                }
            }).catch(() => {
                message.error('新增试题时发生错误，请检查');
            });
        });
    };

    // 下载模板
    handleDownloadTemplate = () => {
        const headers = ['题型', '监管行业', 'AQ服务类型', '题干', '选项A', '选项B', '选项C', '选项D', '答案'];
        const ws = XLSX.utils.aoa_to_sheet([headers]);
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, '试题模板');
        const wbOut = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
        saveAs(new Blob([wbOut], { type: 'application/octet-stream' }), '试题模板.xlsx');
    };

    // 一键导入
    handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = (event) => {
                const data = new Uint8Array(event.target?.result as ArrayBuffer);
                const workbook = XLSX.read(data, { type: 'array' });
                const firstSheetName = workbook.SheetNames[0];
                const worksheet = workbook.Sheets[firstSheetName];
                const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
                const rows = jsonData.slice(1);
                const formValues = {};
                rows.forEach((row: any, index) => {
                    formValues[`questionTypes_${index}`] = String(row[0]);
                    formValues[`industryId_${index}`] = String(row[1]);
                    formValues[`serviceTypeId_${index}`] = String(row[2]);
                    formValues[`questionContent_${index}`] = String(row[3]);
                    formValues[`optionA_${index}`] = String(row[4]);
                    formValues[`optionB_${index}`] = String(row[5]);
                    formValues[`optionC_${index}`] = String(row[6]);
                    formValues[`optionD_${index}`] = String(row[7]);
                    formValues[`answer_${index}`] = String(row[8]);
                });
                this.setState({ formCount: rows.length }, () => {
                    this.formRef.current.setFieldsValue(formValues);
                });
            };
            reader.readAsArrayBuffer(file);

            const input = this.fileInputRef.current;
            if (input) {
                input.value = null;
            }
        }
    };

    // 文件
    handleImportClick = () => {
        this.fileInputRef.current?.click();
    };

    render() {
        const { industryDict, serviceTypeDict, formCount } = this.state;
        const handleListQuestion = () => {
            this.props.history.push('/questionList');
        };
        return (
            <div className="container">
                <div style={{textAlign: 'right'}}>
                    <Button type="default" style={{marginRight: 10}} onClick={this.handleDownloadTemplate}>下载模版</Button>
                    <Button type="default" onClick={this.handleImportClick}>一键导入</Button>
                    <input
                        type="file"
                        ref={this.fileInputRef}
                        style={{display: 'none'}}
                        accept=".xlsx,.xls"
                        onChange={this.handleFileChange}
                    />
                </div>
                <Form ref={this.formRef} layout="inline">
                    {Array.from({ length: formCount }, (_, index)  => (
                        <div key={index} style={{marginBottom: 30}}>
                            <div style={{display: 'flex'}}>
                                <Form.Item name={`questionTypes_${index}`}>
                                    <Radio.Group
                                        onChange={(e) => this.handleQuestionTypeChange(index, e.target.value)}>
                                        <Radio.Button value="1">单选题</Radio.Button>
                                        <Radio.Button value="2">多选题</Radio.Button>
                                    </Radio.Group>
                                </Form.Item>
                                <Form.Item
                                    label="监管行业："
                                    name={`industryId_${index}`}
                                    rules={[{required: true, message: '请选择监管行业'}]}
                                >
                                    <Select placeholder="请选择监管行业"
                                            style={{width: 240}}
                                            allowClear>
                                        {
                                            industryDict && industryDict.length > 0 ?
                                                (() => {
                                                    let rows = [];
                                                    for (let i = 0; i < industryDict.length; i++) {
                                                        const item = industryDict[i];
                                                        rows.push(
                                                            <Option value={item.industryId}>{item.industryName}</Option>
                                                        );
                                                    }
                                                    return rows;
                                                })()
                                                :
                                                <Option disabled>暂无数据</Option>
                                        }
                                    </Select>
                                </Form.Item>
                                <Form.Item
                                    label="AQ服务类型："
                                    name={`serviceTypeId_${index}`}
                                    rules={[{required: true, message: '请选择AQ服务类型'}]}
                                >
                                    <Select placeholder="请选择AQ服务类型"
                                            style={{width: 240}}
                                            allowClear>
                                        {
                                            serviceTypeDict && serviceTypeDict.length > 0 ?
                                                (() => {
                                                    let rows = [];
                                                    for (let i = 0; i < serviceTypeDict.length; i++) {
                                                        const item = serviceTypeDict[i];
                                                        rows.push(
                                                            <Option
                                                                value={String(item.dictKey)}>{item.dictValue}</Option>
                                                        );
                                                    }
                                                    return rows;
                                                })()
                                                :
                                                <Option disabled>暂无数据</Option>
                                        }
                                    </Select>
                                </Form.Item>
                                <Form.Item>
                                    {index > 0 && (
                                        <Button type="link" onClick={() => this.handleDeleteQuestion(index)}>X</Button>)}
                                </Form.Item>
                            </div>
                            <div style={{display: 'flex'}}>
                                <Form.Item
                                    label="题干："
                                    name={`questionContent_${index}`}
                                    style={{marginTop: 10}}
                                    rules={[{required: true, message: '请输入题干内容'}]}
                                >
                                    <Input.TextArea
                                        placeholder="请输入题干内容"
                                        style={{width: 1100, height: 60}}
                                    />
                                </Form.Item>
                            </div>
                            <div style={{marginTop: 10, marginLeft: 40}}>
                                <div style={{display: 'flex'}}>
                                    <Form.Item
                                        name={`answer_${index}`}
                                        rules={[{ required: true, message: '请选择答案' }]}>
                                        {this.formRef.current && this.formRef.current.getFieldValue(`questionTypes_${index}`) === '1' ? (
                                                <Radio.Group>
                                                    <div style={{display: 'flex'}}>
                                                        <Radio value="A">A</Radio>
                                                        <Form.Item name={`optionA_${index}`} rules={[{required: true, message: '请输入答案A'}]}>
                                                            <Input placeholder="请输入答案" style={{width: 500}}/>
                                                        </Form.Item>
                                                        <Radio value="B">B</Radio>
                                                        <Form.Item name={`optionB_${index}`} rules={[{required: true, message: '请输入答案B'}]}>
                                                            <Input placeholder="请输入答案" style={{width: 500}}/>
                                                        </Form.Item>
                                                    </div>
                                                    <div style={{display: 'flex', marginTop: 10}}>
                                                        <Radio value="C">C</Radio>
                                                        <Form.Item name={`optionC_${index}`} rules={[{required: true, message: '请输入答案C'}]}>
                                                            <Input placeholder="请输入答案" style={{width: 500}}/>
                                                        </Form.Item>
                                                        <Radio value="D">D</Radio>
                                                        <Form.Item name={`optionD_${index}`} rules={[{required: true, message: '请输入答案D'}]}>
                                                            <Input placeholder="请输入答案" style={{width: 500}}/>
                                                        </Form.Item>
                                                    </div>
                                                </Radio.Group>
                                        ) : (
                                            <Checkbox.Group>
                                                <div style={{display: 'flex'}}>
                                                    <Checkbox value="A">A</Checkbox>
                                                    <Form.Item name={`optionA_${index}`} rules={[{required: true, message: '请输入答案A'}]}>
                                                        <Input placeholder="请输入答案" style={{width: 500}}/>
                                                    </Form.Item>
                                                    <Checkbox value="B">B</Checkbox>
                                                    <Form.Item name={`optionB_${index}`} rules={[{required: true, message: '请输入答案B'}]}>
                                                        <Input placeholder="请输入答案" style={{width: 500}}/>
                                                    </Form.Item>
                                                </div>
                                                <div style={{display: 'flex', marginTop: 10}}>
                                                    <Checkbox value="C">C</Checkbox>
                                                    <Form.Item name={`optionC_${index}`} rules={[{required: true, message: '请输入答案C'}]}>
                                                        <Input placeholder="请输入答案" style={{width: 500}}/>
                                                    </Form.Item>
                                                    <Checkbox value="D">D</Checkbox>
                                                    <Form.Item name={`optionD_${index}`} rules={[{required: true, message: '请输入答案D'}]}>
                                                        <Input placeholder="请输入答案" style={{width: 500}}/>
                                                    </Form.Item>
                                                </div>
                                            </Checkbox.Group>
                                        )}
                                    </Form.Item>
                                </div>
                            </div>
                        </div>
                    ))}
                </Form>
                <div style={{textAlign: 'right'}}>
                    <Button type="default" onClick={this.handleAddNewQuestion}>
                        新增试题
                    </Button>
                </div>
                <div style={{
                    textAlign: 'right',
                    position: 'fixed',
                    bottom: 10,
                    right: 10,
                    width: '100%',
                    zIndex: 1000
                }}>
                    <Button type="default" htmlType="button" onClick={handleListQuestion} style={{marginRight: 10}}>
                        取消
                    </Button>
                    <Button type="primary" htmlType="submit" onClick={this.handleSubmit}>
                        确定添加
                    </Button>
                </div>
            </div>
        );
    }
}

export default QuestionAdd;