<script setup>
import { inject, onMounted, onUnmounted, useSlots } from "vue";
import { tableContextKey } from "./table";
defineOptions({
  name: "YhTableColumn"
});
const props = defineProps({
  columnKey: { type: String, required: false, default: "" },
  prop: { type: String, required: false, default: "" },
  label: { type: String, required: false, default: "" },
  width: { type: [Number, String], required: false, default: "auto" },
  minWidth: { type: [Number, String], required: false, default: 80 },
  maxWidth: { type: [Number, String], required: false, default: void 0 },
  align: { type: String, required: false, default: "left" },
  headerAlign: { type: String, required: false, default: void 0 },
  fixed: { type: [String, Boolean], required: false, default: false },
  sortable: { type: [Boolean, String], required: false, default: false },
  filterable: { type: Boolean, required: false, default: false },
  filters: { type: Array, required: false, default: () => [] },
  filterMultiple: { type: Boolean, required: false, default: true },
  resizable: { type: Boolean, required: false, default: true },
  showOverflowTooltip: { type: Boolean, required: false, default: false },
  className: { type: String, required: false, default: "" },
  headerClassName: { type: String, required: false, default: "" },
  type: { type: String, required: false, default: void 0 },
  visible: { type: Boolean, required: false, default: true },
  treeNode: { type: Boolean, required: false, default: false }
});
const slots = useSlots();
const tableContext = inject(tableContextKey, null);
const columnConfig = {
  key: props.columnKey,
  prop: props.prop,
  label: props.label,
  width: props.width,
  minWidth: props.minWidth,
  maxWidth: props.maxWidth,
  align: props.align,
  headerAlign: props.headerAlign,
  fixed: props.fixed === false ? void 0 : props.fixed,
  sortable: props.sortable,
  filterable: props.filterable,
  filters: props.filters,
  filterMultiple: props.filterMultiple,
  resizable: props.resizable,
  showOverflowTooltip: props.showOverflowTooltip,
  className: props.className,
  headerClassName: props.headerClassName,
  type: props.type,
  visible: props.visible,
  treeNode: props.treeNode,
  // 注入插槽渲染函数
  render: slots.default ? (params) => slots.default(params) : void 0,
  headerRender: slots.header ? (params) => slots.header(params) : void 0
};
onMounted(() => {
  if (tableContext) {
    tableContext.registerColumn(columnConfig);
  }
});
onUnmounted(() => {
  if (tableContext) {
    tableContext.unregisterColumn(columnConfig);
  }
});
</script>

<template>
  <div v-if="false" />
</template>

<style>
@charset "UTF-8";
/**
 * Table 表格组件样式
 * 极致网格修复方案 (Pseudo-Frame Strategy)
 * 所有视觉属性均通过主题变量驱动，支持主题定制与暗黑模式
 */
/**
 * YH-UI Sass Variables
 * 原具体的 CSS 变量输出规则 (:root, html.dark 等) 已移至 root.scss，以防止各组件样式编译时产生重复的全局变量 CSS 冗余。
 */
.yh-table {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--yh-table-row-bg);
  font-size: var(--yh-table-font-size);
  color: var(--yh-table-text-color);
}
.yh-table__inner-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.yh-table table {
  width: 100%;
  margin: 0;
  padding: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.yh-table__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  margin-bottom: 8px;
  min-height: 40px;
  box-sizing: border-box;
}

.yh-table__toolbar-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.yh-table__toolbar-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 16px;
}

.yh-table__header-wrapper {
  overflow: hidden;
  background-color: var(--yh-table-header-bg);
}

.yh-table__body-wrapper {
  flex: 1;
  overflow: auto;
  position: relative;
}
.yh-table__body-wrapper--virtual {
  position: relative;
}

.yh-table__virtual-phantom {
  width: 100%;
  pointer-events: none;
}

.yh-table__body--virtual {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  will-change: transform;
  contain: layout style;
}

