<template>
  <el-card>
    <div class="mb-4 text-lg font-bold">
      {{ mode == "add" ? "添加商品" : "编辑商品" }}
    </div>
    <el-form
      ref="formRef"
      :model="formData"
      label-width="90px"
      :rules="formRules"
    >
      <el-form-item label="商品图片" prop="image">
        <material-picker v-model="formData.image" :limit="1" />
      </el-form-item>
      <el-form-item label="商品名称" prop="store_name">
        <el-input
          v-model="formData.store_name"
          clearable
          placeholder="请输入商品名称"
          :readonly="false"
        />
      </el-form-item>
      <el-form-item label="商品条码" prop="bar_code">
        <el-input
          v-model="formData.bar_code"
          clearable
          placeholder="请输入商品条码"
          :readonly="false"
        />
      </el-form-item>
      <el-form-item label="商品分类" prop="cate_id">
        <el-input
          v-model="formData.cate_id"
          clearable
          placeholder="请输入商品分类"
          :readonly="false"
        />
      </el-form-item>
      <el-form-item label="商品价格" prop="price">
        <el-input
          v-model="formData.price"
          clearable
          placeholder="请输入商品价格"
          :readonly="false"
        />
      </el-form-item>
      <el-form-item label="商品单位" prop="unit">
        <el-input
          v-model="formData.unit"
          clearable
          placeholder="请输入商品单位"
          :readonly="false"
        />
      </el-form-item>
      <el-form-item label="库存" prop="stock">
        <el-input
          v-model="formData.stock"
          clearable
          placeholder="请输入库存"
          :readonly="false"
        />
      </el-form-item>
      <el-form-item label="成本价" prop="cost">
        <el-input
          v-model="formData.cost"
          clearable
          placeholder="请输入成本价"
          :readonly="false"
        />
      </el-form-item>
      <el-form-item label="采购价" prop="purchase">
        <el-input
          v-model="formData.purchase"
          clearable
          placeholder="请输入采购价"
          :readonly="false"
        />
      </el-form-item>
      <el-form-item label="上浮比例" prop="rose">
        <el-input
          v-model="formData.rose"
          clearable
          placeholder="请输入上浮比例"
          :readonly="false"
        />
      </el-form-item>
      <el-form-item label="">
        <el-button @click="handleSubmit" type="primary" class="w-40"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts" setup name="storeProductEdit">
import type { FormInstance } from "element-plus";
import useMultipleTabs from "@/hooks/useMultipleTabs";
import {
  apiStoreProductAdd,
  apiStoreProductEdit,
  apiStoreProductDetail,
} from "@/api/store_product";
import { timeFormat } from "@/utils/util";
import type { PropType } from "vue";
import { useRouter } from "vue-router";
defineProps({
  dictData: {
    type: Object as PropType<Record<string, any[]>>,
    default: () => ({}),
  },
});
const emit = defineEmits(["success", "close"]);
const formRef = shallowRef<FormInstance>();
const { removeTab } = useMultipleTabs();
const mode = ref("add");

// 表单数据
const formData = reactive({
  image: "",
  store_name: "",
  bar_code: "",
  cate_id: "",
  price: "",
  unit: "",
  stock: "",
  cost: "",
  purchase: "",
  rose: "0",
});

// 表单验证
const formRules = reactive<any>({
  store_name: [
    {
      required: true,
      message: "请输入商品名称",
      trigger: ["blur"],
    },
  ],
  bar_code: [
    {
      required: true,
      message: "请输入商品条码",
      trigger: ["blur"],
    },
  ],
  cate_id: [
    {
      required: true,
      message: "请输入商品分类",
      trigger: ["blur", "change"],
    },
  ],
  price: [
    {
      required: true,
      message: "请输入商品价格",
      trigger: ["blur"],
    },
  ],
  unit: [
    {
      required: true,
      message: "请输入商品单位",
      trigger: ["blur", "change"],
    },
  ],
  stock: [
    {
      required: true,
      message: "请输入库存",
      trigger: ["blur"],
    },
  ],
  cost: [
    {
      required: true,
      message: "请输入成本价",
      trigger: ["blur"],
    },
  ],
  purchase: [
    {
      required: true,
      message: "请输入采购价",
      trigger: ["blur"],
    },
  ],
  image: [
    {
      required: true,
      message: "请输入商品图片",
      trigger: ["blur", "change"],
    },
  ],
});

// 获取详情
const setFormData = async (data: Record<any, any>) => {
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key];
    }
  }
};

const getDetail = async (row: Record<string, any>) => {
  const data = await apiStoreProductDetail({
    id: row.id,
  });
  setFormData(data);
};

const router = useRouter();
// 提交按钮
const handleSubmit = async () => {
  removeTab();
  router.push({
    path: "/store/store_product",
  });
  await formRef.value?.validate();
  const data = { ...formData };
  mode.value == "edit"
    ? await apiStoreProductEdit(data)
    : await apiStoreProductAdd(data);
};

defineExpose({
  setFormData,
  getDetail,
});
</script>
