import { Image } from "antd"
import zd from '../../../../assets/img/u0.png'
import qys1 from '../../../../assets/img/qys1.png'
import qys2 from '../../../../assets/img/qys2.jpg'
import qys3 from '../../../../assets/img/qys3.jpg'
import qys4 from '../../../../assets/img/qys4.png'
import stylesCss from './index.module.less'

import { Rnd } from "react-rnd"
import { useState, useEffect } from "react"
const list = [
    { name: '水库地理位置图', key: 1, img: qys1 },
    { name: '水库平面布置图', key: 2, img: qys2 },
    { name: '主坝平面布置图', key: 3, img: qys3 },
    { name: '副坝平面布置图', key: 4, img: qys4 },
]
const Page = () => {
    const [url, setUrl] = useState(qys1)
    const tabClick = (item) => {
        setUrl(item.img)
    }
    useEffect(() => {
        let scale = 1
        const img = document.getElementById("img");
        const fun = (e) => {
            console.log(1111)
            // 大于0:滚轮向上滚动  小于0:滚轮向下滚动
            if (e.wheelDelta > 0) {
                scale += 0.05;
                img.style.transform = `scale(${scale})`;
            } else {
                if (scale == 1) {
                    img.style.left = 0 + "px";
                    img.style.top = 0 + "px";
                }
                // 缩放值大于1时,可以缩小,反之亦然
                if (scale > 1) {
                    scale -= 0.05;
                    img.style.transform = `scale(${scale})`;
                }
            }
        }
        img.addEventListener("wheel", fun)

        // getSyData()
        // getSlData()
        // getWyData()
        // getDmData()
        return () => {
            img.removeEventListener("wheel", fun)
        }

    }, [])
    return (
        <div style={{ backgroundColor: '#fff', height: '100%' }}>
            <div style={{ display: 'flex', justifyContent: 'start', alignItems: 'center', }}>
                {list.map(item => <div className={url == item.img ? stylesCss.active : stylesCss.tabCheck} onClick={() => tabClick(item)}>{item.name}</div>)}
            </div>
            <Rnd
                    default={{
                        x: 10,
                        y: 60,
                        width: '80%',
                        height: 'calc(100% - 100px)'
                    }}
                >
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width:'72%',height:'98%',}}>
               
                    <Image src={url} id="img"  preview={false} />
                
            </div>
            </Rnd>
        </div>
    )
}
export default Page