<script setup lang="ts">
import { ref, computed, h} from "vue";
import BasicDescriptions from "/@/components/BasicDescriptions";
import { purchaseOrderNotIncludeProduceColumns, purchaseOrderNotIncludeProduceChildColumns } from "/@/utils/details/_purchase";
import { httpInfo } from "/@/api/purchase/porder";
import { ElTableColumn, ElTable } from "element-plus"

import { httpChildDetail } from "/@/api/InvoiceSales/sheetOrderPool";



const isComposeProduct = ref(false)
const visible = ref(false);
const loading = ref(false);
const child = ref([]);
const columns = computed(() => child.value.length === 0 ? purchaseOrderNotIncludeProduceColumns : purchaseOrderNotIncludeProduceChildColumns)

const data = ref<Record<string, string>>({});

const childItem = {
    label: '子商品信息',
    span: 24,
    render(_, { child }){
      return h(
        ElTable,
        {
          data: child,
          border: true,
          size: "small",
          width: "100%"
        },
        {
          default: () => [
            h(ElTableColumn, {
              prop: "childCode",
              label: "子商品编码",
              minWidth: "150px",
              showOverflowTooltip: true
            }),
            h(ElTableColumn, {
              prop: "child_name",
              label: "子商品名称",
              minWidth: "150px",
              showOverflowTooltip: true
            }),
            h(ElTableColumn, {
              prop: "child_num",
              label: "组合比例",
              minWidth: "80px",
              showOverflowTooltip: true
            }),
            h(ElTableColumn, {
              prop: "in_tax_merge",
              label: "类目编码",
              minWidth: "150px",
              showOverflowTooltip: true
            }),
            h(ElTableColumn, {
              prop: "in_tax_name",
              label: "货物和劳务名称",
              minWidth: "130px",
              showOverflowTooltip: true
            }),
            h(ElTableColumn, {
              prop: "in_tax_short",
              label: "商品和服务分类简称",
              minWidth: "130px",
              showOverflowTooltip: true
            }),
            h(ElTableColumn, {
              prop: "in_tax",
              label: "税点",
              minWidth: "60px",
              showOverflowTooltip: true
            },{
              default:({row}) => row.in_tax  ? row.in_tax + '%' : ''
            })
          ]
        }
      )
    }
  }

defineExpose({
  onDisplay: async _data => {
    visible.value = true;
    data.value = _data;
    loading.value = true;
    const result = await httpInfo({ sequenceNo: _data.sequenceNo })
    console.log(result)

    data.value.orderTax = result.data.orderTax
    const { goodNo } = result.data
    isComposeProduct.value  = goodNo.indexOf('SSU') !== -1

    if(isComposeProduct.value){
      const result = await httpChildDetail({ spuCode: goodNo })
      child.value = result.data || []
      console.log(child.value)
    }

    loading.value = false;
  }
});
</script>

<template>
  <ElDialog
    v-model="visible"
    title="采购单详情"
    width="1100px"
    center
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="data = {}"
  >
    <BasicDescriptions 
      v-loading="loading" 
      :columns="[...purchaseOrderNotIncludeProduceColumns, ...(isComposeProduct ? [childItem] : [])]" 
      :data="{...data, child }" 
    />
  </ElDialog>
</template>
