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';

@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: [],
            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);
    }

    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
                        }
                    ]
                });

                Taro.setNavigationBarTitle({
                    title: productInfo.product_name
                });
            }
        });
    }

    getRecommendGoods(id) {
        productDetailModel.getRecommendGoods(id).then(ret => {
            if (ret && ret.code === 200) {
                this.setState({
                    recommendList: ret.data && ret.data.product_list
                });
            }
        });
    }
    
    onChangeSwiper(e) {
        this.setState(prevState => ({
            swiperNum: `${e.detail.current + 1} | ${prevState.imageSize}`
        }));
    }

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

        showSizeBox(true);
    }

    render() {
        let {productInfo, recommendList, goodsList, productDec} = 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">
                        <Image src={collectOff} className="collect-icon"/>
                        <Text className="text">收藏</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}>购买<Text className="price">¥{productInfo.least_price}</Text></View>
                </View>

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