<template>
  <div class="paomadeng-card">
    <h5 style="padding: 10px 15px;">今日菜品</h5>
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="(arr,index) in data" :key="index">
        <el-row type="flex" justify="space-around" :gutter="20" style="margin: 0 20px;">
          <el-col v-for="(item,i) in arr" :key="i" :span="8">
            <div class="food-item">
              <!-- <el-image src="https://img0.baidu.com/it/u=4242782882,2724987482&fm=26&fmt=auto" /> -->
              <el-image
                :src="item.url"
                :preview-src-list="[item.url]"
                fit="contain"
                class="image"
              >
                <div slot="error">
                  <i class="el-icon-picture" />
                </div>
              </el-image>
              <p>{{ item.name }}</p>
              <div class="food-item-footer">
                <span style="float: left">单价: ￥ {{ item.price }}</span>
                <span style="float: right">{{ item.date }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { foodRepository } from '@/api/home'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      data: []
    }
  },
  created() {
    this.getPanelGroup()
  },
  computed: {
    ...mapGetters([
      'baseApi'
    ])
  },
  methods: {
    getPanelGroup() {
      foodRepository().then(res => {
        const array = []
        for (let i = 0; i < res.length / 3; i++) {
          array.push(res.slice(i * 3, (i + 1) * 3))
        }
        this.data = array
      })
    }
  }
}
</script>

<style scoped>

.paomadeng-card{
  background: white;
  margin-bottom: 40px;
}

.food-item{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.food-item p{
  font-size: 16px;
  padding: 0 15px;
  color: #52c1f5;
  margin: 5px 0;
  align-self: flex-start;
}

.food-item-footer{
  font-size: 14px;
  color: grey;
  padding: 10px 15px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.image{
  width: 300px;
}
</style>
