// import React from 'react'
import {
    Col, Flex, Row,
    //  Select, 
    Button, Form, Input,
    DatePicker,
    Select,
    InputNumber,
    Modal,
    Cascader,
    message,
    Upload,
    UploadFile
} from "antd";
import type { GetProp, UploadProps } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { useEffect, useState } from "react";
import { get ,uploadImageUrl,DevUserId,downloadUrl} from "../../../../util/AjaxUtils";
// import type { InputNumberProps } from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN';
import './EditModal.css'
import { ITree } from "../../../../interfaces/dict/IDict";
const dateFormat = 'YYYY年MM月DD日';
const { TextArea } = Input;
interface Option {
    value?: string | number | null;
    label: React.ReactNode;
    children?: Option[];
    isLeaf?: boolean;
    id: string;
    pId: string;
}
type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
export default function EditModal(props: any) {
    const [messageApi, contextHolder] = message.useMessage();
    const height = window.innerHeight - 180;
    const [areaArray, setAreaArray] = useState<Option[]>([]);
    const listArea = (pId: string) => {
        return new Promise<ITree[]>((resolve) => {
            get<ITree[]>({
                messageApi,
                url: '/api/area/list-area-ztree',
                config: {
                    params: {
                        id: pId
                    }
                },
                onSuccess({ data }) {
                    resolve(data);
                }
            })
        })
    }
    const [form] = Form.useForm();
    const [promptModal, setPromptModal] = useState(false)
    // 上传图片
    const [logoImgArray, setLogoImgArray] = useState<UploadFile[]>([]);
    const beforeUpload = (file: FileType) => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
            message.error('只能上传 JPG/PNG 格式文件!');
        }
        // 限制图片大小
        // const isLt2M = file.size / 1024 / 1024 < 2;
        // if (!isLt2M) {
        //     message.error('Image must smaller than 2MB!');
        // }
        // return isJpgOrPng && isLt2M;
        return isJpgOrPng;
    };
  
    const [loading, setLoading] = useState(false);
    // const [imageUrl, setImageUrl] = useState<string>();
   
  
    const handleChange: UploadProps['onChange'] = (info) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
            setLoading(false);
            const fileId = info.file.response.data.fileId;
            const url = downloadUrl(fileId);
            logoImgArray.splice(0, 1, {
                uid: info.file.response.data.fileId,
                name: 'xixi.png',
                status: 'done',
                url: url,
                thumbUrl: url,
            })
            setLogoImgArray([
                ...logoImgArray
            ])
            return;
        }
    };

    const uploadButton = (
        <button style={{ border: 0, background: 'none' }} type="button">
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
        </button>
    );
    useEffect(() => {
        listArea('0').then(data => {
            console.log('省市1', data);
            // data.slice(0, 2).map
            const options: Option[] = data.map(item => {
                return {
                    value: item.name,
                    label: item.name,
                    isLeaf: !item.isParent,
                    id: item.id,
                    pId: item.pId
                }
            })

            setAreaArray(options);
            // console.log('省市2', options);
        });

    }, [])

    return (
        <div className='editModal'>
            {contextHolder}
            <div className='editModal-title'>
                <div className='editModal-title-box'></div>
                <div className='editModal-title-name'>软著信息</div>
            </div>
            <div className="form-body" >
                <Form
                    name="basic"
                    form={form}
                    layout="vertical"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 24 }}
                    // style={{ width: '600px' }}
                    onFinish={() => {
                        setPromptModal(true);
                    }}
                    autoComplete="off"
                >
                    <Row gutter={15}>

                        <Col span={12}>

                            <Form.Item
                                label="软著名称"
                                name="name"
                                rules={[{ required: true, message: '请输入软著名称' }]}
                            >
                                <Input
                                    style={{ height: '50px', width: '498px' }} placeholder="请输入软著名称"
                                />
                            </Form.Item>

                        </Col>
                        <Col span={12}>
                            <Form.Item
                                label="软著图片"
                                name="imageUrl"
                                rules={[{ required: true, message: '请上传软著图片' }]}
                            >
                                <div className="editModal-img-box">
                                    <div>
                                        <Upload
                                            name="image"
                                            listType="picture-card"
                                            maxCount={1}
                                            defaultFileList={logoImgArray}
                                            className="avatar-uploader"
                                            showUploadList={false}
                                            action={uploadImageUrl()}
                                            headers={{ 'X-USER-ID': DevUserId }}
                                            beforeUpload={beforeUpload}
                                            onChange={handleChange}
                                            onRemove={() => {
                                                logoImgArray.splice(0)
                                                setLogoImgArray([
                                                    ...logoImgArray
                                                ])
                                            }}
                                        >
                                            {logoImgArray.length > 0 ? <img src={logoImgArray[0].url} alt="avatar" style={{ width: '100%',height:'100%' }} /> : uploadButton}
                                        </Upload>
                                    </div>
                                    <div  style={{ color: '#919191', marginRight: '27px' }}>
                                        {logoImgArray.length > 0 ?'点击图片更换':'点击+上传图片'}
                                      
                                    </div>
                                </div>
                            </Form.Item>

                        </Col>



                    </Row>
                    <div style={{ display: 'flex' }}>
                        <div>
                            <Row gutter={15}>
                                <Col span={12}>

                                    <Form.Item
                                        label="软著简称"
                                        name="smallname"
                                        rules={[{ required: true, message: '请输入软著简称' }]}
                                    >
                                        <Input
                                            style={{ height: '50px', width: '498px' }}
                                            placeholder="请输入软著简称"
                                        />
                                    </Form.Item>

                                </Col>

                            </Row>
                            <Row gutter={15}>
                                <Col span={12}>
                                    <Form.Item
                                        label="软著证号"
                                        name="number"
                                        rules={[{ required: true, message: '请输入软著证号' }]}
                                    >
                                        <Input
                                            style={{ height: '50px', width: '498px' }}
                                            placeholder="请输入软著证号"
                                        />
                                    </Form.Item>

                                </Col>

                            </Row>
                        </div>
                        <div style={{ marginLeft: 30 }}>
                            <Row gutter={15}>
                                <Col span={12}>
                                    <Form.Item
                                        label="软著说明"
                                        name="textArea"
                                        rules={[{ required: true, message: '请输入软著说明' }]}
                                    >
                                        <TextArea
                                            style={{
                                                resize: 'none', width: "995px", height: '154px',
                                                // background:'#F8F8F8'
                                            }}
                                            placeholder="请输入软著说明..."
                                        />
                                    </Form.Item>

                                </Col>

                            </Row>
                        </div>

                    </div>
                    <Row gutter={15}>

                        <Col span={12}>

                            <Form.Item
                                label="软著版本"
                                name="sv"
                                rules={[{ required: true, message: '请输入软著版本' }]}
                            >
                                <Input
                                    style={{ height: '50px', width: '498px' }} placeholder="请输入软著版本"
                                />
                            </Form.Item>

                        </Col>
                        <Col span={12}>
                            <Form.Item
                                label="取得时间"
                                name="time"
                                rules={[{ required: true, message: '请选择取得时间' }]}
                            >
                                <DatePicker placeholder="请选择开发完成日期"
                                    format={dateFormat}
                                    locale={locale}
                                    // style={{ width: '100%' }}
                                    style={{ height: '50px', width: '498px' }}

                                />
                            </Form.Item>

                        </Col>



                    </Row>
                    <Row gutter={15}>

                        <Col span={12}>

                            <Form.Item
                                label="开发语言"
                                name="java"
                                rules={[{ required: true, message: '请选择开发语言' }]}
                            >
                                {/* <Input
                                    style={{ height: '60px', width: '498px', fontSize: '16px' }} placeholder="请选择开发语言"
                                /> */}
                                <Select
                                    // defaultValue="lucy"
                                    placeholder='请选择软著类型'
                                    style={{ width: 498, height: 50 }}
                                    options={[
                                        { value: 'java', label: 'java' },
                                        { value: 'php', label: 'php' },
                                    ]}
                                />
                            </Form.Item>

                        </Col>
                        <Col span={12}>
                            <Form.Item
                                label="取得方式"
                                name="use"
                                rules={[{ required: true, message: '请选择取得方式' }]}
                            >
                                <Select
                                    // defaultValue="lucy"
                                    placeholder='请选择取得方式'
                                    style={{ width: 498, height: 50 }}
                                    options={[
                                        { value: '1', label: '跟别人抢的' },
                                        { value: '2', label: '路上捡的' },
                                    ]}
                                />
                            </Form.Item>

                        </Col>
                    </Row>
                    <Row gutter={15}>

                        <Col span={12}>

                            <Form.Item
                                label="软著分类"
                                name="class"
                                rules={[{ required: true, message: '请选择软著分类' }]}
                            >

                                <Select
                                    mode="multiple"
                                    placeholder="请选择软著类型"
                                    style={{ width: 498, height: 50 }}
                                    options={[
                                        { value: '嘻嘻', label: '嘻嘻' },
                                        { value: '呵呵', label: '呵呵' },
                                        { value: '哈哈', label: '哈哈' },
                                        { value: '哥哥', label: '哥哥' },
                                        { value: '弟弟', label: '弟弟' },
                                        { value: '妹妹', label: '妹妹' },
                                    ]}
                                />
                            </Form.Item>

                        </Col>
                        <Col span={12}>
                            <Form.Item
                                label="售卖价格"
                                name="price"
                                rules={[{ required: true, message: '请输入正确的售卖价格' }]}
                            >
                                {/* <Input
                                    style={{ height: '60px', width: '498px', fontSize: '16px' }} placeholder="请输入售卖价格"

                                /> */}
                                <InputNumber min={0} style={{ height: '50px', width: '498px', display: 'flex', alignItems: 'center' }} placeholder="请输入售卖价格" />
                            </Form.Item>

                        </Col>
                    </Row>
                    <Row gutter={15}>

                        <Col span={12}>
                            <Form.Item
                                label="截止售卖日期"
                                name="time2"
                                rules={[{ required: true, message: '请选择截止售卖日期' }]}
                            >
                                <DatePicker placeholder="请选择截止售卖日期"
                                    format={dateFormat}
                                    locale={locale}
                                    // style={{ width: '100%' }}
                                    style={{ height: '50px', width: '498px' }}

                                />
                            </Form.Item>

                        </Col>


                    </Row>
                    <div className='editModal-title' style={{ marginTop: 30 }}>
                        <div className='editModal-title-box'></div>
                        <div className='editModal-title-name'>著作权人信息</div>
                    </div>
                    <Row gutter={15}>

                        <Col span={12}>
                            <Form.Item
                                label="类别"
                                name="peopleClass"
                                rules={[{ required: true, message: '请选择类别' }]}
                            >
                                <Select
                                    // defaultValue="lucy"
                                    placeholder='请选择类别'
                                    style={{ width: 498, height: 50 }}
                                    options={[
                                        { value: '1', label: '跟别人抢的' },
                                        { value: '2', label: '路上捡的' },
                                    ]}
                                />
                            </Form.Item>

                        </Col>
                        <Col span={12}>

                            <Form.Item
                                label="姓名或名称"
                                name="peopleName"
                                rules={[{ required: true, message: '请输入姓名或名称' }]}
                            >
                                <Input
                                    style={{ height: '50px', width: '498px' }} placeholder="请输入姓名或名称"
                                />
                            </Form.Item>

                        </Col>
                    </Row>
                    <Row gutter={15}>

                        <Col span={12}>
                            <Form.Item
                                label="省市"
                                name="authorProvince"
                                rules={[{ required: true, message: '请选择省市' }]}
                            >
                                <Cascader options={areaArray}
                                    style={{ height: '50px', width: '498px', }}

                                    loadData={(selectedOptions: Option[]) => {
                                        const targetOption = selectedOptions[selectedOptions.length - 1];
                                        // console.log(targetOption.id);

                                        listArea(targetOption.id).then(data => {
                                            targetOption.children = data.map(item => {
                                                return {
                                                    value: item.name,
                                                    label: item.name,
                                                    isLeaf: true,  //二级判断这个 以前不是 以前是 !item.isParent
                                                    id: item.id,
                                                    pId: item.pId
                                                }
                                            });
                                            setAreaArray([
                                                ...areaArray
                                            ])
                                        });

                                    }}

                                    placeholder="请选择省市"
                                    changeOnSelect
                                />
                            </Form.Item>

                        </Col>
                        <Col span={12}>

                            <Form.Item
                                label="联系电话"
                                name="peoplePhone"
                                rules={[{ required: true, message: '请输入联系电话' }]}
                            >
                                <Input
                                    style={{ height: '50px', width: '498px' }} placeholder="请输入联系电话"
                                />
                            </Form.Item>

                        </Col>
                    </Row>
                    <Row gutter={15}>

                        <Col span={12}>
                            <Form.Item
                                label="证件类型"
                                name="papersType"
                                rules={[{ required: true, message: '请选择证件类型' }]}
                            >
                                <Select
                                    // defaultValue="lucy"
                                    placeholder='请选择证件类型'
                                    style={{ width: 498, height: 50 }}
                                    options={[
                                        { value: 'person', label: '身份证号' },
                                        { value: 'license', label: '营业执照' },
                                    ]}
                                />
                            </Form.Item>

                        </Col>
                        <Col span={12}>

                            <Form.Item
                                label="证件号"
                                name="papersNum"
                                rules={[{ required: true, message: '请输入证件号' }]}
                            >
                                <Input
                                    style={{ height: '50px', width: '498px' }} placeholder="请输入证件号"
                                />
                            </Form.Item>

                        </Col>
                    </Row>

                    <div className='editModalBtn'>
                        <Form.Item wrapperCol={{ span: 24 }}>
                            <Flex align="center" justify="center" gap="large">
                                <Button type="default" htmlType="button"
                                    // style={{ width: '262px', height: '58px', fontSize: '16px', color: '#4B4B4B', background: '#EEEEEE' }}
                                    size='large'
                                    onClick={() => {
                                        props.closeModal()
                                    }}>
                                    关闭
                                </Button>
                                <Button type="primary"
                                    htmlType="submit"
                                    // style={{ width: '262px', height: '58px', fontSize: '16px', color: '#FDFDF2', backgroundColor: 'var(--color-primary)' }}
                                    size='large'
                                    onClick={() => {
                                        console.log(form.getFieldValue('imageUrl'));
                                        console.log(logoImgArray);
                                        
                                    }}
                                >
                                    保存
                                </Button>

                            </Flex>
                        </Form.Item>
                    </div>
                </Form>
            </div>
            <Modal title="提示"
                okText="确定"
                cancelText="取消"

                destroyOnClose={true}
                open={promptModal}
                onOk={() => {
                    console.log('分类', form.getFieldValue('class'))
                    console.log('价格', form.getFieldValue('price'))
                }}
                onCancel={() => {
                    setPromptModal(false);
                }}

                style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    height: `${height}px`,
                }}
            >
                <div style={{ width: 500 }}>确定提交吗？</div>
            </Modal>
        </div>
    )
}
