<template>
  <view>
	  <view class="navbar">
	      <view class="search">
	        <text class="icon-search">
	  		  <input type="text" placeholder="输入菜品组名称" class="transparent-input" v-model="form.groupName"/>
	  	  </text>
	      </view>
	  	 <button class="search-button" @click="addDishesGroup">添加</button> 
	  	  
	  </view>
  	<view class="item"
  	      v-for="(tab, index) in resultArray"
  	      :key="index"
  	      @click="showDrawer('showLeft', tab)">
  	  {{ tab.groupName }}
  	</view>
  	<uni-drawer ref="showLeft" mode="left" :mask-click="true" @change="change($event,'showLeft')">
  	  <!-- 组件内部-->
  	  <view class="edit-dishes-group">
  	    <view class="drawer-content">
  	      <input class="styled-input" type="text" v-model="newGroupName" placeholder="请输入新的菜品组名" /> 
  	    </view>
  	    <view class="button-container">
  	      <button class="styled-button confirm" @click="updateDishesGroup">确认</button>
  	      <button class="styled-button delete" @click="deleteDishesGroup(currentGroupId)">删除菜品组</button>
  	    </view>
  	  </view>
  	</uni-drawer>
  </view>
</template>

<script>
import { apiImageUrl } from '../../API/api';

export default {
  data() {
    return {
      businessId: '', 
      resultArray: [],
      result: null,
      currentGroupName: '',
      currentGroupId: '',
      newGroupName: '',
      id: 0,
      form: {
        groupName: '',
        isTopping: 0
      }
    };
  },
  mounted() {
    this.loadCurrentBusinessId();
    this.leftGroup();
  },
  methods: {
    loadCurrentBusinessId() {
      const storedBusinessId = uni.getStorageSync('businessId');
	  console.log(storedBusinessId);
      if (storedBusinessId) {
        this.businessId = storedBusinessId;
      } else {
        console.error('currentBusinessId not found in storage');
      }
    },

    leftGroup() {
      const DishesGroupQueryRequest = {
        businessId: this.businessId
      };

      uni.request({
        url: apiImageUrl + '/api/dishesGroup/list/dishesGroup',
        method: 'POST',
        data: JSON.stringify(DishesGroupQueryRequest),
        header: {
          'Content-Type': 'application/json'
        }
      }).then((res) => {
        console.log(res); 
        if (res[1] && res[1].data && res[1].data.code === 0) {
          this.resultArray = res[1].data.data.map(item => ({
            id: item.id,
            groupName: item.groupName
          }));
          console.log(this.resultArray);
        } else {
          console.error('Unexpected response structure:', res);
        }
      }).catch((error) => {
        console.error('Error fetching dishes groups:', error);
      });
    },

    showDrawer(drawer, tab) {
      this.currentGroupName = tab.groupName;
      this.currentGroupId = tab.id; 
      this.newGroupName = tab.groupName; 
      this.id = tab.id; 
      if (this.$refs.showLeft) {
        this.$refs.showLeft.open();
      }
    },

    closeDrawer() {
      if (this.$refs.showLeft) {
        this.$refs.showLeft.close();
      }
    },

    change(e, type) {
      console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
      this[type] = e;
    },

    updateDishesGroup() {
      if (!this.newGroupName || !this.id) return;

      uni.request({
        url: apiImageUrl + '/api/dishesGroup/update', 
        method: 'POST',
        header: {
          'Content-Type': 'application/json',
        },
        data: {
          id: this.id,
          groupName: this.newGroupName,
          isTopping: 0, 
        },
      }).then((res) => {
        if (res[1] && res[1].data && res[1].data.code === 0) {
          this.closeDrawer();
          this.leftGroup(); 
          uni.showModal({
            title: '提示',
            content: '菜品组更新成功',
            showCancel: false
          });
        } else {
          uni.showModal({
            title: '提示',
            content: '菜品组更新失败',
            showCancel: false
          });
        }
      }).catch((error) => {
        console.error('Error updating dishes group:', error);
        uni.showModal({
          title: '提示',
          content: '菜品组更新失败',
          showCancel: false
        });
      });
    },

    removeGroupFromList(id) {
      const index = this.resultArray.findIndex(item => item.id === id);
      if (index > -1) {
        this.resultArray.splice(index, 1);
      }
    },

    deleteDishesGroup(id) {
      uni.request({
        url: `${apiImageUrl}/api/dishesGroup/delete`,
        method: 'POST',
        data: {
          id: id
        }
      }).then((res) => {
        if (res[1] && res[1].data && res[1].data.code === 0) { 
          uni.showModal({
            title: '提示',
            content: '成功删除菜品组',
            showCancel: false
          });
          this.removeGroupFromList(id); 
          this.closeDrawer(); 
        } else {
          uni.showModal({
            title: '提示',
            content: '删除失败，请检查输入或联系管理员',
            showCancel: false
          });
        }
      }).catch((error) => {
        console.error('Error:', error);
        uni.showModal({
          title: '提示',
          content: '请求失败，请稍后重试',
          showCancel: false
        });
      });
    },

    addDishesGroup() {
      if (!this.form.groupName.trim()) {
        uni.showToast({
          title: '请输入菜品组名！',
          icon: 'none'
        });
        return;
      }

      uni.request({
        url: `${apiImageUrl}/api/dishesGroup/add`,
        method: 'POST',
        header: {
          'Content-Type': 'application/json'
        },
        data: this.form,
      }).then((res) => {
        if (res[1] && res[1].data && res[1].data.code === 0) { 
          this.result = '添加成功!';
          this.form.groupName = ''; 
         
          this.leftGroup();
          uni.showModal({
            title: '提示',
            content: '成功添加菜品组!',
            showCancel: false
          });
        } else {
          this.result = '添加失败，请检查输入或联系管理员';
          uni.showModal({
            title: '提示',
            content: '添加失败，请检查输入或联系管理员！',
            showCancel: false
          });
        }
      }).catch((error) => {
        console.error('Error:', error);
        this.result = '请求失败，请稍后重试';
        uni.showModal({
          title: '提示',
          content: '请求失败，请稍后重试！',
          showCancel: false
        });
      });
    }
  }
};
</script>


