import { Button, Col, Form, InputNumber, Modal, Radio, Row } from "antd";
import React, { useEffect, useState } from "react";
import Cropper from "react-cropper";
import "cropperjs/dist/cropper.css";

type PropsType = {
    imgUrl: string,
    width?: number,//初始裁剪框宽
    height?: number,//初始裁剪框高
    visible?: boolean,
    isChangeCropperSize?: boolean,  // 是否可以改变裁剪框大小
    onChange?: () => void,
    onClose?: () => void,
}
// 裁剪图片
function CropperImg(props: PropsType) {
    let { imgUrl, visible, onClose, isChangeCropperSize = true } = props

    // 变量开始
    const [cropper, setCropper] = useState<any>();//实例
    const [detail, setDetail] = useState<{ width: number, height: number, rotate: number }>({ width: props?.width || 800, height: props?.height || 800, rotate: 0 });//设置数据
    // 变量结束

    /**获取裁剪数据*/
    const getCropData = () => {
        if (typeof cropper !== "undefined") {
            console.log(cropper.getCroppedCanvas().toDataURL('image/jpeg'))
            // props?.callback && props?.callback(cropper.getCroppedCanvas().toDataURL('image/jpeg'))
            // cancel()
        }
    };

    /**数值变化重置实例 */
    useEffect(() => {
        if (typeof cropper !== "undefined") {
            cropper.setData(detail);
        }
    }, [cropper, detail])

    useEffect(() => {
        if (visible && cropper) {
            setTimeout(() => {
                cropper.reset()
                if (props?.width) {
                    cropper.setData({ width: props?.width, height: props?.height })
                }
            }, 200)
        }
    }, [visible, cropper])

    return <Modal
        visible={visible}
        onCancel={() => { onClose && onClose() }}
        width={1000}
        footer={<div style={{ display: 'flex', justifyContent: 'center' }}>
            <Button onClick={() => { onClose && onClose() }}>取消</Button>
            {/* <Button onClick={() => {
                cropper.reset()
                if (props?.width) {
                    cropper.setData({ width: props?.width, height: props?.height })
                }
            }}>重置</Button> */}
            <Button type='primary' onClick={getCropData}>确定</Button>
        </div>}
    >
        <div>
            <div style={{ width: "100%" }}>
                <Row>
                    <Col span={16}>
                        <Cropper
                            style={{ height: 400, width: 600, backgroundImage: `url(${require('../../../public/init.png')})`, border: '1px solid #efefef' }}
                            zoomTo={0.6}
                            dragMode="none" // 'crop': 创建一个新的裁剪框 'move': 移动画布 'none'： 没做什么 默认： 'crop'
                            initialAspectRatio={1}
                            preview=".img-preview"
                            src={"https://zx-media-database.oss-cn-hangzhou.aliyuncs.com/image/D5A1AE36D1274392914073C4DA9F41E7.jpg"} // imgUrl || 
                            viewMode={0}
                            zoomable={false} // 禁止图像缩放
                            guides={true} // 在裁剪框上方显示虚线
                            rotatable={true}
                            minCropBoxHeight={10}
                            minCropBoxWidth={10}
                            background={false}
                            responsive={true}
                            autoCropArea={1}
                            cropBoxResizable={false} // 禁止通过拖动来调整裁剪框的大小
                            checkOrientation={false}
                            zoomOnTouch={false} // 启用通过拖动触摸来缩放图像
                            onInitialized={(instance: any) => {
                                setCropper(instance);
                            }}
                        />
                    </Col>
                    <Col span={8}>
                        <Row gutter={[10, 10]}>
                            <Col span={24} style={{ height: 275 }}>
                                <div className="box" style={{ width: "100%", float: "right", overflow: 'hidden' }}>
                                    <h1>Preview</h1>
                                    <div
                                        className="img-preview"
                                        style={{ width: "100%", float: "left", height: "200px", overflow: 'hidden' }}
                                    />
                                </div>
                            </Col>
                            <Col>
                                <Form>
                                    <Form.Item label="裁剪框宽" style={{ marginBottom: 0 }}>
                                        <Radio.Group disabled={isChangeCropperSize} onChange={(e) => { setDetail({ ...detail, width: e.target.value, height: 800 }) }} value={detail.width}>
                                            <Radio value={800}>800</Radio>
                                            <Radio value={750}>750</Radio>
                                            <Radio value={640}>640</Radio>
                                        </Radio.Group>
                                    </Form.Item>
                                    <Form.Item label="裁剪框高" style={{ marginBottom: 0 }}>
                                        {detail.width === 800 ? <Radio.Group disabled={isChangeCropperSize} onChange={(e) => { setDetail({ ...detail, height: e.target.value }) }} value={detail.height}>
                                            <Radio value={800}>800</Radio>
                                            <Radio value={640}>640</Radio>
                                            <Radio value={450}>450</Radio>
                                        </Radio.Group>
                                            : detail.width === 640 ? <Radio.Group disabled={isChangeCropperSize} onChange={(e) => { setDetail({ ...detail, height: e.target.value }) }} value={detail.height}>
                                                <Radio value={800}>800</Radio>
                                            </Radio.Group>
                                                :
                                                <InputNumber
                                                    style={{ width: 200 }}
                                                    value={detail.height}
                                                    disabled={isChangeCropperSize ? isChangeCropperSize : false}
                                                    min={1}
                                                    max={1536}
                                                    onChange={(e) => { setDetail({ ...detail, height: e }) }}
                                                />
                                        }
                                    </Form.Item>

                                </Form>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </div>
        </div>
    </Modal>
}
export default React.memo(CropperImg)