<script setup lang="ts">
import BasicDescriptions from "/@/components/BasicDescriptions";
import { useDetail } from "/@/hooks/core/useDetail";
import BaseForm from "./components/BaseForm.vue"
import { goodColumns, goodHasChildColumns } from "./config/columns"

import { httpDetail } from "/@/api/invoiceInOut/productManager";
import { useTask } from "/@/hooks/core"


const detailTask = useTask()
const { title, isDetail, collapses, id } = useDetail({ baseName: '商品', collapseLen: 2 });


id.value && detailTask.run(httpDetail({ id: id.value }))
</script>

<template>
  <div class="padding__container" v-loading="detailTask.loading">
    <ElTabs>
      <ElTabPane :label="title">
        <ElCollapse v-model="collapses">
          <ElCollapseItem :title="title" name="1">
            <BaseForm v-if="!isDetail" />
            <BasicDescriptions 
              v-if="isDetail && detailTask.data" 
              :columns="detailTask.data.is_combind == '1' ? goodHasChildColumns : goodColumns" 
              :data="detailTask.data" 
            />
          </ElCollapseItem>
        </ElCollapse>
      </ElTabPane>
    </ElTabs>
  </div>
</template>
