<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { useResponseHandle } from "/@/hooks";
import BasicSettings from "../basic-settings.vue";
import { good_detail_columns } from "./config/configs";

import {
  type IGoodDetail,
  httpDetail
} from "/@/api/InvoiceSaleSettings/commodityCost";

const { query } = useRoute();

const spuCode = computed(() => query.id);
const goodDetail = ref<IGoodDetail | null>(null);
const responseHandle = useResponseHandle();

//请求商品详情
async function requestGoodDetail() {
  const { code, message, data } = await httpDetail({ spuCode: spuCode.value });
  responseHandle({
    code,
    message,
    handler: () => (goodDetail.value = data)
  });
}

onMounted(() => requestGoodDetail());
</script>

<template>
  <BasicSettings
    title="销售成本类目设置"
    back-route="/InvoiceSaleSettings/commodityCost"
    :name="goodDetail?.good_name"
    :detail="goodDetail"
    :columns="good_detail_columns"
    @refresh="requestGoodDetail"
    pageName="commodityCostDetail"
    :isZx="false"
  />
</template>
