<template>
  <el-table border :data="daily_recipe">
    <el-table-column prop="meat" label="肉">
      <template #default="scope">
        <el-tag
          id="meal"
          v-for="recipe in scope.row.meat"
          :key="recipe.name"
          closable
          size="small"
          ><a :href="'/recipe/' + recipe.id">{{ recipe.name }}</a></el-tag
        >
      </template>
    </el-table-column>
    <el-table-column prop="vegetable" label="菜">
      <template #default="scope">
        <el-tag
          id="meal"
          v-for="recipe in scope.row.vegetable"
          :key="recipe.name"
          closable
          size="small"
          ><a :href="'/recipe/' + recipe.id">{{ recipe.name }}</a></el-tag
        >
      </template></el-table-column
    >
    <el-table-column prop="soup" label="汤">
      <template #default="scope">
        <el-tag
          id="meal"
          v-for="recipe in scope.row.soup"
          :key="recipe.name"
          closable
          size="small"
          ><a :href="'/recipe/' + recipe.id">{{ recipe.name }}</a></el-tag
        >
      </template></el-table-column
    >
  </el-table>
  <el-button
    type="primary"
    plain
    class="re-generate"
    @click="reGenerateRecipe()"
  >
    重新生成
  </el-button>
</template>

<script>
import axios from 'axios';
export default {
  name: 'DailyRecipeDetail',
  data: function() {
    return {
      daily_recipe: [],
      inputVisible: false,
      inputValue: null,
    };
  },
  mounted() {
    axios
      .get('//localhost:8000/recipe/daily-recipe/' + this.$route.params.id)
      .then((response) => {
        var data = {
          meat: [],
          vegetable: [],
          soup: [],
        };
        for (let i = 0; i < response.data.recipes.length; i++) {
          if (response.data.recipes[i].recipe_type == 'meat') {
            data.meat.push(response.data.recipes[i]);
          } else if (response.data.recipes[i].recipe_type == 'vegetable') {
            data.vegetable.push(response.data.recipes[i]);
          } else if (response.data.recipes[i].recipe_type == 'soup') {
            data.soup.push(response.data.recipes[i]);
          }
        }
        this.daily_recipe = [data];
      });
  },
  methods: {
    reGenerateRecipe() {
      axios
        .post('//localhost:8000/recipe/daily-recipe/' + this.$route.params.id)
        .then((response) => {
          response;
          return axios.get(
            '//localhost:8000/recipe/daily-recipe/' + this.$route.params.id
          );
        })
        .then((response) => {
          var data = {
            meat: [],
            vegetable: [],
            soup: [],
          };
          for (let i = 0; i < response.data.recipes.length; i++) {
            if (response.data.recipes[i].recipe_type == 'meat') {
              data.meat.push(response.data.recipes[i]);
            } else if (response.data.recipes[i].recipe_type == 'vegetable') {
              data.vegetable.push(response.data.recipes[i]);
            } else if (response.data.recipes[i].recipe_type == 'soup') {
              data.soup.push(response.data.recipes[i]);
            }
          }
          this.daily_recipe = [data];
        });
    },
  },
};
</script>

<style></style>
