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

import { httpDetail, httpProductDetail } from "/@/api/invoiceInOut/inventoryCheck";
import { useTask } from "/@/hooks/core"

import ProductDetail from "/@/components/productDetail/index.vue"

const {
  id,
  title, 
  isDetail, 
  collapses, 
} = useDetail({ baseName: '盘点', collapseLen: 2 });

const productDetailTask = useTask()
const detailTask = useTask({ success(data){
  productDetailTask.run(httpProductDetail({ id: data.product.id }))
} })

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

<template>
  <div class="padding__container" v-loading="detailTask.loading">
    <ElCollapse v-model="collapses">
      <ElCollapseItem :title="title" name="1">
        <BaseForm v-if="!isDetail" />
        
        <BasicDescriptions 
          v-if="isDetail && detailTask.data" 
          :columns="inventoryCheckDetail"
          :data="detailTask.data" 
        />
      </ElCollapseItem>

      <ElCollapseItem v-if="isDetail" title="商品详情" name="2">
        <ProductDetail
          v-if="productDetailTask.data" 
          :data="productDetailTask.data" 
        /> 
      </ElCollapseItem>
    </ElCollapse>
  </div>
</template>
