import Taro, {Component} from '@tarojs/taro';
import {View, Swiper, SwiperItem, Image} from '@tarojs/components';
import {productDetail as productDetailModel} from '../../models';
import {getImgUrl} from '../../utils';
import {ProductList, SelectSize} from '../../components';
import { connect } from '@tarojs/redux';
import { showSizeBox } from '../../actions/productDetail'

import share from '../../static/images/share.png';
import collect from '../../static/images/collect.png';
import collectOff from '../../static/images/collect-off.png';
import './index.scss';
import event from '../../utils/event'

@connect(({ productDetail }) => ({
    productDetail
}), (dispatch) => ({
    showSizeBox (isShow) {
        dispatch(showSizeBox(isShow))
    }
}))

export default class ProductDetail extends Component {
    constructor() {
        this.state = {
            id: '',
            productInfo: {},
            goodsList: {},
            swiperNum: '1 | 1',
            recommendList: [],
            collectTitle: '收藏',
            isFavorite: false,
            productDec: {
                color: {
                    text: '颜色',
                    value: ''
                },
                brand: {
                    text: '品牌',
                    value: ''
                },
                series: {
                    text: '系列',
                    value: ''
                },
                saleTime: {
                    text: '发货时间',
                    value: ''
                },
                productCode: {
                    text: '货号',
                    value: ''
                }
            }
        };
    }

    componentDidMount() {
        let id = this.$router.params.id;

        this.setState({
            id: id
        });

        this.getProductData(id);
        this.getRecommendGoods(id);
        this.getFavoriteState(id);
    }

    getProductData(id) {
        productDetailModel.getProductData(id).then(ret => {
            if (ret && ret.code === 200) {
                let data = ret.data || {};
                let productInfo = data && data.product_info || {};
                let goodsList = productInfo.goods_list && productInfo.goods_list.length > 0 && productInfo.goods_list[0] || {};
                let imageSize = goodsList.image_list.length;

                this.setState({
                    productInfo: productInfo,
                    imageSize: imageSize,
                    goodsList: goodsList,
                    swiperNum: `1 | ${imageSize}`,
                    productDec: [
                        {
                            text: '颜色',
                            value: goodsList.color_name
                        }, {
                            text: '品牌',
                            value: productInfo.brand_name
                        }, {
                            text: '系列',
                            value: productInfo.series_name
                        }, {
                            text: '发货时间',
                            value: productInfo.sale_time
                        }, {
                            text: '货号',
                            value: productInfo.product_code
                        }
                    ]
                });
            }
        });
    }

    getRecommendGoods(id) {
        productDetailModel.getRecommendGoods(id).then(ret => {
            if (ret && ret.code === 200) {
                this.setState({
                    recommendList: ret.data && ret.data.product_list
                });
            }
        });
    }

    getFavoriteState(id) {
        productDetailModel.getFavoriteState(id).then(ret => {
            if (ret && ret.code === 200) {
                this.setState({
                    isFavorite: ret.data,
                    collectTitle: ret.data ? '已收藏' : '收藏'
                });
            }
        });
    }
    
    onChangeSwiper(e) {
        this.setState(prevState => ({
            swiperNum: `${e.detail.current + 1} | ${prevState.imageSize}`
        }));
    }

    onClickCollect(id, e) {
        let {isFavorite} = this.state;
        let that = this;
        isFavorite = !isFavorite;

        event.emit('user-is-login',function () {
            that.handleCollectAction(id, isFavorite);
        },function () {
            that.handleCollectAction(id, isFavorite);
        })
    }
    
    handleCollectAction(productId, isFavorite) {
        if (isFavorite) {//添加收藏
            productDetailModel.addFavorite(productId).then(ret => {
                if (ret && ret.code === 200) {
                    this.setState({
                        collectTitle: '已收藏',
                        isFavorite: true
                    });
                }
            });
        } else {//取消收藏
            productDetailModel.cancelFavorite(productId).then(ret => {
                if (ret && ret.code === 200) {
                    this.setState({
                        collectTitle: '收藏',
                        isFavorite: false
                    });
                }
            });
        }
    }

    onClickBuy() {
        let {showSizeBox} = this.props;

        event.emit('user-is-login',function () {
          showSizeBox(true);
        },function () {
          showSizeBox(true);
        })
    }

    render() {
        let {productInfo, recommendList, goodsList, productDec, id} = this.state;
        let imageList =  goodsList.image_list || [];

        return (
            <View className="product-page">
                <View className="swiperNum">{this.swiperNum}</View>
                <Swiper className='product-swiper' autoplay onChange={this.onChangeSwiper}>
                    {
                        imageList.map((item, index) => {
                            return (
                                <SwiperItem key={index}>
                                    <Image src={getImgUrl(item.image_url, 750, 750)} class="swiper-img" mode="aspectFill"/>
                                </SwiperItem>
                            )
                        })
                    }
                </Swiper>

                <View className="product-ctr">
                    <View className="collect" onClick={this.onClickCollect.bind(this, id)}>
                        <Image src={isFavorite ? collect : collectOff} className="collect-icon"/>
                        <Text className="text">{collectTitle}</Text>
                    </View>
                    <View className="share">
                        <Image src={share} className="share-icon"/>
                        <Text className="text">分享</Text>
                    </View>
                </View>

                <View className="product-name">{productInfo.product_name}</View>

                {
                    productDec.map(item => {
                        return (
                            <View className="product-info" key={item.text}>
                                <Text className="lable">{item.text}</Text>
                                <Text className="value">{item.value}</Text>
                            </View>
                        )
                    })
                }

                <View className="product-dec">
                    正品保障<Text className="c"></Text>专业鉴定<Text className="c"></Text>银联担保
                </View>

                <View className="recommend-goods">
                    <View className="title">相关推荐</View>
                    <ProductList list={recommendList}></ProductList>
                </View>

                <View className="product-buy">
                    {/* <View className="sell-btn">出售</View> */}
                    <View className="buy-btn" onClick={this.onClickBuy}>购买
                      { productInfo.least_price && <Text className="price">¥{productInfo.least_price}</Text>}
                    </View>
                </View>

                {
                    this.props.productDetail.showSizeBox &&
                    <SelectSize sizeList={goodsList.size_list} product_id={id}></SelectSize>
                }
            </View>
        )
    }
}