<template>
  <el-page-header
    icon="el-icon-arrow-left"
    @back="goHome"
    title="首页"
    v-bind:content="recipe.name"
  ></el-page-header>

  <div v-if="recipe != null" class="content">
    <el-row justify="center">
      <el-col :span="18">
        <el-row justify="center">
          <el-col :span="8">
            类型：{{ constants.formatRecipeType(recipe.recipe_type) }}
          </el-col>
          <el-col :span="8">
            难度：{{ constants.formatDifficulty(recipe.difficulty) }}
          </el-col>
          <el-col :span="8">
            评分：{{ constants.formatRate(recipe.rate) }}
          </el-col>
        </el-row>
        <el-row> 备注：{{ recipe.note }} </el-row>
      </el-col>
    </el-row>
  </div>
  <el-row justify="center">
    <el-col :span="18">
      <input_recipe :recipe-id="recipe.id" :recipe_="recipe"></input_recipe>
    </el-col>
  </el-row>
</template>
<script>
import axios from 'axios';
import 'element-plus/dist/index.css';
import router from '@/router/index';
import input_recipe from '@/components/input_recipe.vue';
import constants from '@/utils/constants.js';
export default {
  name: 'RecipeDetail',
  components: { input_recipe },
  data: function() {
    return {
      recipe: {},
      constants: constants,
    };
  },
  mounted() {
    axios
      .get('//localhost:8000/recipe/recipe/' + this.$route.params.id)
      .then((response) => (this.recipe = response.data));
  },
  methods: {
    goHome() {
      router.push({ name: 'Home' });
    },
  },
};
</script>

<style>
.content {
  padding: 20px 10px;
}
</style>
