<!-- 保税仓业务-出仓管理-详情 -->
<template>
    <app-drawer class="g-details" title="详情" :width="960" v-model:show="show">
        <app-table-details :title="`收货信息-${getGZBSCOutTypeName(selectedRow.outtype)}`" :label-width="110"
            :data="selectedRow" :cell-props="receiveCells" :column="2" />
        <app-table-details title="发货信息" :label-width="110" :data="selectedRow" :cell-props="deliveryCells" :column="2" />
        <app-table :data="orderDetailList" :columns="columns1" :show-toolbar="false" border>
            <template #header>
                <h3 class="g-details__title">
                    商品信息
                    <el-button size="small" @click="showDownload = true">文件下载</el-button>
                </h3>
            </template>
        </app-table>
        <app-table :data="orderDetailAttList" :columns="columns2" :show-toolbar="false" border>
            <template #header>
                <h3 class="g-details__title">附表信息</h3>
            </template>
        </app-table>
        <component :is="Download" v-bind="{ selectedRow }" @closed="showDownload = false" v-if="showDownload" />
    </app-drawer>
</template>

<script lang="ts" setup>
import { shallowRef, PropType, defineAsyncComponent } from 'vue'
import { getGZBSCOutTypeName } from '@/constants/bonded'
import { useBScinOutOrderDetail } from '@/business/bonded'
import AppDrawer from '@pc/components/base/drawer/index.vue'
import AppTable from '@pc/components/base/table/index.vue'
import AppTableDetails from '@pc/components/base/table-details/index.vue'

const Download = defineAsyncComponent(() => import('@pc/components/modules/download/index.vue'))

const props = defineProps({
    selectedRow: {
        type: Object as PropType<Ermcp.GzbscinOutOrderRsp>,
        required: true
    },
})

const { orderDetailList, orderDetailAttList, getBScinOutOrderDetail, getBScOutOrderDetailatt } = useBScinOutOrderDetail(props.selectedRow.orderid)
const show = shallowRef(true)
const showDownload = shallowRef(false)

const receiveCells = [
    { prop: 'ordernum', label: '单据编号：' },
    { prop: 'applicanttime', label: '申请日期：' },
    { prop: 'username', label: '收货方：' },
    { prop: 'useraddress', label: '收货地址：' },
    { prop: 'contactname', label: '联系人：' },
    { prop: 'contactnum', label: '联系电话：' },
    { prop: 'logisticscompany', label: '物流公司：' },
    { prop: 'logisticsno', label: '托运单号：' },
]

const deliveryCells = [
    { prop: 'signeename', label: '发货人：' },
    { prop: 'signeedate', label: '发货日期：' },
    { prop: 'confirmername', label: '出仓确认人：' },
    { prop: 'confirmdate', label: '确认日期：' },
    { prop: 'sealno', label: '出仓封条号：' },
    { prop: 'customsno', label: '报关单号：' },
    { prop: 'jckdate', label: '出口日期：' },
    { prop: 'checklistno', label: '核注清单号：' },
]

const columns1: Ermcp.TableColumn[] = [
    { prop: 'goodsname', label: '商品名称' },
    { prop: 'goodsspec', label: '规格' },
    { prop: 'rawdetail', label: '成品对应原料明细', width: 160 },
    { prop: 'backagenum', label: '件数' },
    { prop: 'netweightct', label: '净重(克拉)' },
    { prop: 'netweightgm', label: '净重(克)' },
    { prop: 'bagweightgm', label: '连袋重(克)' },
    { prop: 'prepricegm', label: '单价(克)' },
    { prop: 'totalprice', label: '总价' },
    { prop: 'currencydes', label: '币种' },
    { prop: 'customsvalue', label: '报关总值' },
    { prop: 'origincountry', label: '原产国' },
    { prop: 'remark', label: '备注' },
]

const columns2: Ermcp.TableColumn[] = [
    { prop: 'goodsname', label: '商品名称' },
    { prop: 'customsno', label: '进口单号' },
    { prop: 'jckdate', label: '进口日期' },
    { prop: 'netweightct', label: '净重(克拉)' },
    { prop: 'curnetweightct', label: '本次扣减量(克拉)', width: 160 },
    { prop: 'remainnetweightct', label: '结余量(克拉)' },
    { prop: 'customsvalue', label: '报关总值' },
    { prop: 'curcustomsvalue', label: '本次扣减货值' },
    { prop: 'remaincustomsvalue', label: '结余货值' },
]

getBScinOutOrderDetail()
getBScOutOrderDetailatt()
</script>