.yh-table__header-cell {
  box-sizing: border-box;
  padding: var(--yh-table-cell-padding);
  background-color: var(--yh-table-header-bg);
  color: var(--yh-table-header-text-color);
  font-weight: var(--yh-table-header-font-weight);
  text-align: left;
  vertical-align: middle;
  border-bottom: var(--yh-border-width) var(--yh-border-style) var(--yh-table-border-color);
  background-clip: padding-box;
}
.yh-table__header-cell.is-group {
  text-align: center;
}
.yh-table__header-cell.is-fixed-left {
  position: sticky;
  z-index: 10;
  background-color: var(--yh-table-header-bg);
}
.yh-table__header-cell.is-fixed-right {
  position: sticky;
  z-index: 10;
  background-color: var(--yh-table-header-bg);
}

.yh-table__cell {
  box-sizing: border-box;
  padding: var(--yh-table-cell-padding);
  background-color: var(--yh-table-row-bg);
  vertical-align: middle;
  border-bottom: var(--yh-border-width) var(--yh-border-style) var(--yh-table-border-color);
  transition: background-color var(--yh-duration-base) var(--yh-timing-ease);
  background-clip: padding-box;
}
.yh-table__cell.is-fixed-left {
  position: sticky;
  z-index: 2;
  background-color: var(--yh-table-row-bg);
}
.yh-table__cell.is-fixed-right {
  position: sticky;
  z-index: 2;
  background-color: var(--yh-table-row-bg);
}

.yh-table__cell-content {
  padding: 0 var(--yh-table-cell-spacing);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  word-break: normal;
  overflow-wrap: anywhere;
  line-height: var(--yh-line-height-normal);
}
.yh-table__cell-content.is-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yh-table__selection-cell {
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}
.yh-table__selection-cell input[type=checkbox],
.yh-table__selection-cell input[type=radio] {
  margin: 0;
  cursor: pointer;
  vertical-align: middle;
}

.yh-table__expand-cell {
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}

.yh-table__index-cell {
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}

.yh-table.is-border .yh-table__header-cell,
.yh-table.is-border .yh-table__cell {
  border-right: var(--yh-border-width) var(--yh-border-style) var(--yh-table-border-color);
}
.yh-table.is-border .yh-table__inner-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border: var(--yh-border-width) var(--yh-border-style) var(--yh-table-border-color);
  pointer-events: none;
  z-index: 20;
}
.yh-table.is-border .yh-table__header-wrapper {
  border-bottom: var(--yh-border-width) var(--yh-border-style) var(--yh-table-border-color);
}
.yh-table.is-stripe .yh-table__row:nth-child(even) {
  background-color: var(--yh-table-row-stripe-bg);
}
.yh-table.is-stripe .yh-table__row:nth-child(even) .yh-table__cell {
  background-color: var(--yh-table-row-stripe-bg);
}
.yh-table__row:hover {
  background-color: var(--yh-table-row-hover-bg);
}
.yh-table__row:hover .yh-table__cell {
  background-color: var(--yh-table-row-hover-bg);
}
.yh-table__row.is-current {
  background-color: var(--yh-table-row-current-bg) !important;
}
.yh-table__row.is-current .yh-table__cell {
  background-color: var(--yh-table-row-current-bg) !important;
}

.yh-table--large {
  --yh-table-cell-padding: 14px 0;
  --yh-table-cell-spacing: 14px;
  --yh-table-font-size: var(--yh-font-size-md);
}

.yh-table--small {
  --yh-table-cell-padding: 8px 0;
  --yh-table-cell-spacing: 8px;
  --yh-table-font-size: var(--yh-font-size-sm);
}

