import React from 'react'
import { Swiper, Grid } from 'antd-mobile'
import axios from 'axios';
import WidthUseNavigate from '../WidthUseNavigate';
import './index.css'
import ImgZZ from './../../assets/images/nav-1.png'
import ImgHZ from './../../assets/images/nav-2.png'
import ImgDTZF from './../../assets/images/nav-3.png'
import ImgQCZ from './../../assets/images/nav-4.png'

const localCatalog = [
    { "imgSrc": ImgZZ, "title": "整租" ,"path":"/todo"},
    { "imgSrc": ImgHZ, "title": "合租" ,"path":"/todo"},
    { "imgSrc": ImgDTZF, "title": "地图找房" ,"path":"/message"},
    { "imgSrc": ImgQCZ, "title": "去出租" ,"path":"/me"}
]
class HomeInner extends React.Component {
    state = {
        swipers: []
    }
    async getSwitpers() {
        const res = await axios.get('http://localhost:8080/home/swiper')
        console.log('轮播图信息' + res.data.body)
        this.setState(
            { swipers: res.data.body }
            //     ()=>{
            //     return{swipers:res.data.body}
            // }
        )
    }
    componentDidMount() {
        this.getSwitpers()
    }

    renderSwipers() {
        return this.state.swipers.map(item => (<Swiper.Item key={item.id}>
            <img
                src={'http://localhost:8080' + item.imgSrc}
                style={{ width: '100%', verticalAlign: 'top' }}
            />
        </Swiper.Item>))
    }

    render() {
        return <div className='context'>
            <Swiper autoplay loop>{this.renderSwipers()}</Swiper>
            <Grid columns={4}>
                {
                    localCatalog.map((item,index) => (
                        <Grid.Item key={index} onClick={()=>{
                            console.log("点击跳转")
                            this.props.to(item.path)}}>
                            <div ><img src={item.imgSrc} /><h2>{item.title}</h2></div>
                        </Grid.Item>
                    ))
                }
            </Grid>
        </div>
    };
}
// 使用高阶组件包裹当前类组件
const Home = WidthUseNavigate(HomeInner);
// 导出包裹后的类组件
export default Home;