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: [],
        isSwiperLoaded: false
    }
    async getSwitpers() {
        const res = await axios.get('http://localhost:8080/home/swiper')
        this.setState(
            {
                swipers: res.data.body,
                isSwiperLoaded: true
            },

            //     ()=>{
            //     return{swipers:res.data.body}
            // }
        )
    }
    componentDidMount() {
        this.getSwitpers()
    }

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

    render() {
        return <div className='context'>
            <div className='context-swapper'>
                {
                    this.state.isSwiperLoaded ? <Swiper autoplay loop autoplayInterval='1500'>{this.renderSwipers()}</Swiper> : ""
                }
            </div>


            <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;