<!-- 保税仓业务-计费管理-详情 -->
<template>
    <app-drawer class="g-details" title="详情" :width="960" v-model:show="show">
        <app-table-details :title="`款项明细【${selectedRow.trademonth}】`" :label-width="120" :data="selectedRow"
            :cell-props="detailCells" :column="2">
            <!-- 支付状态 -->
            <template #paystatus="{ value }">
                {{ getGZBSCPayStatusName(value) }}
            </template>
            <!-- 支付方式 -->
            <template #paymode="{ value }">
                {{ getGZBSCPayModeName(value) }}
            </template>
        </app-table-details>
        <app-table title="电费明细" :data="powerfeeList" :columns="powerfeeColumns" :show-toolbar="false" border>
            <template #header>
                <h3 class="g-details__title">电费明细</h3>
            </template>
        </app-table>
        <app-table :data="importList" :columns="imporColumns" :show-toolbar="false" border>
            <template #header>
                <h3 class="g-details__title">进口明细</h3>
            </template>
        </app-table>
        <app-table :data="exportList" :columns="exportColumns" :show-toolbar="false" border>
            <template #header>
                <h3 class="g-details__title">出境明细</h3>
            </template>
        </app-table>
        <app-table :data="transferList" :columns="transferColumns" :show-toolbar="false" border>
            <template #header>
                <h3 class="g-details__title">转厂明细</h3>
            </template>
        </app-table>
    </app-drawer>
</template>

<script lang="ts" setup>
import { shallowRef, PropType } from 'vue'
import { getGZBSCPayStatusName, getGZBSCPayModeName } from '@/constants/bonded'
import { useGzbscusermonthpayDetails } 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 props = defineProps({
    selectedRow: {
        type: Object as PropType<Ermcp.GzbscusermonthpayRsp>,
        required: true
    },
})

const { powerfeeList, importList, exportList, transferList } = useGzbscusermonthpayDetails(props.selectedRow.trademonth)
const show = shallowRef(true)

const detailCells = [
    { prop: 'servicefee', label: '分拣室服务费：', decimal: 2 },
    { prop: 'powerfee', label: '分拣室电费：', decimal: 2 },
    { prop: 'storagefee', label: '仓储费：', decimal: 2 },
    { prop: 'premium', label: '保险费：', decimal: 2 },
    { prop: 'infee', label: '进仓报关费：', decimal: 2 },
    { prop: 'outfee', label: '出仓报关费：', decimal: 2 },
    { prop: 'totalfee', label: '合计费用：', decimal: 2 },
    { prop: 'paystatus', label: '支付状态：' },
    { prop: 'paymode', label: '支付方式：' },
    { prop: 'paytime', label: '支付时间：' },
]

const powerfeeColumns: Ermcp.TableColumn[] = [
    { prop: 'instrumentno', label: '仪表编号' },
    { prop: 'username', label: '使用单位' },
    { prop: 'startpower', label: '月初读数' },
    { prop: 'endpower', label: '月末读数' },
    { prop: 'powernum', label: '本月用量' },
    { prop: 'powerunit', label: '单位' },
    { prop: 'powerfee', label: '电费(元)' },
]

const imporColumns: Ermcp.TableColumn[] = [
    { prop: 'jckdate', label: '进口日期' },
    { prop: 'customsno', label: '报关单号' },
]

const exportColumns: Ermcp.TableColumn[] = [
    { prop: 'jckdate', label: '出境日期' },
    { prop: 'customsno', label: '报关单号' },
]

const transferColumns: Ermcp.TableColumn[] = [
    { prop: 'jckdate', label: '转厂日期' },
    { prop: 'checklistno', label: '核注清单号' },
]
</script>