<template>
  <div class="app-container">
    <el-card shadow="always" style="width: 55%; margin: 0 auto">
      <ReleaseForm
        v-model="form"
        :isAdd="false"
        :labelWidth="labelWidth"
        ref="releaseFormRef"
      />
      <div :style="{ marginLeft: labelWidth + 'px' }">
        <el-button type="primary" @click="submitForm(3)">保存草稿</el-button>
        <el-button type="primary" @click="submitForm(0)">提交审核</el-button>
      </div>
    </el-card>
  </div>
</template>
<script setup name="ReleaseProduct">
import ReleaseForm from "@/views/components/ReleaseForm";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import {
  getProductById,
  insertEnterpriseProduct,
  updateEnterpriseProduct,
} from "@/api/admin/enterprise/product";
import { reactive, toRefs } from "vue";
const route = useRoute();
const router = useRouter();
const labelWidth = 140;
// const  = reactive({});
const data = reactive({
  form: {},
});
const { form } = toRefs(data);
const releaseFormRef = ref();
const submitForm = async (is_submit) => {
  form.value["status"] = is_submit;
  console.log(await releaseFormRef.value.validateForm());
  const isValid = await releaseFormRef.value.validateForm();
  if (isValid) {
    if (route.query.id) {
      await updateEnterpriseProduct(form.value);
      ElMessage.success("修改产品成功");
    } else {
      await insertEnterpriseProduct(form.value);
      ElMessage.success("新增产品成功");
    }
    router.go(-1);
  } else {
    console.log("验证未通过");
  }
};

// 如果url参数包含id 则为修改，请求数据回显
const getProductDetail = async (id) => {
  const { data } = await getProductById({ id });
  form.value = data;
};

if (route.query.id) {
  getProductDetail(route.query.id);
}
</script>
