import * as React from 'react'
import { Layout, Menu, Carousel } from 'antd'
import './index.less'

import tu1 from '../../assets/images/waterInfor/img/tu1.jpg'
import tu2 from '../../assets/images/waterInfor/img/tu2.jpg'
import tu3 from '../../assets/images/waterInfor/img/tu3.jpg'

const { Sider, Content } = Layout;
interface IProps {
    
 }

interface IState {
    index?: any
    
}

class WaterInfoDetailPage extends React.Component<IProps, IState>{
    slider:any = undefined;  //解决slider报错
	constructor(props) {
        super(props)
        this.state = {
            index: 1
        }

    }
     // 点击右侧菜单栏触发的事件
    onOpenChange = ({ key }) => { 
      //  console.log(this.slider)
       // this.slider.slickGoTo(key)
        //this.slide:any = undefined;
       this.slider && this.slider.innerSlider.slickGoTo(key)
        this.setState ({
            index: key
        })
    }
    // onChange = ((a, b, c) => {
    //     console.log(a, b, c);
    // }
    render() {
        const settings = {
            dots: false,
         
          };
        return (
            <div className="water-detail-content">
               <Layout>
                    <Content className="Carousel-content"> 
                        <Carousel ref={slider => this.slider = slider} {...settings}>
                            <div key={1}>
                                <img src={tu1} />
                            </div>
                            <div key={2}>
                                <img src={tu1} />
                            </div>
                            <div key={3}>
                                <img src={tu2} />
                            </div>
                            <div key={4}>
                              <img src={tu3} />
                            </div>
                        </Carousel>
                    </Content>
                    <Sider style={{background:'#fff'}}>
                        
                        <Menu mode="inline" 
                            defaultSelectedKeys = {['1']}
                            onSelect={this.onOpenChange}>
                             <Menu.Item key="1">
                                {/* <span className="falg"></span> */}
                                <span className={`${1 == this.state.index ? 'active' : 'flag'}`}></span>
                                <span>水情</span>
                            </Menu.Item>
                            <Menu.Item key="2">
                                <span className={`${2 == this.state.index ? 'active' : 'flag'}`}></span>
                                <span>雨情</span>
                            </Menu.Item>
                            <Menu.Item key="3">
                                <span className={`${3 == this.state.index ? 'active' : 'flag'}`}></span>
                                <span>天气预报</span>
                            </Menu.Item>
                            <Menu.Item key="4">
                                <span className={`${4 == this.state.index ? 'active' : 'flag'}`}></span>
                                <span>天气预报</span>
                            </Menu.Item>
                            <Menu.Item key="5">
                                <span className={`${5 == this.state.index ? 'active' : 'flag'}`}></span>
                                <span>天气预报</span>
                            </Menu.Item>
                            <Menu.Item key="6">
                                <span className={`${6 == this.state.index ? 'active' : 'flag'}`}></span>
                                <span>天气预报</span>
                            </Menu.Item>
                            <Menu.Item key="7">
                                <span className={`${7 == this.state.index ? 'active' : 'flag'}`}></span>
                                <span>天气预报</span>
                            </Menu.Item>
                            <Menu.Item key="8">
                                <span className={`${8 == this.state.index ? 'active' : 'flag'}`}></span>
                                <span>天气预报</span>
                            </Menu.Item>
                            <Menu.Item key="9">
                                <span className={`${9 == this.state.index ? 'active' : 'flag'}`}></span>
                                <span>天气预报</span>
                            </Menu.Item>
                            <Menu.Item key="10">
                                <span className={`${10 == this.state.index ? 'active' : 'flag'}`}></span>
                                <span>天气预报</span>
                            </Menu.Item>
                            <Menu.Item key="11">
                                <span className={`${11 == this.state.index ? 'active' : 'flag'}`}></span>
                                <span>天气预报</span>
                            </Menu.Item>
                        </Menu>
                    </Sider>
                   
               </Layout>
            </div>
        )
    
    }
}
export default WaterInfoDetailPage