import Taro, {Component} from '@tarojs/taro';
import {View, Text, Image, Navigator} from '@tarojs/components';
import {getImgUrl} from '../../utils';
import './index.scss';
import router from '../../router/index.js'

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

        this.state = {};
	}
	
	static defaultProps = {
        list: []
	}

  goToDetail(product) {
    router.go('productDetail', {
      id: product.id
    });
  }

  render() {
    let {list} = this.props;

    return (
      <View className="product-list">
          {
            list.map(item => {
                return (
                    <View className="product-item" key={item.id}>
                        <View onClick={this.goToDetail.bind(this, item)} hover-class="none">
                            <Text className="product-price">{item.price ? '¥' + item.price : ''}</Text>
                            <Image src={getImgUrl(item.default_images, 376, 376)} mode="aspectFill" className="product-img"/>
                            <Text className="product-name">{item.product_name}</Text>
                        </View>
                    </View>
                )
            })
          }
      </View>
    )
  }
}