
<template>
  <view class="edit-dishes-group">
    <view class="title">编辑菜品组</view>
    <view class="group-name">
      <input type="text" v-model="newGroupName" placeholder="请输入新的菜品组名" />
    </view>
    <view class="buttons">
      <button @click="updateDishesGroup">确认</button>
      <button @click="$emit('close')">取消</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const newGroupName = ref('');
const id = ref(0); 

const updateDishesGroup = async () => {
  if (!newGroupName.value || !id.value) return;

  try {
    const res = await uni.request({
      url: '/api/dishesGroup/update',
      method: 'POST',
      header: {
        'Content-Type': 'application/json',
      },
      data: {
        id: id.value,
        groupName: newGroupName.value,
        isTopping: 0, 
      },
    });

    if (res.data.code==0) {
      alert('菜品组更新成功');
      
      $emit('update-success');
    } else {
      alert('菜品组更新失败');
    }
  } catch (error) {
    console.error('Error updating dishes group:', error);
    alert('菜品组更新失败');
  }
};
</script>

<style scoped>
.edit-dishes-group {
  width: 100%;
  max-width: 300px;
  margin: auto;
  text-align: center;
}

.title {
  font-size: 18px;
  margin-bottom: 10px;
}

.group-name input {
  width: 100%;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 10px;
  font-size: 16px;
  margin-bottom: 10px;
}

.buttons button {
  width: 100%;
  height: 40px;
  border: none;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  margin-bottom: 10px;
  font-size: 16px;
}

.buttons button:nth-child(1) {
  background-color: green;
}

.buttons button:nth-child(2) {
  background-color: red;
}
</style>