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', padding: 10 }}>
                {list.map(item => <div className={url == item.img ? stylesCss.active : stylesCss.tabCheck} onClick={() => tabClick(item)}>{item.name}</div>)}
            </div>
            <div style={{height: 'calc(100% - 60px)',textAlign:'center',padding:20,overflow:'auto'}}>
                <Image src={url} width='80%' preview={false} />
                </div>
        </div>
    )
}
export default Page