import React from 'react';
import { Img } from 'cbkfe-ui';
import CollectModal from '../CollectModal';
import { browser, isArray } from 'cbkfe-utils';
import { gd_openNewWebView } from 'cbkfe-bridge';
import { requestLike } from './action';
import './style';

const isAmapApp = browser.parseUA.isAmapApp;

export default class ExperiencerCard extends React.Component {

    state = {
        isShow: false,
        icons: {
            auth: 'https://static.caibeike.com/i/a4ef9b125812d8909e6e87883e9ba743-JMWGLz',    // 认证
            collect: 'https://static.caibeike.com/i/1b809a5af1f5092d359fe3ec23745ec5-PtDyE7', // 采集
            // collected: 'https://static.caibeike.com/i/f675240f2deeddb1f86854dc964c9782-iwrYFQ', // 已采集
            like: 'https://static.caibeike.com/i/c36290e0ea7d211d273b0d28579207e1-tdrke4',    // 赞
            liked: 'https://static.caibeike.com/i/17b7f7ab7a3411a30920890abad31795-0IUtIP',   // 已赞
            nice: 'https://static.caibeike.com/i/085487e1c8c16b1e9bb04f09ef5cc107-qxOzkV',    // 精选
            city: 'https://static.caibeike.com/i/7c61a1130a5ccbaf976005f319c0b8ba-5NRE5Q',    // 城市
            lollipop: 'https://static.caibeike.com/i/9a2d8a22f2a38cd46dd458d9cba3be4b-z4nHxo',    // 棒棒糖
        },
        choosedPlace: null,
        localData: null, // 本地化
        _randomCount: 0,
        isApp: browser.parseUA.isApp
    }


    componentDidMount() {
        const { data } = this.props;
        let _obj = {};
        data.map(item => {
            _obj[item.placeId] = {
                hasLike: item.hasLike,
                likeNumber: item.likeNumber,
                likeImages: item.likeImages || [],
                albumNum: item.albumNum
            };
        });
        this.setState({
            localData: _obj
        });
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        const { data, randomCount } = nextProps;
        const { _randomCount } = prevState;

        if (randomCount !== _randomCount) {
            let _obj = {};
            data.map(item => {
                _obj[item.placeId] = {
                    hasLike: item.hasLike,
                    likeNumber: item.likeNumber,
                    likeImages: item.likeImages || [],
                    albumNum: item.albumNum
                };
            });
            return {
                localData: _obj,
                _randomCount: randomCount
            };
        } else {
            return null;
        }
    }


    // 采集
    handleCollectClick = (item) => {
        // 未登录，调用点赞接口跳转到登录页面
        if (!this.props.hasLogin) {
            return requestLike({ placeId: '-1', type: 0 });
        }
        this.setState({
            choosedPlace: item,
            isShow: true
        });
    }

    // 点赞 0点赞 1取消
    handleLikeClick = (item) => {
        const { placeId } = item;
        const imageUrl = this.props.loginImage;
        let { localData } = this.state;
        const isLike = localData[placeId].hasLike;

        // 未登录，调用点赞接口跳转到登录页面
        if (!this.props.hasLogin) {
            return requestLike({ placeId: '-1', type: 0 });
        }

        isLike ? localData[placeId].likeNumber-- : localData[placeId].likeNumber++;
        isLike ? localData[placeId].likeImages.shift() : localData[placeId].likeImages.unshift(imageUrl);
        localData[placeId].hasLike = !localData[placeId].hasLike;

        this.setState({
            localData
        }, () => {
            requestLike({ placeId, type: Number(isLike) });
        });
    }

    /**
     * 修改采集状态
     * status: ADD  REMOVE
     */
    handleChangeAlbumStatus = (status) => {
        let { choosedPlace, localData } = this.state;
        const { placeId } = choosedPlace;

        if (status === 'ADD') {
            localData[placeId].albumNum++;
            this.setState({});
        }
        if (status === 'REMOVE') {
            localData[placeId].albumNum > 0 ? localData[placeId].albumNum-- : localData[placeId].albumNum = 0;
        }
    }

    /**
     * 相册展示
     */
    renderAlbum = ({ images = [], travelType, videoGifUrl }) => {
        const total = images.length; // 记录总个数 后面会slice掉
        if (total === 0) {
            return null;
        }
        images = images.slice(0, 3);
        let num = images.length;
        let isVideoImg = null;
        let isVideo = false;

        if (travelType === 2) {
            if (videoGifUrl && this.state.isApp) {
                images[0] = videoGifUrl;
                isVideo = true;
            } else {
                isVideoImg = <img className="groupon-video-icon" src="https://static.caibeike.com/i/32bd5611f66d43d689e51fe780f953f0-yXO7gx-bfAwbfAhp1" />;
            }
        }

        // total > 3 才显示更多
        return <div className="experiencer-album-content">
            <div className="experiencer-album__side">
                <div className="experiencer-album__sideItem image-bg" >
                    {isVideoImg}
                    {isVideo
                        ? <img className="experiencer-album__image" src={images[0]} />
                        : <Img url={images[0]} size="s640" />
                    }
                </div>
            </div>
            {num > 1 && <div className={`experiencer-album__side experiencer-album__side--${num - 1}`}>
                {images.slice(1, 3).map((img, index) => {
                    return <div key={index} className="experiencer-album__sideItem image-bg" >
                        {(total > 3 && index === 1) ? <div className="three-img-mask">
                            <span className="mask-add">+</span>
                            <span className="mask-num">{total - 3}</span>
                        </div> : null}
                        <Img url={img} size="s640" />
                    </div>;
                })}
            </div>}
        </div>;
    }


