import React, {PureComponent} from 'react';
import './index.scss'
import {guochaoListApi} from '../../api/guochaoApi'
import {linkToMiniApp, invokeMethod} from "../../../../common/utils";
import wx from "weixin-js-sdk";
import wxshare from "../../../../common/wxshare";


export default class top40 extends PureComponent {
    constructor(props) {
        document.title ='中西碰撞 潮流无界'
        super(props);
        this.state = {
            env:'',
            data: [],
            display:false
        }
        this.init();
        this.scrollTop = this.scrollTop.bind(this);
        let shareData={
            title: '国潮崛起年，中西碰撞博出位！',
            imgUrl: 'https://img01.yohoboys.com/o_1cnilugbs15ajak1gfo1d2h1p348.png?imageView2/1/w/200/h/200',
            desc: '这里有一份中西潮流榜单，请收好！',
            link: 'https://ad.yoho.cn/html5/2018/09/guochao/40.html',
            success: function () {

            }
        }
        wxshare(shareData);
    }

    async init() {
        let list = await guochaoListApi({});
        if (list.result)
            this.setState({
                data: list.data
            })
        this.wxReady();
    }

    componentDidMount= ()=> {
        this.wxReady();
        window.addEventListener('scroll',this.handleScroll);
    };

    componentWillUnmount= ()=> {
        window.removeEventListener('scroll',this.handleScroll);
    };

    scrollTop= ()=> {
        let _this = this;
        let timer = setTimeout(function() {
            window.scrollBy(0, -100);
            if (window.pageYOffset <= 0) {
                clearTimeout(timer);
            }else{
                _this.scrollTop();
            }
        }, 20);
    };

    handleScroll=()=> {
        let  _this = this;
        if (window.pageYOffset >100) {
            _this.setState({ display: true });
        }else {
            _this.setState({ display: false });
        }
    };


    wxReady= async ()=> {
        let envFlag = window.__wxjs_environment;
        if (!envFlag && navigator.userAgent.match(/yohobuy/i)) {
            document.addEventListener('deviceready', function () {
            });
            this.setState({env: "app"});
        } else if (!envFlag && navigator.userAgent.match(/miniProgram/i)) {
            this.setState({env: "miniprogram"});
            envFlag = true
        } else {
            this.setState({env: 'h5'})
        }
        if (envFlag == 'miniprogram') {
            if (wx.miniProgram.postMessage) {
                wx.miniProgram.postMessage({
                    data: {
                        title: '中西碰撞 潮流无界'
                    }
                });
            }
            this.setState({env: "miniprogram"});
        }
    };
    goBack = () =>{
        if(this.state.env === 'app'){
            invokeMethod({method:'go.back'})
        }else if(this.state.env === 'miniprogram'){
            wx.miniProgram.navigateBack();
        }else{
            history.go(-1);
        }
    }

    render() {
        let {data ,env} = this.state;
        let list = (data, select) =>{
            let arr = [];
            if(data.length){
                data.map((value,index) =>{
                    if(value.place == select){
                        arr.push(<a className='item'
                                    data-url={`/pages/goodsList/brandStore?shop_id=${value.shop_id}&shop_name=${value.shop_name}`} onClick={linkToMiniApp} data-type="miniApp"
                                    href={env === "miniprogram" ? "javascript:void(0)" : value.url}
                                    key={value.id}><img src={'https:' + value.logo}/></a>)
                    }
                })
            }
            return arr;
        }
        return (
            <div className='wrap'>
                <a onClick={()=>{this.goBack()}} className='back'></a>
                <div onClick={this.scrollTop} className={this.state.display?'toTop':''}></div>
                <div className='up'>
                    {list(data,0)}
                </div>
                <div className='down'>
                    {list(data,1)}
                </div>
            </div>
        )
    }

}