<template>
  <uni-drawer ref="drawerRef" mode="right" :width="400">
    <view class="drawer-content">
      <view class="drawer-header">
        <text class="title">{{ isEdit ? "编辑分类" : "添加分类" }}</text>
        <uni-icons type="closeempty" size="24" @click="close"></uni-icons>
      </view>
      <scroll-view scroll-y class="drawer-body">
        <uni-forms
          ref="formRef"
          :model="formData"
          :rules="rules"
          label-width="80px"
        >
          <uni-forms-item label="分类名称" name="name" required>
            <uni-easyinput
              v-model="formData.name"
              placeholder="请输入分类名称"
            />
          </uni-forms-item>
          <uni-forms-item label="排序" name="sort">
            <uni-easyinput
              type="number"
              v-model="formData.sort"
              placeholder="请输入排序"
            />
          </uni-forms-item>
          <uni-forms-item label="状态" name="status">
            <switch
              :checked="formData.status === 1"
              @change="(e) => (formData.status = e.detail.value ? 1 : 0)"
            />
          </uni-forms-item>
        </uni-forms>
      </scroll-view>
      <view class="drawer-footer">
        <button class="btn-cancel" @click="close">取消</button>
        <button
          class="btn-confirm"
          type="primary"
          @click="submit"
          :loading="loading"
        >
          确定
        </button>
      </view>
    </view>
  </uni-drawer>
</template>

<script setup>
import { ref, reactive } from "vue";
import { api } from "@/services/api.js";

const emit = defineEmits(["success"]);
const drawerRef = ref(null);
const formRef = ref(null);
const isEdit = ref(false);
const loading = ref(false);
const editId = ref(null);

const formData = reactive({
  name: "",
  sort: 0,
  status: 1,
});

const rules = {
  name: {
    rules: [{ required: true, errorMessage: "请输入分类名称" }],
  },
};

const open = (row) => {
  if (row) {
    isEdit.value = true;
    editId.value = row.id;
    Object.assign(formData, {
      name: row.name,
      sort: row.sort,
      status: row.status,
    });
  } else {
    isEdit.value = false;
    editId.value = null;
    Object.assign(formData, {
      name: "",
      sort: 0,
      status: 1,
    });
  }
  drawerRef.value.open();
};

const close = () => {
  drawerRef.value.close();
};

const submit = async () => {
  try {
    await formRef.value.validate();
    loading.value = true;
    if (isEdit.value) {
      await api.updateCategory(editId.value, formData);
    } else {
      await api.addCategory(formData);
    }
    uni.showToast({ title: "保存成功", icon: "success" });
    emit("success");
    close();
  } catch (e) {
    console.error(e);
  } finally {
    loading.value = false;
  }
};

defineExpose({ open, close });
</script>

<style scoped>
.drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
}
.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
}
.drawer-header .title {
  font-size: 16px;
  font-weight: bold;
}
.drawer-body {
  flex: 1;
  padding: 15px;
}
.drawer-footer {
  display: flex;
  justify-content: flex-end;
  padding: 15px;
  border-top: 1px solid #eee;
}
.drawer-footer button {
  margin-left: 10px;
  min-width: 80px;
}
</style>
