<template>
	<!-- 搜索 -->
	<view class="FoodWrap">
	  <scroll-view class="food-list" scroll-y="true" @scrolltolower="onScrollToLower">
	    <view class="food-item" v-for="(item,index) in foodList" :key="index" @click="onSelect(item)">
        <image :src="item.pic_url" mode="aspectFill"></image>
        <view class="food-info">
          <text class="name">{{item.name}}</text>
          <text class="kcal">{{item.kcal}}Kcal/100g</text>
        </view>
      </view>
	  </scroll-view>
	</view>
</template>

<script>
	export default {
		name: "FoodItem",
    props: ['foodList'],
		data() {
			return {
			};
		},
		methods: {
			onScrollToLower() {
        this.$emit('scroll')
			},
      onSelect(item) {
        this.$emit('select',item)
      }
		}
	}
</script>

<style scoped lang="scss">
	.FoodWrap {
	  position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    .food-list {
      width: 100%;
      height: 100%;
      padding: 10rpx;
      box-sizing: border-box;
      .food-item {
        display: flex;
        width: 96%;
        padding: 10rpx 20rpx;
        margin-top: 20rpx;
        margin-left: 2%;
        box-sizing: border-box;
        border-radius: 12rpx;
        box-shadow: 0 0 20rpx #e1e1e1;
        image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 12rpx;
        }
        .food-info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 20rpx;
          padding: 10rpx 0;
          .name {
            font-size: 26rpx;
            font-weight: 700;
          }
          .kcal {
            font-size: 24rpx;
            color: #555;
            margin-bottom: 10rpx;
          }
        }
      }
    }
	}
</style>
