<template>
  <view class="container">
    <view class="header">
      <text class="title">分类管理</text>
      <button class="add" @click="startAdd">新增分类</button>
    </view>

    <view v-for="item in list" :key="item.ID" class="row">
      <text class="name">{{ item.name }}</text>
      <view class="ops">
        <button size="mini" class="op-btn edit" @click="startEdit(item)">编辑</button>
        <button size="mini" class="op-btn delete" @click="remove(item)">删除</button>
      </view>
    </view>

    <uni-popup ref="popup" type="center">
      <view class="dialog">
        <text class="dialog-title">{{ current?.ID ? '编辑分类' : '新增分类' }}</text>
        <uni-easyinput v-model="form.name" placeholder="请输入分类名称"></uni-easyinput>
        <view class="dialog-actions">
          <button @click="close">取消</button>
          <button type="primary" @click="save">保存</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from '@/api'

const list = ref([])
const popup = ref(null)
const current = ref(null)
const form = ref({ name: '' })

const load = async () => {
  const res = await api.getFoodCategoryList({ page: 1, pageSize: 100 })
  if (res?.code === 0) list.value = res.data?.list || []
}

onMounted(load)

const startAdd = () => { current.value = null; form.value = { name: '' }; popup.value.open() }
const startEdit = (item) => { current.value = item; form.value = { name: item.name }; popup.value.open() }
const close = () => popup.value.close()

const save = async () => {
  if (!form.value.name.trim()) { uni.showToast({ title: '请输入分类名称', icon: 'none' }); return }
  if (current.value?.ID) {
    await api.updateFoodCategory({ ID: current.value.ID, name: form.value.name })
  } else {
    await api.addFoodCategory({ name: form.value.name })
  }
  close(); load()
}

const remove = (item) => {
  uni.showModal({
    title: '删除确认', content: `确定删除分类“${item.name}”吗？`,
    success: async (res) => {
      if (res.confirm) { await api.deleteFoodCategory({ id: item.ID }); load() }
    }
  })
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  padding: 24rpx;
  background: linear-gradient(135deg, #FFE4F0 0%, #F3E8FF 50%, #EDE7FF 100%);
}
.header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 24rpx;
}
.title {
  font-weight: 700; font-size: 34rpx; color: #6A4C93;
}
.add {
  background: linear-gradient(135deg, #FF7EB3 0%, #FF758C 100%);
  color:#fff; border:none; border-radius: 28rpx; padding: 16rpx 26rpx; font-size: 26rpx;
  box-shadow: 0 6rpx 16rpx rgba(255, 117, 140, 0.35);
}
.row {
  background: rgba(255,255,255,0.9);
  padding: 26rpx; border-radius: 18rpx; display:flex; justify-content: space-between; align-items:center; margin-bottom: 18rpx;
  box-shadow: 0 8rpx 24rpx rgba(140, 82, 255, 0.12);
}
.name { font-size: 30rpx; color: #3C2A4D; font-weight: 600; }
.ops { display:flex; gap: 12rpx; }
.op-btn {
  border: none; padding: 12rpx 20rpx; border-radius: 22rpx; font-size: 24rpx; color:#fff;
}
.op-btn.edit {
  background: linear-gradient(135deg, #8A63F3 0%, #B089FF 100%);
  box-shadow: 0 4rpx 12rpx rgba(138, 99, 243, 0.3);
}
.op-btn.delete {
  background: linear-gradient(135deg, #FF8FA3 0%, #FF6B9D 100%);
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 157, 0.3);
}
.dialog { background:#fff; padding: 30rpx; border-radius: 16rpx; width: 620rpx; }
.dialog-title { font-size: 30rpx; font-weight: 700; margin-bottom: 20rpx; display:block; color:#6A4C93; }
.dialog-actions { display:flex; justify-content:flex-end; gap: 12rpx; margin-top: 20rpx; }
</style> 