import Taro, {Component} from '@tarojs/taro';
import {View, Text, Button} from '@tarojs/components';
import { connect } from '@tarojs/redux';
import {productDetail as productDetailModel} from '../../models';
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 || 0,
            canBuy: item.skup > 0,
            curLowestPrice: item.lowest_price || item.least_price || 0,
        });
    }

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

        showSizeBox(false);
    }

    onClickBuy(canBuy) {
      if (!canBuy) {
        return;
      }
      productDetailModel.createPaymentinfo(this.state.selectedskup).then(data => {
        if (data && data.code === 200) {
            let {product_id, onConfirmSelect} = this.props;
            onConfirmSelect && onConfirmSelect(this.state.selectedskup);
            this.state.canBuy && Taro.navigateTo({
              url: `/pages/order/orderConfirm/orderConfirm?skup=${this.state.selectedskup}&&product_id=${product_id}`,
            })
        } else {
            Taro.showToast({
                title: data.message,
                icon: 'none'
            })
        }
      }).catch(error => {
        Taro.showToast({
            title: error.message,
            icon: 'none'
        })
      })
    }

    onTouchMove() {

    }

    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" catchtouchmove = {this.onTouchMove.bind(this)}>
                <View className="mask" onClick={this.onClickMask}></View>
                <View className="select-size">
                    <Text className="title">选择尺码</Text>
                    {
                        sizeLength > 0 &&
                        <View className="size-list">
                            {
                                sizeList.map((item, index) => {
                                  let price;
                                  if (item.skup > 0) {
                                    price = `¥${item.lowest_price || item.least_price}`;
                                  } else {
                                    price = item.lowest_price || item.least_price;
                                    price = price ? `¥${price}` : '-';
                                  }
                                  let rightStyle = ''
                                  let topStyle = ''
                                  if (index < 5) {
                                    topStyle = 'top-border'
                                  }
                                  if (index !== 0 && (index + 1) % 5 === 0) {
                                    rightStyle = 'right-border'
                                  } else if (index === sizeLength - 1) {
                                    rightStyle = 'right-border'
                                  }
                                    return (
                                        <View key={item.size_id} className={curSelect === item.size_id ? `actived ${sizeStyle}` : `${sizeStyle} ${topStyle} ${rightStyle}`} 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>
                    }
                    {
                        this.state.canBuy && this.state.curPrice > this.state.curLowestPrice ?
                        (<View className='btn-group'>
                            <Button className='buy-btn btn-col' hover-class='none' onClick={this.onClickBuy.bind(this, this.state.canBuy)} data-can-buy={this.state.canBuy}>
                            现货购买
                            {
                                this.state.canBuy && this.state.curPrice &&
                                <Text className="price"> ¥{this.state.curPrice}</Text>
                            }
                            </Button>
                            {this.state.canBuy && <Button className='dowload-btn btn-col' hover-class='none'>
                                <Text>下载有货app体验</Text>                                
                                <Text className="price"> 更低价 ¥{this.state.curLowestPrice}</Text>
                            </Button>}
                        </View>) 
                        : 
                        <Button className='buy-btn disabled' hover-class='none' onClick={this.onClickBuy.bind(this, this.state.canBuy)} data-can-buy={this.state.canBuy}>
                            {
                                this.state.curPrice > this.state.curLowestPrice ? '下载有货app体验更低价 ¥' + this.state.curLowestPrice : '现货购买'
                            }
                        </Button>
                    }
                    
                </View>
            </View>
        )
    }
}