import Taro, {Component} from '@tarojs/taro';
import {View, Text, Button} from '@tarojs/components';
import { connect } from '@tarojs/redux';
import { showSizeBox } from '../../actions/productDetail'

import './index.scss';

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

export default class SelectSize extends Component {
    constructor(props) {
        super(props);

        this.state = {
            curSelect: '',
            selectedskup: 0,
            canBuy: false,
            curPrice: '',
            hide: false
        };
    }

    static defaultProps = {
        sizeList: []
    }

    onChangeSize(item) {
        this.setState({
            curSelect: item.size_id,
            selectedskup: item.skup,
            curPrice: item.least_price,
            canBuy: item.storage_num > 0
        });
    }

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

        showSizeBox(false);
    }

    onClickBuy() {
      let {product_id} = this.props;
      this.state.canBuy && Taro.navigateTo({
        url: `/pages/order/orderConfirm/orderConfirm?skup=${this.state.selectedskup}&&product_id=${product_id}`,
      })
    }

    render() {
        let {sizeList} = this.props;
        let curSelect = this.state.curSelect;
        let sizeLength = sizeList.length;
        let sizeStyle = 'size-item';

        if (sizeLength <= 5) {
            sizeStyle = 'size-item top-border';
        }

        return (
            <View className="size-area">
                <View className="mask" onClick={this.onClickMask}></View>
                <View className="select-size">
                    <Text className="title">选择尺码</Text>
                    {
                        sizeLength > 0 &&
                        <View className="size-list">
                            {
                                sizeList.map(item => {
                                  let price;
                                  if (item.storage_num > 0) {
                                    price = `¥${item.least_price}`;
                                  } else {
                                    price = '-';
                                  }
                                    return (
                                        <View key={item.size_id} className={curSelect === item.size_id ? `actived ${sizeStyle}` : sizeStyle} onClick={this.onChangeSize.bind(this, item)}>
                                            <View className={item.storage_num > 0 ? 'size' : 'size gray'}>{item.size_name}</View>
                                            {
                                                curSelect !== item.size_id &&
                                                <View className={item.storage_num > 0 ? 'price' : 'price gray'}>{price}</View>
                                            }
                                        </View>
                                    )
                                })
                            }
                        </View>
                    }

                    <Button className={this.state.canBuy ? 'buy-btn' : 'buy-btn disabled'} hover-class='none' onClick={this.onClickBuy}>
                        购买
                        {
                            this.state.canBuy && this.state.curPrice &&
                            <Text className="price">¥{this.state.curPrice}</Text>
                        }
                    </Button>
                </View>
            </View>
        )
    }
}