<!-- 
  提单新增、编辑
 -->
<template>
  <SysDialog
    class="lading-billset-dialog"
    :visible="dialog.visible"
    v-bind="getBindValue"
    :title="dialog.title"
    @onClose="onclose"
    @onConfirm="confirm"
  >
    <template #content>
      <el-form
        ref="ladingBillSetFormRef"
        class="ladingB-bill"
        :model="ladingBillSetForm"
        :rules="ladingBillSetState.rulesLadingBillSet"
        inline
      >
        <el-divider content-position="left">
          <div class="inline-flex">
            <span class="title">基础信息:</span>
            <el-form-item
              prop="stakeholder"
              label="所属主体:"
              class="main"
            >
              <BaseSelect
                v-model:modelValue="ladingBillSetForm.stakeholder"
                placeholder="所属主体"
                :options="companyEntityTypeList"
                remote
              />
            </el-form-item>
          </div>
        </el-divider>
        <div class="content">
          <BaseFormItem
            :id="ladingBillSetForm.id"
            ref="basisListRef"
            :schemas="ladingBillSetState.basisList"
            :data-source="ladingBillSetForm"
            @change-form="changeLadingBillSetForm"
          />
        </div>
        <el-divider content-position="left">
          <span class="title">订舱信息:</span>
        </el-divider>
        <div class="content">
          <BaseFormItem
            :id="ladingBillSetForm.id"
            ref="bookingRef"
            :schemas="ladingBillSetState.booking"
            :data-source="ladingBillSetForm"
            @change-form="changeLadingBillSetForm"
          />
        </div>
        <el-divider content-position="left">
          <span class="title">计费信息:</span>
        </el-divider>
        <div class="content">
          <BaseFormItem
            :id="ladingBillSetForm.id"
            ref="calculateCostRef"
            :schemas="ladingBillSetState.calculateCost"
            :data-source="ladingBillSetForm"
            @change-form="changeLadingBillSetForm"
          />
        </div>
      </el-form>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import BaseFormItem from "@/components/BaseFormItem/BaseFormItem.vue";
import BaseSelect from '@/components/QuerySelect/BaseSelect.vue';
import SysDialog from "@/components/SysDialog.vue";
import { useLadingBillSet } from "@/composables/lading/useLadingBillSet";
import useDialog from "@/hooks/useDialog";
import { reactive } from 'vue';

const emit = defineEmits(['saveConfirm'])
// 弹框一些配置
const getBindValue = reactive({
  title: "新增提单",
  width: "72%",
  top: "3vh",
  height: 0
});
//弹框属性
const { dialog, onClose, onShow } = useDialog();

const {
  show,
  onclose,
  confirm,
  changeLadingBillSetForm,
  ladingBillSetFormRef,
  ladingBillSetForm,
  ladingBillSetState,
  basisListRef,
  bookingRef,
  calculateCostRef,
  companyEntityTypeList
} = useLadingBillSet(dialog, onClose, onShow, emit)

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show
});
</script>
<style lang="scss" scoped>
.lading-billset-dialog {
  .ladingB-bill {
    .title {
      font-weight: bold;
    }

    .content {
      padding-left: 38px;
      padding-right: 38px;
    }

    .inline-flex {
      display: inline-flex;
      align-items: center;

      .main {
        margin-left: 10px;
      }

      :deep(.el-form-item) {
        margin-bottom: 0;
      }
    }
  }
}
</style>