<template>
  <ElDialog v-model="showDialog" :close-on-click-modal="false" destroy-on-close width="fit-content" @close="dialogCloseHandler">
    <ElForm :model="formData" :rules="rules" ref="goodsCategoryForm" class="form-panel" label-width="auto">
      <ElFormItem label="业务类型" prop="bizType">
        <!-- <ElInput /> -->
        <!-- ：biz_type，ZaiShengPin-再生品、HuiShouPin-回收品、QiTa其他" -->

        <el-select v-model="formData.bizType" :disabled="status === 'view'" placeholder="业务类型" style="width: 240px">
          <el-option v-for="item in bizList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </ElFormItem>

      <ElFormItem label="分类名称" prop="categoryName">
        <ElInput v-model="formData.categoryName" :disabled="status === 'view'" placeholder="分类名称" />
      </ElFormItem>
      <ElFormItem label="图片" prop="picture">
        <!-- <ElInput
          v-model="formData.picture"
          :disabled="status === 'view'"
          placeholder="图片"/> -->
        <Uploader v-model:file="formData.picture" :limit="1" :multiple="true" accept="image/*" class="avatar-uploader" list-type="picture-card">
          <span style="font-size: 50px; padding: 0 40px">+</span>

          <!-- <ElButton>点击上传图片</ElButton> -->
        </Uploader>
      </ElFormItem>
      <ElFormItem label="排序" prop="sort">
        <ElInput v-model="formData.sort" :disabled="status === 'view'" placeholder="排序" />
      </ElFormItem>
    </ElForm>
    <template #footer>
      <ElButton @click="showDialog = false">{{ status === "view" ? "关闭" : "取消" }}</ElButton>
      <ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
    </template>
  </ElDialog>
</template>

<script lang="ts" setup>
import GoodsCategoryApi from "@/pages/gds/goods-category/goods-category-api.ts";
import Strings from "@/common/utils/strings.ts";
import FormUtil from "@/common/utils/formUtil.ts";
import Uploader from "@/components/uploader/Uploader.vue";

import Utils from "@/common/utils";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";

const emits = defineEmits(["editSucc"]);
const showDialog = ref(false);
const submiting = ref(false);
const status = ref<"add" | "view" | "modify">("add");

const goodsCategoryFormIns = useTemplateRef<FormInstance>("goodsCategoryForm");

const bizList = [
  {
    value: "ZaiShengPin",
    label: "再生品",
  },
  {
    value: "HuiShouPin",
    label: "回收品",
  },
  {
    value: "QiTa",
    label: "其他",
  },
];

const formData = Utils.resetAble(reactive<GoodsCategoryTypes.SearchGoodsCategoryResult>({}));
const rules = reactive<FormRules<GoodsCategoryTypes.SearchGoodsCategoryResult>>({
  id: [{ required: true, message: "请填写Id", trigger: "blur" }],
  bizType: [{ required: true, message: "请填写业务类型", trigger: "blur" }],
  categoryName: [{ required: true, message: "请填写分类名称", trigger: "blur" }],
  picture: [{ required: true, message: "请填写图片", trigger: "blur" }],
  sort: [{ required: true, message: "请填写排序", trigger: "blur" }],
  creatorId: [{ required: true, message: "请填写创建人 Id；sys_user.id", trigger: "blur" }],
  modifierId: [{ required: true, message: "请填写修改人 Id；sys_user.id", trigger: "blur" }],
  createTime: [{ required: true, message: "请填写创建时间", trigger: "blur" }],
  modifyTime: [{ required: true, message: "请填写修改时间", trigger: "blur" }],
  deleted: [{ required: true, message: "请填写是否删除； 0-->未删除、1-->已删除", trigger: "blur" }],
});

function dialogCloseHandler() {
  formData.$reset();
}

function submitHandler() {
  if (status.value === "view") return;
  submiting.value = true;
  if (formData.id != null) {
    FormUtil.submit(goodsCategoryFormIns, () => GoodsCategoryApi.modify(formData))
      .then(() => {
        ElMessage.success("修改成功");
        emits("editSucc");
        showDialog.value = false;
      })
      .finally(() => {
        submiting.value = false;
      });
  } else {
    FormUtil.submit(goodsCategoryFormIns, () => GoodsCategoryApi.add(formData))
      .then(() => {
        ElMessage.success("添加成功");
        emits("editSucc");
        showDialog.value = false;
      })
      .finally(() => {
        submiting.value = false;
      });
  }
}

defineExpose({
  open(data: GoodsCategoryTypes.SearchGoodsCategoryResult = {}) {
    showDialog.value = true;
    if (!Strings.isBlank(data.id)) {
      status.value = "modify";
      GoodsCategoryApi.detail(data.id!).then((res) => {
        formData.$reset(res.data);
      });
    } else {
      status.value = "add";
      formData.$reset(data);
    }
  },
});
</script>

<style lang="stylus" scoped>
.form-panel {
  padding 20px
}
</style>