    // 接收单条推荐数据
    renderCard = (item, index) => {
        // const { icons, isLiked, isCollected, likeNumber, travelNumber, data } = this.state;
        const { icons, localData } = this.state;
        const {
            name,
            babyInfo,
            // location,
            imageUrl,
            useful,
            images,
            placeId,
            comment,
            travelUrl,
            travelType
        } = item;
        let _likeNumber = localData[placeId].likeNumber;
        let _likeImages = localData[placeId].likeImages || [];
        let _albumNum = localData[placeId].albumNum;
        let { onItemEach } = this.props;
        const likeContent = _likeNumber > 999 ? '999+' : (_likeNumber === 0 ? '' : _likeNumber);
        const albumContent = _albumNum > 999 ? '999+' : (_albumNum === 0 ? '' : _albumNum);
        const onHanleExperiencerHeaderClick = () => {
            if (isAmapApp) return;
            location.href = travelUrl;
        };

        const onHandleOpenExperiencerCard = () => {
            if (isAmapApp) {
                gd_openNewWebView({ url: travelUrl });
                return;
            }
            location.href = travelUrl;
        };

        const moreAttr = onItemEach && typeof onItemEach === 'function' ? this.props.onItemEach(item, index) : {};
        return <section {...moreAttr.itemProps || {}} className="experiencer-item-container">
            <div className="experiencer-header" onClick={onHanleExperiencerHeaderClick}>
                <div className="header-img">
                    <Img url={imageUrl} size="c150" />
                </div>
                <div className="header-wrap">
                    <p className="header-name"
                        style={{
                            backgroundImage: item.member ? `url("${icons.auth}")` : ''
                        }}
                    >{name}</p>
                    <div className="header-tag-wrap">
                        {item.location && <span className="header-tag header-tag-city">{item.location}</span>}
                        {babyInfo && <span className="header-tag header-tag-baby">{babyInfo}</span>}
                    </div>
                </div>
            </div>

            {/* 图片 */}
            <div className="experiencer-album" onClick={onHandleOpenExperiencerCard}>
                {useful && <img className="nice-icon" src={icons.nice} />}
                {this.renderAlbum(item)}
            </div>
            <div className="experiencer-poi-bar">
                <span className="experiencer-poi">
                    <img className="experiencer-poi-icon" src="https://static.caibeike.com/i/b8877a36e51550522cb2d83668d0e1c1-seCUeX-fgwfghp1" />
                    <span className="experiencer-poi-text">{item.shopName}</span>
                </span>
            </div>
            {/* 内容 */}
            <p className="experiencer-content" onClick={onHandleOpenExperiencerCard}>
                {comment}
            </p>


            <div className="experiencer-footer">
                <div className="footer-likelist">
                    {isArray(_likeImages, true) && _likeImages.slice(0, 3).map((item, index) => {
                        return <div key={index} className="like-img">
                            <Img url={item} size="c150" />
                        </div>;
                    })}
                </div>
                <p className="like-num">{localData[placeId].likeNumber > 0 ? `${localData[placeId].likeNumber}人点赞` : ''}</p>
                {/* 采集、点赞按钮 */}
                {
                    isAmapApp
                        ? null
                        : (<div className="footer-btnwrap">
                            <div className="footer-btn" {...moreAttr.collectProps || {}} onClick={() => { this.handleCollectClick(item) }}>
                            <img className="footer-icon" src={icons.collect} />
                            <span className="footer-count">{albumContent}</span>
                            </div>
                            <div id={`like-${placeId}`} {...moreAttr.likeProps || {}} className="footer-btn" onClick={() => { this.handleLikeClick(item) }}>
                                {/* <img
                                    className="footer-icon"
                                    src={localData[placeId].hasLike ? icons.liked : icons.like}
                                /> */}
                                {localData[placeId].hasLike
                                    ? <img className="footer-icon bounceIn" src={icons.liked} />
                                    : <img className="footer-icon" src={icons.like} />
                                }
                                <span className="footer-count">{likeContent}</span>
                            </div>
                        </div>)
                }
            </div>
        </section>;
    }

    render() {

        const { data, index = 0 } = this.props;

        const { isShow, choosedPlace, localData } = this.state;
        // 解决平团详情页被swiper组件覆盖，无法滚动的问题
        document.getElementById(`experiencer-swiper-${index}`) &&
            document.getElementById(`experiencer-swiper-${index}`).addEventListener('touchmove', (e) => {
                e.stopPropagation();
            }, true);

        return <div id={`experiencer-swiper-${index}`} className="experiencer-swiper" >
            {
                localData && data.length === 1
                    ? <div className="experiencer-card--only">{this.renderCard(data[0], 0)}</div>
                    : null
            }
            {
                localData ? <ul className="experiencer-list" onTouchStart={this.onTouchMove1} >
                    {data.map((item, index) => {
                        return <li className="list-item" key={index}>
                            {this.renderCard(item, index)}
                        </li>;
                    })}
                </ul> : null
            }

            <CollectModal
                key={isShow}
                isShow={isShow}
                handleMaskClick={() => { this.setState({ isShow: false }) }}
                choosedPlace={choosedPlace}
                callback={() => {
                    this.setState({ isShow: false });
                }}
                callbackImmediately={(status) => {
                    this.handleChangeAlbumStatus(status);
                }}
            />
        </div>;
    }
}