alldish

import React, { Component, Fragment } from 'react'
import { withRouter } from 'react-router-dom';
import alldish from "../../scss/classify/alldish.module.scss"
import axios from 'axios';
import Swiper from "swiper"




class AllDish extends Component {
    constructor() {
        super()
        this.state = {
            list_alldish: [],//全部作业数组
            pageIndex: 0,//定义再次加载数据的参数
            imgs: [],//弹窗所有图片的数组
            isshow: false,//定义弹窗显示属性
            style: {//定义弹窗图片的大小，这里固定大小
                width: "100%",
                height: "400px",
                marginTop: '130px'
            }
        }

    }
    componentDidMount() {
        this.get_alldish()
    }
    //点击过来拿到所有数据
    get_alldish = () => {
        axios.get(`https://api.hongbeibang.com/dish/getAll?&pageIndex=${this.state.pageIndex}&pageSize=10&contentId=${this.props.match.params.id}`)
            .then((res) => {
                if (this.state.list_alldish.length === 0) {
                    this.setState({
                        list_alldish: res.data.data.dish.data

                    })
                } else {
                    let newArr = this.state.list_alldish
                    newArr = newArr.concat(res.data.data.dish.data)
                    this.setState({
                        list_alldish: newArr
                    }, () => {
                        console.log(this.state.list_alldish)
                    })
                }

            })
    }
    //滚动事件，修改发送请求参数
    get_Scroll = (e) => {
        let { scroll } = this.refs
        // scrollTop为滚动条在Y轴上的滚动距离。
        // clientHeight为内容可视区域的高度。
        // scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。
        if (scroll.scrollHeight >
            scroll.clientHeight && scroll.scrollHeight - (scroll.scrollTop +
                scroll.clientHeight) < 1 && scroll.scrollHeight - (scroll.scrollTop +
                    scroll.clientHeight) > -1) {

            this.setState({
                pageIndex: this.state.pageIndex + 10,
            }, () => {
                this.get_alldish()
            })
        }
    }
    //点击图片打开弹窗大图显示
    imgClick = (data, index) => {
        this.setState({
            imgs: data,
            isshow: true
        }, () => {
            new Swiper('.swiper-container', {
                //进来默认展示第几个
                initialSlide: index,
                // loop: true, // 循环模式选项
                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },
                //修改swiper自己或子元素时，自动初始化swiper 
                // observer:true,
                // observeParents:true
            })
        })

    }
    //关闭弹窗
    onClose() {
        this.setState({
            isshow: false
        })
    }
    //点击作业内容跳转作业详情页
    toDishDetail = (id) => {
        this.props.history.push(`/dishDetail/${id}`)
        console.log(`${id}`)
    }
    //点击头像跳转至个人详情页
    toClient = (id) => {
        // this.props.history.push(`/client/${id}`)
    }
    //点击返回上一页
    back = () => {
        this.props.history.go(-1)
    }


    render() {
        let { list_alldish, style, imgs, isshow } = this.state
        return (
            <Fragment>
                <div className={isshow ? alldish.swiper : alldish.swiper1} onClick={this.onClose.bind(this)}>
                    <div className='swiper-container' ref="swiper">
                        <div className='swiper-wrapper'>
                            {
                                imgs.map((item, index) => {
                                    return (
                                        <div className='swiper-slide' key={index} style={style}>
                                            <img src={item} alt="" />
                                        </div>
                                    )
                                })
                            }
                            <div className="swiper-pagination"></div>

                        </div>
                    </div>

                </div>
                <div className={alldish.top} onClick={this.back.bind(this)}>
                    <img src={require("../../imgs/left.png")} alt="" />
                    <h4>烘焙帮</h4>
                </div>
                <div className={alldish.content} ref="scroll" onScroll={this.get_Scroll}>
                    <div className={alldish.kong}></div>


                    {
                        list_alldish.map((item, index) => {
                            return <div key={index} className={alldish.item}>
                                <div className={alldish.person}>
                                    <div className={alldish.div1} onClick={this.toClient.bind(this, item.clientId)}>
                                        <img src={item.clientImage} alt="" />
                                    </div>
                                    <div className={alldish.div2} onClick={this.toDishDetail.bind(this, item.contentId)}>
                                        <p className={alldish.authorname}>{item.clientName}</p>
                                        <p className={alldish.time}><span>{item.createTime.substring(0, item.createTime.length - 3)}</span><span>{item.coverTitle}</span></p>
                                    </div>

                                </div>
                                <div className={alldish.text} onClick={this.toDishDetail.bind(this, item.contentId)}>{item.coverSummary}</div>
                                <div className={alldish.imgbox}>
                                    {
                                        item.image.map((item1, index1) => {
                                            return (
                                                <img src={item1} alt="" key={index1}
                                                    onClick={this.imgClick.bind(this, item.image, index1)}
                                                    className={item.image.length === 2 ? alldish.img1 :
                                                        item.image.length === 1 ? '' : alldish.img3} />
                                            )
                                        })
                                    }
                                </div>
                                <div className={alldish.ul_bottom}>
                                    <div>点赞: {item.likeNum}</div>
                                    <div>打赏: {item.rewardNum}</div>
                                    <div>评论</div>
                                </div>
                            </div>
                        })
                    }
                </div>
            </Fragment>
        )
    }
}
export default withRouter(AllDish)