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 './index.less'
import { useState } 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)
    }
    return (
        <div style={{ backgroundColor: '#fff', height: '100%' }}>
            <div style={{ display: 'flex', justifyContent: 'start', alignItems: 'center', }}>
                {list.map(item=><div className={url==item.img?"active":"tabCheck"}  onClick={()=>tabClick(item)}>{item.name}</div>)}
            </div>
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center',overflow:'auto',height:'calc(100% - 100px)' }}>
                <Image src={url}  width='80%' preview={false} />
            </div>
        </div>
    )
}
export default Page