.yh-table__sort-icon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  height: 14px;
  width: 24px;
  vertical-align: middle;
  cursor: pointer;
  margin-left: 4px;
  flex-shrink: 0;
  position: relative;
  overflow: initial;
}
.yh-table__sort-icon .sort-caret {
  width: 0;
  height: 0;
  border: solid 5px transparent;
  position: absolute;
  left: 7px;
}
.yh-table__sort-icon .sort-caret.ascending {
  border-bottom-color: var(--yh-text-color-placeholder, #c0c4cc);
  top: -5px;
}
.yh-table__sort-icon .sort-caret.ascending.is-active {
  border-bottom-color: var(--yh-color-primary, #409eff);
}
.yh-table__sort-icon .sort-caret.descending {
  border-top-color: var(--yh-text-color-placeholder, #c0c4cc);
  bottom: -3px;
}
.yh-table__sort-icon .sort-caret.descending.is-active {
  border-top-color: var(--yh-color-primary, #409eff);
}

.yh-table__header-cell.is-sortable {
  cursor: pointer;
  user-select: none;
}
.yh-table__header-cell.is-sortable:hover {
  background-color: var(--yh-table-row-hover-bg, rgba(0, 0, 0, 0.02));
}

.yh-table__tree-indent {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  flex-shrink: 0;
}

.yh-table__tree-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  cursor: pointer;
  transition: transform 0.2s ease;
  transform: rotate(0deg);
  color: var(--yh-text-color-secondary, #909399);
  margin-right: 4px;
  flex-shrink: 0;
}
.yh-table__tree-icon.is-expanded {
  transform: rotate(90deg);
}
.yh-table__tree-icon svg {
  width: 16px;
  height: 16px;
}

.yh-table__tree-leaf-spacer {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  flex-shrink: 0;
}

.yh-table__expand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  cursor: pointer;
  transition: transform 0.2s ease;
  transform: rotate(0deg);
  color: var(--yh-text-color-secondary, #909399);
}
.yh-table__expand-icon.is-expanded {
  transform: rotate(90deg);
}
.yh-table__expand-icon svg {
  width: 16px;
  height: 16px;
}

.yh-table__expanded-row td {
  padding: 0;
  border-bottom: var(--yh-border-width) var(--yh-border-style) var(--yh-table-border-color);
  background-color: var(--yh-table-row-bg);
}

.yh-table__footer-wrapper {
  overflow: hidden;
  border-top: var(--yh-border-width) var(--yh-border-style) var(--yh-table-border-color);
  flex-shrink: 0;
}

.yh-table__summary-row .yh-table__cell {
  font-weight: 600;
  background-color: var(--yh-table-header-bg, #fafafa);
}

.yh-table__resize-handle {
  position: absolute;
  right: -3px;
  top: 0;
  bottom: 0;
  width: 7px;
  cursor: col-resize;
  z-index: 11;
}
.yh-table__resize-handle::after {
  content: "";
  position: absolute;
  top: 25%;
  right: 3px;
  bottom: 25%;
  width: 1px;
  background-color: transparent;
  transition: background-color 0.15s ease;
}
.yh-table__resize-handle:hover::after {
  background-color: var(--yh-color-primary, #409eff);
}

.yh-table__header-cell {
  position: relative;
}

.yh-table__resize-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--yh-color-primary, #409eff);
  z-index: 30;
  pointer-events: none;
}

.yh-table.is-resizing {
  cursor: col-resize !important;
  user-select: none;
}
.yh-table__row.is-row-draggable {
  cursor: grab;
}
.yh-table__row.is-row-draggable:active {
  cursor: grabbing;
}
.yh-table__row.is-dragging {
  opacity: 0.4;
  background-color: var(--yh-color-primary-light-9, #ecf5ff) !important;
}
.yh-table__row.is-dragging .yh-table__cell {
  background-color: var(--yh-color-primary-light-9, #ecf5ff) !important;
}
.yh-table__row.is-drop-target-above {
  box-shadow: inset 0 2px 0 0 var(--yh-color-primary, #409eff);
}
.yh-table__row.is-drop-target-above .yh-table__cell {
  box-shadow: inset 0 2px 0 0 var(--yh-color-primary, #409eff);
}
.yh-table__row.is-drop-target-below {
  box-shadow: inset 0 -2px 0 0 var(--yh-color-primary, #409eff);
}
.yh-table__row.is-drop-target-below .yh-table__cell {
  box-shadow: inset 0 -2px 0 0 var(--yh-color-primary, #409eff);
}

.yh-table__drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: var(--yh-text-color-placeholder, #c0c4cc);
  margin-right: 8px;
  flex-shrink: 0;
}
.yh-table__drag-handle:hover {
  color: var(--yh-color-primary, #409eff);
}
.yh-table__drag-handle:active {
  cursor: grabbing;
}
.yh-table__drag-handle svg {
  width: 14px;
  height: 14px;
}

.yh-table__header-cell.is-column-draggable {
  cursor: grab;
}
.yh-table__header-cell.is-column-draggable:active {
  cursor: grabbing;
}
.yh-table__header-cell.is-column-dragging {
  opacity: 0.4;
  background-color: var(--yh-color-primary-light-9, #ecf5ff) !important;
}
.yh-table__header-cell.is-column-drop-left {
  position: relative;
}
.yh-table__header-cell.is-column-drop-left::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--yh-color-primary, #409eff);
  z-index: 10;
}
.yh-table__header-cell.is-column-drop-right {
  position: relative;
}
.yh-table__header-cell.is-column-drop-right::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--yh-color-primary, #409eff);
  z-index: 10;
}

.yh-table__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 24px 0;
}

.yh-table__empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.yh-table__empty-image img {
  max-width: 160px;
  max-height: 100px;
  object-fit: contain;
}

.yh-table__empty-text {
  font-size: 14px;
  color: var(--yh-text-color-secondary, #909399);
}

.yh-table__header-icon-prefix {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  flex-shrink: 0;
  font-size: inherit;
  line-height: 1;
}
.yh-table__header-icon-prefix svg {
  width: 1em;
  height: 1em;
}

.yh-table__header-icon-suffix {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  flex-shrink: 0;
  font-size: inherit;
  line-height: 1;
}
.yh-table__header-icon-suffix svg {
  width: 1em;
  height: 1em;
}

.yh-table .is-center {
  text-align: center;
}
.yh-table .is-center .yh-table__cell-content {
  justify-content: center;
}
.yh-table .is-right {
  text-align: right;
}
.yh-table .is-right .yh-table__cell-content {
  justify-content: flex-end;
}
.yh-table__cell-text.is-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: block;
}

.yh-table.is-auto-wrap .yh-table__cell-content {
  white-space: normal;
  word-break: break-all;
  line-height: 1.5;
}
.yh-table.is-overflow-hidden .yh-table__cell-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yh-table .is-column-highlight {
  background-color: var(--yh-color-primary-light-9, #ecf5ff) !important;
}
.yh-table__loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--yh-mask-color-light, rgba(255, 255, 255, 0.8));
  z-index: 20;
  transition: opacity 0.3s ease;
}

.yh-table__loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.yh-table__loading-spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid var(--yh-color-primary-light-5, #a0cfff);
  border-top-color: var(--yh-color-primary, #409eff);
  border-radius: 50%;
  animation: yh-table-spin 0.8s linear infinite;
}

.yh-table__loading-text {
  font-size: 14px;
  color: var(--yh-color-primary, #409eff);
}

@keyframes yh-table-spin {
  to {
    transform: rotate(360deg);
  }
}
.yh-table.is-scrolling-middle .is-last-fixed-left::after {
  box-shadow: var(--yh-table-fixed-left-shadow);
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  transform: translateX(100%);
  pointer-events: none;
  z-index: 1;
}
.yh-table.is-scrolling-middle .is-first-fixed-right::before {
  box-shadow: var(--yh-table-fixed-right-shadow);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 1;
}
.yh-table__pagination-wrapper {
  padding: 16px 0;
  margin-top: 8px;
  display: flex;
  align-items: center;
  background-color: transparent;
}
.yh-table__pagination-wrapper.is-align-left {
  justify-content: flex-start;
}
.yh-table__pagination-wrapper.is-align-center {
  justify-content: center;
}
.yh-table__pagination-wrapper.is-align-right {
  justify-content: flex-end;
}
</style>
