import React from 'react';
import { browser, isObject } from 'cbkfe-utils';
import { TelBtn, Img } from 'cbkfe-ui';
import { gd_openNewWebView } from 'cbkfe-bridge';
import './style';

const isAmapApp = browser.parseUA.isAmapApp;
export default class FitStoreCard extends React.Component {

    state = {
        icons: {
            park: 'https://static.caibeike.com/i/67f0f96874d6c49f2d60f3b51c96952a-S8djtR',  // 停车
            store: 'https://static.caibeike.com/i/f7aebae00cf84bc117ce0cf432c1ccc2-5tX4wU', // 门店
            time: 'https://static.caibeike.com/i/acbd8da6bda68359b8e7c6883c91ea6f-5ETs0a',  // 营业时间
            gather: 'https://static.caibeike.com/i/9e8ea561222cbda9e77a7e0a035531eb-aT94z0-CgwCghp1', // 集合地点
            notification: 'https://static.caibeike.com/i/bc58fe6426bc2062f3c97a3287f8aa4b-cgf9o1-CgwCghp1'  // 门票须知
        }
    }

    handleStoreClick = () => {
        const { data } = this.props;
        if (data.shopId) {
            if (isAmapApp) {
                let url = location.origin + `/ms/shop/detail/${data.shopId}`;
                gd_openNewWebView({ url });
                return;
            }
            location.href = browser.parseUA.isApp ? `caibeike://shopinfo?shopid=${data.shopId}`
                : `/ms/shop/detail/${data.shopId}`;
        } else {
            return false;
        }
    }

    render() {
        const { classname, data, carProps = {}} = this.props;
        const { icons } = this.state;
        if (!isObject(data, true)) {
            return null;
        }
        return <div className={`fitStoreCard-container ${classname || ''}`}>
            <div {...carProps.product || {}} className="product-wrap">
                <div className="product-img" onClick={this.handleStoreClick}>
                    <Img url={data.imageUrl} />
                </div>
                <div className="product-detail" onClick={this.handleStoreClick}>
                    <h3 className="product-detail-title">{data.storeName}</h3>
                    <p className="product-detail-classify">
                        {data.tags && data.tags.map((item, index) => {
                            return index === 0 ? item : '｜' + item;
                        })}
                    </p>
                    {(data.distanceTitle || data.distance) && <p className="product-detail-distance">
                        <i className="iconfont icon--address address-icon" />
                        {data.distanceTitle || data.distance}
                    </p>}
                </div>
                {data.phone ? (
                    <div {...carProps.phoneProps}><TelBtn className="product-tel iconfont icon--call" telNum={data.phone} /></div>
                ) : null}
            </div>

            <div className="info-wrap">
                {data.address && <div className="info-title-wrap info-title-wrap-address">
                    <span className="info-title" style={{
                        backgroundImage: `url('${icons.store}')`
                    }}>活动地址：</span>
                    <div className="info-desc">
                        <span className="info-desc-item info-desc-item-address">{data.address}</span>
                        {data.transitInfo
                            && <span className="info-desc-item info-desc-item-address2">{data.transitInfo}</span>}
                    </div>
                </div>}
                {data.gatherPlace && <div className="info-title-wrap">
                    <span className="info-title" style={{
                        backgroundImage: `url('${icons.gather}')`
                    }}>集合地点：</span>
                    <div className="info-desc">
                        <span className="info-desc-item info-desc-gather">{data.gatherPlace}</span>
                    </div>
                </div>}
                {data.ticketPolicyDesc && <div className="info-title-wrap">
                    <span className="info-title" style={{
                        backgroundImage: `url('${icons.notification}')`
                    }}>门票须知：</span>
                    <div className="info-desc">
                        <span className="info-desc-item info-desc-gather">{data.ticketPolicyDesc}</span>
                    </div>
                </div>}
                {data.parkingInfo && <div className="info-title-wrap">
                    <span className="info-title" style={{
                        backgroundImage: `url('${icons.park}')`
                    }}>停车信息：</span>
                    <div className="info-desc">
                        <span className="info-desc-item">{data.parkingInfo}</span>
                        <span className="info-desc-item">(该信息仅供参考，请以实际为准)</span>
                    </div>
                </div>}
            </div>
        </div>;
    }
}