<template>
  <van-form @submit="onSubmit(recipe_id)" class="recipe-create-form">
    <van-cell-group class="recipe-create" inset border>
      <van-field
        v-model="form.name"
        name="name"
        label="菜名"
        placehoder="鱼香茄子..."
        :rules="[{ required: true, message: '请填写菜名' }]"
      />
      <van-field name="reicpe_type" label="类型">
        <template #input>
          <van-radio-group v-model="form.recipe_type" direction="horizontal">
            <van-radio name="meat" shape="square">肉</van-radio>
            <van-radio name="vegetable" shape="square">菜</van-radio>
            <van-radio name="soup" shape="square">汤</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field name="rate" label="评分">
        <template #input>
          <van-rate
            v-model="form.rate"
            void-icon="like-o"
            icon="like"
          ></van-rate>
        </template>
      </van-field>
      <van-field name="difficulty" label="难度">
        <template #input>
          <van-rate v-model="form.difficulty" color="#ffd21e"></van-rate>
        </template>
      </van-field>
    </van-cell-group>

    <van-cell-group class="recipe-create" inset border>
      <van-field
        v-model="form.note"
        rows="2"
        auto-size
        label="备注"
        type="textarea"
      />
    </van-cell-group>
    <div class="recipe-create">
      <van-button
        round
        type="primary"
        block
        plain
        hairline
        :disabled="disable_submit"
        @click="onSubmit(recipe_id)"
        :loading="loading"
        >提交</van-button
      >
    </div>
  </van-form>
</template>

<script>
import { Form, Field, CellGroup, Radio, RadioGroup, Rate, Button } from 'vant';
import axios from 'axios';
import config from '@/config/index';
import router from '@/router/index';
import constants from '@/utils/constants.js';

export default {
  props: ['recipe_'],
  watch: {
    recipe_(val) {
      this.form = val;
      this.recipe_id = val.id;
    },
  },
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Radio.name]: Radio,
    [RadioGroup.name]: RadioGroup,
    [Rate.name]: Rate,
    [Button.name]: Button,
  },
  data() {
    return {
      form: {
        name: null,
        recipe_type: null,
        rate: 0,
        difficulty: 0,
        note: null,
      },
      loading: false,
      recipe_id: null,
    };
  },
  mounted() {},
  methods: {
    onSubmit(recipe_id) {
      if (!this.form.name) {
        return;
      }
      this.loading = true;
      let data = {
        name: this.form.name,
        recipe_type: this.form.recipe_type
          ? this.form.recipe_type
          : constants.RECIPE_TYPE_MEAT,
        difficulty: this.form.difficulty,
        rate: this.form.rate,
        note: this.form.note ? this.form.note : null,
      };
      if (!recipe_id) {
        axios
          .post(config.publicPath + '/recipe/recipe/', data)
          .then(
            (response) => (response, router.push({ name: 'RecipeMobileHome' }))
          );
      } else {
        axios
          .put(config.publicPath + '/recipe/recipe/' + recipe_id, data)
          .then((this.loading = false));
      }
    },
  },
};
</script>
<style>
.recipe-create {
  margin: 20px 16px;
}
</style>
