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 = {
          newList: []
        };
	}

	static defaultProps = {
    list: [],
    report: ''
	}

  goToDetail(product, idx) {
    let {onReport} = this.props;

    if (onReport && typeof onReport === 'function') {
      onReport(product, idx);
    }

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

  render() {
    let { list } = this.props;
    let newList = list.map((item) => {
      if (!item.price) {
        item.price = ''
      }
      return item
    })
    return (
      <View className="product-list">
          {
            newList.map((item, index) => {
                return (
                <View className= "product-item" key = { index }>
                        <View onClick={this.goToDetail.bind(this, item, index + 1)} hover-class="none">
                            <Text className="product-price">{item.price ? '¥' + item.price : ''}</Text>
                            <Image src={getImgUrl(item.default_images, 376, 376)} mode="aspectFit" className="product-img"/>
                            <Text className="product-name">{item.product_name}</Text>
                        </View>
                    </View>
                )
            })
          }
      </View>
    )
  }
}