<style lang="scss" scoped>
.item {
	font-size: 13px;
  padding: 10px 20px;
  display: inline-block;
  background-color: rgba(245, 245, 220, 0.8);
  margin: 10px;
  border-radius: 20px;
  box-shadow: 0 4px #ccc, 0 6px 10px rgba(0,0,0,0.1), inset 0 2px #fff, inset 0 -2px 2px rgba(0,0,0,0.1); 
  transition: transform 0.2s; 

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px #ccc, 0 8px 15px rgba(0,0,0,0.1), inset 0 4px #fff, inset 0 -2px 3px rgba(0,0,0,0.1); 
  }
}

.navbar {
	  background-color: #4095e5;
	  display: flex;
	  flex-direction: row;
	  padding: 10px;
	  .search {
	    display: flex;
	    align-items: center;
	    padding: 0 10rpx 0 26rpx;
	    height: 50rpx;
	    color: #fff;
	    font-size: 28rpx;
	    border-radius: 32rpx;
	    background-color: rgba(255, 255, 255, 0.5);
	    width: 70%;
	    margin: 0 auto;
	  }
	  .icon-search {
	    margin-right: 10rpx;
	  }
	  .search-button {
	    margin-left: auto; 
	    height: 50rpx; 
	    background-color: #fff; 
	    color: #4095e5;
	    border: none; 
	    border-radius: 32rpx; 
	    padding: 0 20rpx;
		line-height: 50rpx;
		font-size: 15px;
		
	  }
	  
	  
	  .transparent-input {
	    background-color: transparent; 
	    border: none;
	    color: #fff; 
	    outline: none; 
	    width: 100%; 
	    padding: 0 10rpx;
	    font-size: 28rpx; 
	  }
	}
.styled-input {
	font-size: 14px;
	width: calc(100% - 20px);
	padding: 10px;
	margin: 10px 0;
	display: block;
	background-color: rgba(245, 245, 220, 0.8);
	border-radius: 20px;
	box-shadow: 0 4px #ccc, 0 6px 10px rgba(0,0,0,0.1), inset 0 2px #fff, inset 0 -2px 2px rgba(0,0,0,0.1);
	border: none;
	outline: none;
	transition: box-shadow 0.2s;

	&:focus {
		box-shadow: 0 6px #ccc, 0 8px 15px rgba(0,0,0,0.1), inset 0 4px #fff, inset 0 -2px 3px rgba(0,0,0,0.1);
	}
}

.button-container {
	display: flex;
	justify-content: space-between;
}

.styled-button {
	flex: 1;
	margin: 5px;
	padding: 10px;
	background-color: rgba(173, 216, 230, 0.8);
	border: none;
	border-radius: 15px;
	box-shadow: 0 4px #ccc, 0 6px 10px rgba(0,0,0,0.1), inset 0 2px #fff, inset 0 -2px 2px rgba(0,0,0,0.1);
	cursor: pointer;
	transition: box-shadow 0.2s, background-color 0.2s;

	&:hover {
		background-color: rgba(173, 216, 230, 1); 
		box-shadow: 0 6px #ccc, 0 8px 15px rgba(0,0,0,0.1), inset 0 4px #fff, inset 0 -2px 3px rgba(0,0,0,0.1);
	}
}

.confirm {
	background-color: rgba(135, 206, 235, 0.8); 
	font-size: 14px;
}

.delete {
	background-color: rgba(255, 99, 71, 0.8); 
	font-size: 14px;
}
</style>



