<script setup lang="ts">
import { ref, h } from "vue";
import { GOOD_COLUMNS, ORDER_COLUMNS } from "/@/utils/details/sale";
import BasicDescriptions from "/@/components/BasicDescriptions";
import { httpDetail, httpChildDetail } from "/@/api/InvoiceSales/sheetOrderPool";
import { useAsync } from "/@/hooks/core/useAsync";

import { ElTable, ElTableColumn } from "element-plus"

const isComposeProduct = ref(false)
const visible = ref(false)
const childList = ref([])

const childItem = {
    label: '子商品信息',
    span: 24,
    render(_, { childList }){
      return h(
        ElTable,
        {
          data: childList,
          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: "out_tax_merge",
              label: "类目编码",
              minWidth: "150px",
              showOverflowTooltip: true
            }),
            h(ElTableColumn, {
              prop: "out_tax_name",
              label: "货物和劳务名称",
              minWidth: "130px",
              showOverflowTooltip: true
            }),
            h(ElTableColumn, {
              prop: "out_tax_short",
              label: "商品和服务分类简称",
              minWidth: "130px",
              showOverflowTooltip: true
            }),
            h(ElTableColumn, {
              prop: "out_tax",
              label: "税点",
              minWidth: "60px",
              showOverflowTooltip: true
            },{
              default:({row}) => row.out_tax 
            })
          ]
        }
      )
    }
  }

const { data, run, loading } = useAsync({
  initalData: {},
  async success(data: any){
    const { goodNo } = data
    isComposeProduct.value  = goodNo.indexOf('SSU') !== -1

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

const requestSheetOrderDetail = sequenceNo => run(httpDetail({ sequenceNo }));

defineExpose({
  onDisplay(sequenceNo) {
    visible.value = true;
    requestSheetOrderDetail(sequenceNo);
  }
});
</script>

<template>
  <ElDialog
    center
    title="销售订单详情"
    v-model="visible"
    width="1100px"
  :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div v-loading="loading">
      <BasicDescriptions
        v-loading="loading"
        :columns="ORDER_COLUMNS"
        ref="defaultRef"
        :col-number="3"
        :data="data"
      />
      <h1 text-18px my-2 text-center text="#303133">商品详情</h1>
      <BasicDescriptions
        v-loading="loading"
        :columns="[...GOOD_COLUMNS,...(isComposeProduct ? [childItem] : [])]"
        ref="defaultRef"
        :col-number="3"
        :data="{...data, childList}"
      />
    </div>
  </ElDialog>
</template>
