<script setup lang="ts">
import { h } from "vue"
import BasicDescriptions from "/@/components/BasicDescriptions";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { ElTag, ElTooltip, ElButton } from "element-plus"

import { createTooltip } from "/@/utils/tootip";


defineProps<{ tradeInfo: Record<string, any>; }>();

const status_options = [
  { label: "未认领", value: "1" },
  { label: "部分认领", value: "2" },
  { label: "已认领", value: "3" }
]

 const columns = [
  { label: "资金编码", span: 6, field: "tradNo" },
  { label: '回款类型', span: 6, render(_, row) {
      return h(ElTag, { size: 'small' }, {
        default: () => row.trade_type == '1' ? '平台公司回款' : '业务公司回款'
      })
    }
  },
  { label: '创建人', field: 'apply_name', span: 6 },
  { label: '创建时间', field: 'addtime', span: 6 },
  {
    label: '业务公司名称',
    span: 12,
    render(_, row){
      return h('div', {  style: 'display:flex' }, {
        default: () =>  ([
          h(ElTooltip, { content: '业务公司编码:' + row.companyNo, placement: 'top' }, { default: () => h(ElButton, { icon: useRenderIcon('information-line'), link: true, type: 'info' }) }),
          row.companyName
        ])
      })
    }
  },
  {
    field: 'total_fee',
    label: '业务公司收入总价',
    span: 6
  },
  {
    field: 'trade_time',
    label: "交易时间",
    span: 6
  },
  {
    label: '收款方公司名称',
    span: 12,
    render(_, row){
      return h('div', {  style: 'display:flex' }, {
        default: () =>  ([
          h(ElTooltip, { content: '收款方公司编码:' + row.trade_in_code, placement: 'top' }, { default: () => h(ElButton, { icon: useRenderIcon('information-line'), link: true, type: 'info' }) }),
          row.trade_in
        ])
      })
    }
  },
  {
    span: 12,
    label: '收款方公司账号',
    field: 'trade_in_account'
  },
  {
    span: 12,
    label: '客户付款信息',
    render(_, ctx){
      return ctx.trade_out + '-' + ctx.trade_out + '-' + ctx.trade_in_account
    }
  },
  {
    span: 12,
    label: '客户机构名称',
    field: 'customerName'
  },
  {
    span: 8,
    label: '总金额',
    field: 'total_fee'
  },
  {
    span: 8,
    label: '未认领金额',
    field: 'balance'
  },
  {
    span: 8,
    label: '已认领金额',
    field: 'used_fee'
  },
  {
    span: 24,
    label: '客户PO',
    field: 'poCode'
  },
  {
    span: 24,
    field: 'NdCode',
    label: '客户DN'
  },
  {
    span: 24,
    label: '批次号',
    field: 'pcCode'
  },
  {
    span: 24,
    label: '交易用途',
    field: 'trade_used'
  }
];


const columns_bottom = [
  { label: '泰e购SKU', span: 6, field: 'skuCode'  },
  { label: '产品数量', span: 6, field: 'goodNum' },
  { label: '业务公司收入单价', span: 6, field: 'comPrice' },
  { label: '业务公司收入总价', span: 6, field: 'com_total' },
  { label: '平台物料名称', span: 6 , field: 'goodName'},
  { label: '税率', span: 6, field: 'tax' },
  { 
    label: '税目名称', 
    span: 12, 
    render(_, row){
      return h('div', {  style: 'display:flex' }, {
        default: () =>  ([
          h(ElTooltip, { content: '税目编码:' + row.cat_code, placement: 'top' }, { default: () => h(ElButton, { icon: useRenderIcon('information-line'), link: true, type: 'info' }) }),
          row.cat_name
        ])
      })
    }
  },
  { label: '平台采购PO', span: 12, field: 'palt_po' },
  { label: '平台收入单价', span: 6 , field: 'platPrice'},
  { label: '平台收入总价', span: 6, field: 'plat_total' },
  { label: '商品唯一编号(采销365商品编号)', span: 12, field: 'goodNo' },
  { label: '单位', span: 6, field: 'unit' }
]

</script>

<template>
   <div class="flex flex-col">
      <BasicDescriptions 
        class="mb-[20px]" 
        :data="tradeInfo" 
        :columns="columns" 
      />

      <BasicDescriptions
        v-if="tradeInfo && tradeInfo.trade_type == 1"
        :data="tradeInfo" 
        :columns="columns_bottom" 
      />
   </div>
</template>

<style lang="scss" scoped>
:deep(.el-descriptions__label) {
  width: 80px !important;
}
</style>
