<template>
  <el-row justify="center">
    <el-col>
      <el-table border stripe :data="daily_recipes" max-height="500">
        <el-table-column
          prop="date"
          label="日期"
          :formatter="formatDate"
        ></el-table-column>
        <el-table-column prop="meat" label="肉">
          <template #default="scope">
            <ul>
              <li v-for="recipe in scope.row.meat" :key="recipe.name">
                <a :href="'/recipe/' + recipe.id">
                  {{ recipe.name }}
                </a>
              </li>
            </ul>
          </template>
        </el-table-column>
        <el-table-column prop="vegetable" label="菜">
          <template #default="scope">
            <ul>
              <li v-for="recipe in scope.row.vegetable" :key="recipe.name">
                <a :href="'/recipe/' + recipe.id">
                  {{ recipe.name }}
                </a>
              </li>
            </ul>
          </template></el-table-column
        >
        <el-table-column prop="soup" label="汤">
          <template #default="scope">
            <ul>
              <li v-for="recipe in scope.row.soup" :key="recipe.name">
                <a :href="'/recipe/' + recipe.id">
                  {{ recipe.name }}
                </a>
              </li>
            </ul>
          </template></el-table-column
        >
      </el-table>
    </el-col>
    <el-col>
      <el-button
        type="primary"
        plain
        class="re-generate"
        @click="reGenerateRecipe()"
        >重新生成</el-button
      >
    </el-col>
  </el-row>
</template>

<script>
import axios from 'axios';

function formatDate(row, column, cellValue) {
  if (cellValue === undefined) {
    return;
  }
  var date_ = new Date(cellValue * 1000);
  return date_.toDateString();
}

function formatMeal(row, column, cellValue) {
  var data = ['/ '];
  if (cellValue === undefined) {
    return;
  }
  for (let i = 0; i < cellValue.length; i++) {
    data.push(cellValue[i].name + ' / ');
  }
  return data;
}
export default {
  name: 'WeekRecipe',
  data: function() {
    return {
      daily_recipes: [],
      formatDate,
      formatMeal,
    };
  },
  mounted() {
    axios
      .get('//localhost:8000/recipe/week-recipe/')
      .then((response) => (this.daily_recipes = response.data));
  },
  methods: {
    reGenerateRecipe() {
      axios
        .post('//localhost:8000/recipe/week-recipe/')
        .then((response) => {
          response;
          return axios.get('//localhost:8000/recipe/week-recipe/');
        })
        .then((response) => (this.daily_recipes = response.data));
    },
  },
};
</script>

<style>
.re-generate {
  margin: 20px 0;
  width: 100%;
}
</style>
