<template>
  <SysDialog class="lading-detail-list" :visible="dialog.visible" v-bind="getBindValue" @onClose="onClose">
    <template #content>
      <div class="lading-preview-bill">
        <table class="bill-table">
          <colgroup>
            <col style="width: 25%;">
            <col style="width: 25%;">
            <col style="width: 25%;">
            <col style="width: 25%;">
          </colgroup>
          <tbody>
            <tr>
              <td colspan="5" class="customer-name">
                <div class="table-text">
                  {{ customerBillData.customerName }}
                </div>
              </td>
            </tr>
            <tr>
              <td>DATE(日期)</td>
              <td>{{ timeFiltering(customerBillData.bookingTime) }}</td>
              <td>AWB(单号)</td>
              <td>
                <div class="table-text">
                  {{ customerBillData.waybillNumber }}
                </div>
              </td>
            </tr>
            <tr>
              <td>PIECE(件数)</td>
              <td>{{ customerBillData.orderNumber }}</td>
              <td>WEIGHT (重量)</td>
              <td>
                {{ customerBillData.weight }}
              </td>
            </tr>
            <tr>
              <td>Volumn(体积)</td>
              <td>{{ customerBillData.volume }}</td>
              <td>GrossWeight(毛重)</td>
              <td>
                {{ customerBillData.grossWeight }}
              </td>
            </tr>
            <tr>
              <td>Departure(始发站)</td>
              <td>
                <div class="table-text">
                  {{ portInfoLabel(customerBillData.departurePort) }}
                </div>
              </td>
              <td>Destination (目的站)</td>
              <td>
                <div class="table-text">
                  {{ portInfoLabel(customerBillData.destinationPort) }}
                </div>
              </td>
            </tr>
            <tr>
              <td class="bold text-center" colspan="2">
                费用名称
              </td>
              <td class="bold text-center">
                币种
              </td>
              <td class="bold text-center">
                费用
              </td>
            </tr>
            <template v-if="customerBillData.customerBillMoneyDetailList">
              <tr v-for="(item, index) in customerBillData.customerBillMoneyDetailList" :key="index">
                <td colspan="2">
                  <div class="table-text">
                    {{ item.feeItemName }}
                  </div>
                </td>
                <td>
                  <div class="table-text">
                    {{ item.currencyCode }}
                  </div>
                </td>
                <td>
                  <div class="table-text"> 
                    {{ item.fee }}
                  </div>
                </td>
              </tr>
            </template>
            <template v-else>
              <tr>
                <td colspan="5" class="bold text-center">暂无数据</td>
              </tr>
            </template>
            <tr>
              <td class="bold">
                合计（TOTAL）
              </td>
              <td colspan="2" />
              <td class="bold">
                {{ customerBillData.totalFee }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </template>
    <template #defineFooter>
      <span class="dialog-footer">
        <el-button @click="onClose">关闭</el-button>
      </span>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import { CustomerBillDto } from "@/api/lading/ladingModle";
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import { useDropDownData } from "@/hooks/useDropDownData";
import timeFiltering from "@/utils/timeFiltering";
import { reactive, unref } from 'vue';

// 弹框一些配置
const getBindValue = reactive({
  title: "账单预览",
  width: 1200,
  height: 0,
  isFooter: true
});
//弹框属性
const { dialog, onClose, onShow } = useDialog();
defineProps<{ customerBillData: CustomerBillDto }>()
const { portInfoList } = useDropDownData()
const portInfoLabel = (val) => {
  const finObj = unref(portInfoList).find(item => item.value === val)
  return finObj?.label
}

// 显示
const show = () => {
  onShow()
}

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show
});
</script>
<style lang="scss" scoped>
.lading-preview-bill {
  $base-color: #000000;

  .bill-table {
    display: table;
    width: 100%;
    border-top: 1px solid $base-color;
    border-left: 1px solid $base-color;
    border-collapse: collapse;

    .customer-name {
      text-align: center;
      font-weight: bold;
      font-size: 16px;
    }

    td {
      box-sizing: border-box;
      padding: 4px 8px;
      height: 50px;
      border-bottom: 1px solid $base-color;
      border-right: 1px solid $base-color;
    }

    .bold {
      font-weight: bold;
    }

    .text-center {
      text-align: center;
    }

    .table-text {
      white-space: pre-line;
      word-break: break-all;
    }
  }
}</style>