<template>
  <el-drawer v-model="drawerVisible" size="1000">
    <template #header>
      <div><el-button type="primary" v-print="'#print'">打印</el-button></div>
    </template>

    <div id="print">
      <DetailCom ref="detailComRef"></DetailCom>
    </div>
  </el-drawer>
</template>

<script setup>
import DetailCom from "@/views/sales/DetailCom.vue";

const drawerVisible = ref(false);
const detailComRef = ref(null);

const showDrawer = (row) => {
  drawerVisible.value = true;

  nextTick(() => {
    detailComRef.value && detailComRef.value.refreshView(row);
  });
};

defineExpose({ showDrawer });
</script>

<style scoped lang="scss">
@media print {
  #print {
    position: absolute; /* 或 absolute, fixed, 根据需要调整 */
    top: 20px; /* 调整顶部位置 */
    margin: 0; /* 重置边距 */
    width: 1000px;
  }
}
</style>
