<!-- 
  提单费用设置、编辑
 -->
<template>
  <SysDialog
    :visible="dialog.visible"
    v-bind="getBindValue"
    custom-class="lading-bill-moneyset"
    @onClose="onclose"
    @onConfirm="confirm"
  >
    <template #content>
      <el-tabs
        v-model="ladingBillMoneySetState.activeBillType"
      >
        <el-tab-pane
          label="应收费用"
          :name="LadingBillMoneySetTabs.RECEIVABLE"
        >
          <!-- 应收模版 -->
          <ReceivableContent
            ref="receivableContentRef"
            :is-show-view="isShowView"
            :receivable-form="ladingBillFeeSetForm.billReceivable"
          />
        </el-tab-pane>
        <el-tab-pane
          label="应付费用"
          :name="LadingBillMoneySetTabs.PAYABLE"
        >
          <!-- 应付模版 -->
          <PayableContent
            ref="payableContentRef"
            :is-show-view="isShowView"
            :payable-form="ladingBillFeeSetForm.payableModel"
          />
        </el-tab-pane>
      </el-tabs>
    </template>
    <template #defineFooter>
      <span class="dialog-footer">
        <el-tooltip
          effect="dark"
          content="温馨提示：修改后保存设置的费用计算更准确~"
          placement="top"
        >
          <el-button
            type="info"
            @click="confirmFeeCalculate"
          >试算</el-button>
        </el-tooltip>
        <el-button
          type="primary"
          @click="confirm"
        >保存设置</el-button>
        <el-button
          @click="onclose"
        >关闭</el-button>
      </span>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import SysDialog from "@/components/SysDialog.vue";
import { useLadingBillMoneySet } from "@/composables/lading/useLadingBillMoneySet";
import useDialog from "@/hooks/useDialog";
import { reactive } from 'vue';
import ReceivableContent from './components/ReceivableContent.vue';
import PayableContent from './components/PayableContent.vue';
import { LadingBillMoneySetTabs } from "@/type/BaseLading";

// 弹框一些配置
const getBindValue = reactive({
    title: "提单费用设置",
    width: 1400,
    top: "5vh",
    height: 0,
    closeOnClickModal: false,
    isFooter: true
});
//弹框属性
const { dialog, onClose, onShow } = useDialog();
const emit = defineEmits(["saveBillSet","saveFeeCalculate"])

const { 
  show, 
  onclose, 
  confirm, 
  confirmFeeCalculate,
  ladingBillFeeSetForm,
  ladingBillMoneySetState, 
  receivableContentRef,
  payableContentRef,
  isShowView
} = useLadingBillMoneySet(
  onClose, 
  onShow,
  emit
)
//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show
});
</script>
<style lang="scss">
.lading-bill-moneyset {
  .title {
    font-weight: bold;
    padding: 10px 0;
  }
  .product-name {
    padding: 0 10px;
  }
  .el-dialog__footer {
    position: sticky;
    bottom: 0;
    background-color: #ffffff;
    z-index: 99;
  }
}
</style>