<template>
  <div class="patient-info-descriptions" :class="wrapperClassObject">
    <div class="descriptions-container">
      <!-- 详情/收起按钮 -->
      <div v-if="hasMoreItems" class="detail-button-wrapper">
        <a-button
          :type="(config && config.detailsConfig && config.detailsConfig.buttonType) || 'link'"
          @click="toggleDetails"
        >
          {{ showAllItems ? '收起' : ((config && config.detailsConfig && config.detailsConfig.buttonText) || '详情') }}
          <a-icon :type="showAllItems ? 'up' : 'down'" />
        </a-button>
      </div>

      <!-- 当layout是对象格式且为5列时，使用自定义grid布局 -->
      <template v-if="config && config.layout && typeof config.layout === 'object' && !Array.isArray(config.layout) && Object.values(config.layout).every(val => val === 5) && !wrapperClassObject['xhdesc-medical-history']">
        <div class="grid-descriptions">
          <template v-if="data">
            <div
              v-for="(row, rowIndex) in gridRows"
              :key="'row-' + rowIndex"
              class="grid-row"
              :style="{ gridTemplateColumns: getGridTemplateColumns(getGridColumns()) }"
            >
              <div
                v-for="(item, itemIndex) in row"
                :key="'item-' + rowIndex + '-' + itemIndex"
                class="grid-item"
              >
                <!-- 占位符项目 -->
                <template v-if="!item.field || item.field === ''">
                  <div class="placeholder-content"></div>
                </template>
                <!-- 正常项目 -->
                <template v-else-if="data[item.field] !== null && data[item.field] !== undefined">
                  <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
                    <div v-if="item.showAvatar" class="gender-icon">
                      <img :src="maleIcon" alt="male" class="gender-img" />
                    </div>
                    <span class="label-text">{{ item.label }}<span v-if="getItemColon(item)" class="colon">:</span></span>
                  </div>
                  <a-tooltip
                    v-if="isContentOverflow(data[item.field])"
                    :title="data[item.field]"
                    placement="topLeft"
                    :overlay-style="{ maxWidth: '400px' }"
                  >
                    <div
                      class="content-wrapper ellipsis"
                      :data-full-text="data[item.field]"
                    >
                      <template v-if="wrapperClassObject['xhdesc-report-mode']">
                        <div class="report-value">
                          {{ data[item.field] }}
                        </div>
                        <div class="report-unit">
                          {{ item.unit }}
                        </div>
                      </template>
                      <template v-else>
                        {{ data[item.field] }}
                      </template>
                    </div>
                  </a-tooltip>
                  <div
                    v-else
                    class="content-wrapper"
                    :data-full-text="data[item.field]"
                  >
                    <template v-if="wrapperClassObject['xhdesc-report-mode']">
                      <div class="report-value">
                        {{ data[item.field] }}
                      </div>
                      <div class="report-unit">
                        {{ item.unit }}
                      </div>
                    </template>
                    <template v-else>
                      {{ data[item.field] }}
                    </template>
                  </div>
                </template>
              </div>
            </div>
          </template>
        </div>
      </template>

      <!-- 分组表格模式：用于显示血液库存等带分类的数据（放在 a-descriptions 之前，避免被错误匹配） -->
      <template v-if="config && config.layout === 'group-table'">
        <div class="group-table-wrapper">
          <table class="group-table">
            <thead>
              <tr>
                <th v-for="(col, colIndex) in tableColumns" :key="'col-' + colIndex">
                  {{ col.label }}
                </th>
              </tr>
            </thead>
            <tbody>
              <template v-if="processedGroupItems && processedGroupItems.length > 0">
                <template v-for="(item, index) in processedGroupItems">
                  <!-- 分类行（没有数量数据） -->
                  <tr v-if="item.isCategory" :key="'cat-' + index" class="category-row">
                    <td :colspan="tableColumns.length" class="category-name">
                      <a-tooltip :title="item.label">
                        <span class="truncate-text">{{ truncateText(item.label, 7) }}</span>
                      </a-tooltip>
                    </td>
                  </tr>
                  <!-- 数据行 -->
                  <tr v-else :key="'data-' + index" class="data-row">
                    <!-- 第一列：标签 -->
                    <td
                      class="item-value"
                      :class="getCellClass(tableColumns[0])"
                      @click="handleCellClick(tableColumns[0], item)"
                    >
                      <a-tooltip :title="getCellValue(item, tableColumns[0])">
                        <span class="truncate-text">{{ truncateText(getCellValue(item, tableColumns[0]), 7) }}</span>
                      </a-tooltip>
                    </td>
                    <!-- 第二列：数量 -->
                    <td
                      v-if="tableColumns.length > 1"
                      class="item-value item-number"
                      :class="getCellClass(tableColumns[1])"
                      @click="handleCellClick(tableColumns[1], item)"
                    >
                      {{ getCellValue(item, tableColumns[1]) }}
                    </td>
                    <!-- 第三列：即将过期 -->
                    <td
                      v-if="tableColumns.length > 2"
                      class="item-value item-expiring"
                      :class="getCellClass(tableColumns[2])"
                      @click="handleCellClick(tableColumns[2], item)"
                    >
                      {{ getCellValue(item, tableColumns[2]) }}
                    </td>
                  </tr>
                </template>
              </template>
              <!-- 无数据时显示空状态 -->
              <tr v-else class="empty-row">
                <td :colspan="tableColumns.length" class="empty-text">暂无数据</td>
              </tr>
            </tbody>
          </table>
        </div>
      </template>
      <!-- 当有 layout 配置时使用 a-descriptions -->
      <template v-else-if="config && config.layout && !wrapperClassObject['xhdesc-medical-history']">
        <a-descriptions
          :column="config.layout"
          :size="(config && config.style && config.style.size)"
          :bordered="(config && config.style && config.style.bordered)"
          layout="horizontal">
          <template v-if="data">
            <!-- 显示前N个标签 -->
            <a-descriptions-item
              v-for="(item) in visibleItemsFiltered"
              :key="item.field"
              :colon="getItemColon(item)"
              :class="{ 'with-divider': item.isLine }">
              <template #label>
                <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
                  <div v-if="item.showAvatar" class="gender-icon">
                    <img :src="maleIcon" alt="male" class="gender-img" />
                  </div>
                  <span class="label-text">
                    <template v-if="item.type === 'list'">
                      <span class="list-label-text">{{ item.label }}</span>
                    </template>
                    <template v-else>
                      {{ item.label }}
                    </template>
                  </span>
                </div>
              </template>
              <a-tooltip
                v-if="isContentOverflow(data[item.field])"
                :title="data[item.field]"
                placement="topLeft"
                :overlay-style="{ maxWidth: '400px' }"
              >
                <div
                  class="content-wrapper ellipsis"
                  :data-full-text="data[item.field]"
                >
                  <template v-if="wrapperClassObject['xhdesc-report-mode']">
                    <div class="report-value">
                      {{ data[item.field] }}
                    </div>
                    <div class="report-unit">
                      {{ item.unit }}
                    </div>
                  </template>
                  <template v-else>
                    {{ data[item.field] }}
                  </template>
                </div>
              </a-tooltip>
              <div
                v-else
                class="content-wrapper"
                :data-full-text="data[item.field]"
              >
                <template v-if="wrapperClassObject['xhdesc-report-mode']">
                  <div class="report-value">
                    {{ data[item.field] }}
                  </div>
                  <div class="report-unit">
                    {{ item.unit }}
                  </div>
                </template>
                <template v-else>
                  {{ data[item.field] }}
                </template>
              </div>
            </a-descriptions-item>

            <!-- 占位符项目 -->
            <div
              v-for="(item, index) in visibleItems"
              v-if="!item.field || item.field === ''"
              :key="'placeholder-' + index"
              class="placeholder-item"
            ></div>
          </template>

          <!-- 展开后显示剩余标签 -->
          <template v-if="showAllItems">
            <a-descriptions-item
              v-for="item in hiddenItemsFiltered"
              :key="item.field"
              :colon="getItemColon(item)"
              :class="{ 'with-divider': item.isLine }">
              <template #label>
                <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
                  <div v-if="item.showAvatar" class="gender-icon">
                    <img :src="maleIcon" alt="male" class="gender-img" />
                  </div>
                  <span class="label-text">
                    <template v-if="item.type === 'list'">
                      <span class="list-label-text">{{ item.label }}</span>
                    </template>
                    <template v-else>
                      {{ item.label }}
                    </template>
                  </span>
                </div>
              </template>
              <div
                class="content-wrapper"
                :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
                :data-full-text="data[item.field]"
              >
                <template v-if="wrapperClassObject['xhdesc-report-mode']">
                  <div class="report-value">
                    {{ data[item.field] }}
                  </div>
                  <div class="report-unit">
                    {{ item.unit }}
                  </div>
                </template>
                <template v-else>
                  {{ data[item.field] }}
                </template>
              </div>
            </a-descriptions-item>

            <!-- 展开部分的占位符项目 -->
            <div
              v-for="(item, index) in hiddenItems"
              v-if="!item.field || item.field === ''"
              :key="'hidden-placeholder-' + index"
              class="placeholder-item"
            ></div>
          </template>
        </a-descriptions>
      </template>

      <!-- 医疗病史模式：使用自定义HTML结构实现文本环绕 -->
      <template v-else-if="config && config.layout && wrapperClassObject['xhdesc-medical-history']">
        <div class="medical-history-descriptions">
          <template v-if="data">
            <!-- 显示前N个标签 -->
            <div
              v-for="(item) in visibleItemsFiltered"
              :key="item.field"
              :class="['medical-history-item', { 'with-divider': item.isLine }]"
            >
              <div class="medical-history-content">
                <a-tooltip
                  v-if="isContentOverflow(data[item.field])"
                  :title="data[item.field]"
                  placement="topLeft"
                  :overlay-style="{ maxWidth: '400px' }"
                >
                  <div class="medical-history-text ellipsis">
                    <span class="medical-history-label">{{ item.label }}：</span>{{ data[item.field] }}
                  </div>
                </a-tooltip>
                <div
                  v-else
                  class="medical-history-text"
                >
                  <span class="medical-history-label">{{ item.label }}：</span>{{ data[item.field] }}
                </div>
              </div>
            </div>

            <!-- 展开后显示剩余标签 -->
            <template v-if="showAllItems">
              <div
                v-for="item in hiddenItemsFiltered"
                :key="item.field"
                class="medical-history-item"
              >
                <div class="medical-history-content">
                  <a-tooltip
                    v-if="isContentOverflow(data[item.field])"
                    :title="data[item.field]"
                    placement="topLeft"
                    :overlay-style="{ maxWidth: '400px' }"
                  >
                    <div class="medical-history-text ellipsis">
                      <span class="medical-history-label">{{ item.label }}：</span>{{ data[item.field] }}
                    </div>
                  </a-tooltip>
                  <div
                    v-else
                    class="medical-history-text"
                  >
                    <span class="medical-history-label">{{ item.label }}：</span>{{ data[item.field] }}
                  </div>
                </div>
              </div>
            </template>
          </template>
        </div>
      </template>

      <!-- 当没有 layout 配置时使用自适应布局 -->
      <template v-else>
        <div class="flex-descriptions">
          <template v-if="data">
            <!-- 显示可见的标签 -->
            <div
              v-for="(item) in visibleItemsFiltered"
              :key="item.field"
              :class="['description-item', { 'with-divider': item.isLine }]"
            >
              <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
                <div v-if="item.showAvatar" class="gender-icon">
                  <img :src="maleIcon" alt="male" class="gender-img" />
                </div>
                <span class="label-text">{{ item.label }}<span v-if="getItemColon(item)" class="colon">:</span></span>
              </div>
              <a-tooltip
                v-if="isContentOverflow(data[item.field])"
                :title="data[item.field]"
                placement="topLeft"
                :overlay-style="{ maxWidth: '400px' }"
              >
                <div
                  class="content-wrapper ellipsis"
                  :data-full-text="data[item.field]"
                >
                  <template v-if="wrapperClassObject['xhdesc-report-mode']">
                    <div class="report-value">
                      {{ data[item.field] }}
                    </div>
                    <div class="report-unit">
                      {{ item.unit }}
                    </div>
                  </template>
                  <template v-else>
                    {{ data[item.field] }}
                  </template>
                </div>
              </a-tooltip>
              <div
                v-else
                class="content-wrapper"
                :data-full-text="data[item.field]"
              >
                <template v-if="wrapperClassObject['xhdesc-report-mode']">
                  <div class="report-value">
                    {{ data[item.field] }}
                  </div>
                  <div class="report-unit">
                    {{ item.unit }}
                  </div>
                </template>
                <template v-else>
                  {{ data[item.field] }}
                </template>
              </div>
            </div>

            <!-- 展开后显示的内容 -->
            <template v-if="showAllItems">
              <div
                v-for="item in hiddenItemsFiltered"
                :key="item.field"
                class="description-item"
              >
                <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
                  <div v-if="item.showAvatar" class="gender-icon">
                    <img :src="maleIcon" alt="male" class="gender-img" />
                  </div>
                  <span class="label-text">{{ item.label }}<span v-if="getItemColon(item)" class="colon">:</span></span>
                </div>
                <div
                  class="content-wrapper"
                  :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
                  :data-full-text="data[item.field]"
                >
                  <template v-if="wrapperClassObject['xhdesc-report-mode']">
                    <div class="report-value">
                      {{ data[item.field] }}
                    </div>
                    <div class="report-unit">
                      {{ item.unit }}
                    </div>
                  </template>
                  <template v-else>
                    {{ data[item.field] }}
                  </template>
                </div>
              </div>
            </template>
          </template>
        </div>
      </template>

      <!-- 可选：底部区域（分割线 + 三列内容） -->
      <div v-if="config && config.footer && Array.isArray(config.footer.items) && data" class="xhdesc-footer">
        <div class="xhdesc-divider" />
        <!-- 医疗病史模式下的footer结构 -->
        <div v-if="wrapperClassObject['xhdesc-medical-history']" class="medical-history-footer">
          <div
            v-for="(item, idx) in config.footer.items"
            :key="item.field || idx"
            class="medical-history-item">
            <div class="medical-history-content">
              <a-tooltip
                v-if="isContentOverflow(data[item.field])"
                :title="data[item.field]"
                placement="topLeft"
                :overlay-style="{ maxWidth: '400px' }"
              >
                <div class="medical-history-text ellipsis">
                  <span class="medical-history-label">{{ item.label }}：</span>{{ data[item.field] }}
                </div>
              </a-tooltip>
              <div
                v-else
                class="medical-history-text"
              >
                <span class="medical-history-label">{{ item.label }}：</span>{{ data[item.field] }}
              </div>
            </div>
          </div>
          <!-- 右侧信息：换到下一行并靠右对齐（如 医生 / 医嘱日期） -->
          <div
            v-if="Array.isArray(config.footer.rightItems) && config.footer.rightItems.length"
            class="footer-right">
            <div
              v-for="(item, ridx) in config.footer.rightItems"
              :key="item.field || ridx"
              class="footer-right-item">
              <div class="label-wrapper">
                <span class="label-text">{{ item.label }}<span v-if="getItemColon(item)" class="colon">:</span></span>
              </div>
              <div
                class="content-wrapper"
                :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
                :data-full-text="data[item.field]"
              >{{ data[item.field] }}
              </div>
            </div>
          </div>
        </div>
        <!-- 非医疗病史模式下的footer结构 -->
        <div v-else class="footer-grid">
          <div
            v-for="(item, idx) in config.footer.items"
            :key="item.field || idx"
            class="description-item">
            <div class="label-wrapper">
              <span class="label-text">{{ item.label }}<span v-if="getItemColon(item)" class="colon">:</span></span>
            </div>
            <div
              class="content-wrapper"
              :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
              :data-full-text="data[item.field]"
            >{{ data[item.field] }}
            </div>
          </div>
        </div>
        <!-- 右侧信息：换到下一行并靠右对齐（如 医生 / 医嘱日期） -->
        <div
          v-if="!wrapperClassObject['xhdesc-medical-history'] && Array.isArray(config.footer.rightItems) && config.footer.rightItems.length"
          class="footer-right">
          <div
            v-for="(item, ridx) in config.footer.rightItems"
            :key="item.field || ridx"
            class="footer-right-item">
            <div class="label-wrapper">
              <span class="label-text">{{ item.label }}<span v-if="getItemColon(item)" class="colon">:</span></span>
            </div>
            <div
              class="content-wrapper"
              :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
              :data-full-text="data[item.field]"
            >{{ data[item.field] }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getConfigByName, runLogic } from '@vue2-client/services/api/common'

export default {
  name: 'XHDescriptions',
  data () {
    return {
      hiddenConfig: '-1^',
      data: null,
      rawData: null,
      config: null,
      showAllItems: false,
      maleIcon: require('@vue2-client/assets/svg/male.svg')
    }
  },
  props: {
    queryParamsName: {
      type: String,
      default: ''
    },
    parameter: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    wrapperClassObject () {
      const attrs = this.$attrs || {}
      const classes = {}

      const booleanStyleKeys = [
        'description',
        'no-padding',
        'medical-history',
        'patient-style',
        'margin-top-12',
        'padding-left15',
        'line-height30',
        'report-mode',
        'border1',
        'grid-formatted'
      ]
      booleanStyleKeys.forEach(key => {
        const val = attrs[key]
        const truthy = val === true || val === '' || val === 'true'
        if (truthy) classes[`xhdesc-${key}`] = true
      })
      const size = attrs.size
      if (size && typeof size === 'string') classes[`xhdesc-size-${size}`] = true
      if (this.showAllItems && this.config && this.config.detailsConfig) classes['xhdesc-open'] = true
      return classes
    },
    detailsAfterIndex () {
      return (this.config && this.config.detailsConfig && this.config.detailsConfig.showAfterIndex) || 999
    },
    hasMoreItems () {
      if (!(this.config && this.config.detailsConfig)) return false
      if (!this.data || !(this.config && this.config.items) || !Array.isArray(this.config.items)) return false
      const hiddenStartIndex = this.detailsAfterIndex || 0
      if (hiddenStartIndex >= this.config.items.length) return false
      for (let i = hiddenStartIndex; i < this.config.items.length; i++) {
        const item = this.config.items[i]
        if (item && item.field && this.data[item.field] !== null && this.data[item.field] !== undefined) {
          return true
        }
      }
      return false
    },
    visibleItems () {
      if (!(this.config && this.config.items)) return []
      if (!(this.config && this.config.detailsConfig)) return this.config.items
      if (this.showAllItems) return this.config.items.slice(0, this.detailsAfterIndex)
      return this.config.items.slice(0, this.detailsAfterIndex)
    },
    hiddenItems () {
      if (!(this.config && this.config.items)) return []
      if (!(this.config && this.config.detailsConfig)) return []
      return this.config.items.slice(this.detailsAfterIndex)
    },
    visibleItemsFiltered () {
      const list = this.visibleItems || []
      if (!this.data) return []
      // 过滤掉占位符项目，占位符在模板中单独处理
      const res = list.filter(item => {
        // 跳过空字段（占位符）
        if (!item.field || item.field === '') return false
        // 其他字段只有在有数据时才显示
        return this.data[item.field] !== null && this.data[item.field] !== undefined
      })
      if (!this.showAllItems) return res
      const hiddenFields = new Set((this.hiddenItems || []).map(i => i.field))
      return res.filter(item => !hiddenFields.has(item.field))
    },
    hiddenItemsFiltered () {
      const list = this.hiddenItems || []
      if (!this.data) return []
      // 过滤掉占位符项目，占位符在模板中单独处理
      const res = list.filter(item => {
        // 跳过空字段（占位符）
        if (!item.field || item.field === '') return false
        // 其他字段只有在有数据时才显示
        return this.data[item.field] !== null && this.data[item.field] !== undefined
      })
      return res
    },
    // Grid布局的行分组数据
    gridRows () {
      if (!this.config?.items || !Array.isArray(this.config.items)) return []

      const config = this.config || {}
      const layout = config.layout

      // 处理对象格式的layout配置（如 {"xl":5,"md":5,...}）
      if (layout && typeof layout === 'object' && !Array.isArray(layout)) {
        // 检查是否所有断点都是相同的列数
        const columnCounts = Object.values(layout)
        const isUniform = columnCounts.every(count => count === columnCounts[0])
        if (isUniform && columnCounts[0] > 0) {
          const itemsPerRow = columnCounts[0]
          // 根据项目数量创建相应行数，每行按配置列数显示
          const rows = []
          const items = this.config.items

          for (let i = 0; i < items.length; i += itemsPerRow) {
            const rowItems = items.slice(i, i + itemsPerRow)
            rows.push(rowItems)
          }

          return rows
        }
      }

      // 回退到原来的数组格式处理
      if (!Array.isArray(layout) || !this.visibleItemsFiltered) return []

      const items = [...this.visibleItemsFiltered]
      const rows = []
      let currentIndex = 0

      for (let i = 0; i < layout.length; i++) {
        const columnsInRow = layout[i]
        const rowItems = items.slice(currentIndex, currentIndex + columnsInRow)
        rows.push(rowItems)
        currentIndex += columnsInRow
        if (currentIndex >= items.length) break
      }

      return rows
    },
    // 处理分组表格数据：根据接口返回的数组自动生成分类行+数据行
    processedGroupItems () {
      if (!this.data || !Array.isArray(this.data)) {
        return []
      }

      const result = []
      const data = this.data

      // 辅助函数：获取值时兼容大小写和不同字段名
      const getFieldValue = (obj, field) => {
        if (!obj || !field) return undefined
        // 尝试原始字段名
        if (obj[field] !== undefined) return obj[field]
        // 尝试小写字段名
        const lowerField = String(field).toLowerCase()
        if (obj[lowerField] !== undefined) return obj[lowerField]
        // 尝试首字母大写（categoryField vs categoryfield）
        const capitalizeField = lowerField.replace(/^[a-z]/, c => c.toUpperCase())
        if (obj[capitalizeField] !== undefined) return obj[capitalizeField]
        return undefined
      }

      // 追踪最后一个有效的分类值，而不是最后一个item的field
      let lastCategoryValue = null

      data.forEach((item) => {
        // 获取当前项的分类字段值
        const categoryField = getFieldValue(item, 'categoryField') || getFieldValue(item, 'categoryfield') || getFieldValue(item, 'label') || '默认分类'
        const categoryLabel = getFieldValue(item, 'categoryLabel') || getFieldValue(item, 'categorylabel') || categoryField

        // 检查是否需要插入分类行（与最后一个有效分类值比较）
        if (categoryField !== lastCategoryValue) {
          result.push({
            isCategory: true,
            label: categoryLabel,
            field: categoryField,
            _rawData: null
          })
          lastCategoryValue = categoryField
        }

        // 添加数据行
        result.push({
          isCategory: false,
          label: item.label || item.name || '',
          field: item.field || item.name || '',
          count: item.count,
          expiring: item.expiring,
          unit: item.unit,
          _rawData: item
        })
      })

      return result
    },
    // 获取分类字段配置
    getCategoryFields () {
      if (!this.config?.items) return []
      // 从配置中提取 type === 'category' 的项作为分类标记
      return this.config.items
        .filter(item => item.type === 'category')
        .map(item => item.field)
    },
    // 获取分类项配置（用于在没有数据时仍显示分类）
    categoryItems () {
      if (!this.config?.items) return []
      return this.config.items.filter(item => item.type === 'category')
    },
    // 分组表格的列配置
    tableColumns () {
      if (!this.config?.tableColumns) {
        // 默认列配置
        return [
          { label: '分类名称', dataIndex: 'label' },
          { label: '数量', dataIndex: 'count' },
          { label: '即将过期', dataIndex: 'expiring' }
        ]
      }
      return this.config.tableColumns
    }
  },
  created () {
    this.getData(this.queryParamsName, {})
  },
  methods: {
    async getData (data, parameterData) {
      this.data = null
      this.config = null
      this.showAllItems = false
      getConfigByName(data, 'af-his', res => {
        this.config = res
        const hiddenConfig = (this.config && this.config.hiddenConfig) || (0 === 1)
        const parameter = { ...res.parameter, ...this.parameter, ...parameterData }
        runLogic(res.logicName, parameter, 'af-his').then(result => {
          console.log('[XHDescriptions] runLogic result:', result)
          console.log('[XHDescriptions] config.layout:', res.layout, 'expandFlag:', Boolean(res.expandList || res.parseList))
          // 如果配置启用 parseList（或 expandList），将 type=list 的父项展开为父项 + 子项（子项来自 result 中对应的数组）
          const expandFlag = Boolean(res.expandList || res.parseList)
          // 获取实际的数据数组（兼容 { code, data, ... } 格式）
          const actualResult = (result && result.data !== undefined) ? result.data : result
          console.log('[XHDescriptions] actualResult:', actualResult, 'isArray:', Array.isArray(actualResult))
          // 不用展开则直接将结果赋值给augmented
          if(!expandFlag){
            if (hiddenConfig) {
              for (const key in actualResult) {
                if (Object.prototype.hasOwnProperty.call(actualResult, key) && actualResult[key] === this.hiddenConfig) {
                  delete actualResult[key]
                }
              }
            }
            this.data = actualResult
            console.log('[XHDescriptions] set this.data, now this.data is:', this.data, 'isArray:', Array.isArray(this.data))
          }
          console.log('[XHDescriptions] this.data after assignment:', this.data)
          const augmented = {}
          if (expandFlag && Array.isArray(res.items)) {
            // 在 expandFlag && Array.isArray(res.items) 的分支内
            const expandedItems = []
            // 用快照遍历，避免遍历被修改过的 res.items
            const originalItems = Array.isArray(res.items) ? res.items.slice() : []
            originalItems.forEach(parentItem => {
              if (!parentItem) return
              if (parentItem.type === 'list') {
                expandedItems.push(parentItem)
                const arr = actualResult ? actualResult[parentItem.field] : null
                if (Array.isArray(arr)) {
                  augmented[parentItem.field] = ''
                  arr.forEach((sub, idx) => {
                    const childItem = {
                      field: sub.field || `${parentItem.field}_${idx + 1}`,
                      label: sub.label ?? '',
                      colon: sub.colon ? sub.colon : parentItem.colon,
                      style: parentItem.style ? { ...parentItem.style } : undefined,
                      showAvatar: parentItem.showAvatar,
                      unit: parentItem.unit,
                    }
                    if (sub && sub.value !== undefined) augmented[childItem.field] = sub.value
                    expandedItems.push(childItem)
                  })
                }
              } else {
                // 普通项直接加入
                expandedItems.push(parentItem)
              }
            })
            // 不要改原 res，创建新 config
            this.rawData = actualResult
            this.config = { ...res, items: expandedItems }
            this.data = augmented
          }
        })
      })
    },
    toggleDetails () {
      this.showAllItems = !this.showAllItems
    },
    isContentOverflow (content) {
      if (!content || typeof content !== 'string') return false
      return content.length > 150
    },
    // 获取全局 colon 配置
    getGlobalColon () {
      if (this.config && this.config.style && this.config.style.colon !== undefined) {
        return this.config.style.colon
      }
      return true // 默认显示冒号
    },
    // 获取单个 item 的 colon 配置
    getItemColon (item) {
      // 优先级：item配置 > 全局配置 > 默认true
      if (item && item.colon !== undefined) {
        return item.colon
      }
      return this.getGlobalColon()
    },
    // 获取当前grid布局的列数
    getGridColumns () {
      const layout = this.config?.layout
      if (layout && typeof layout === 'object' && !Array.isArray(layout)) {
        const columnCounts = Object.values(layout)
        if (columnCounts.length > 0 && columnCounts.every(count => count === columnCounts[0])) {
          return columnCounts[0]
        }
      }
      return 5 // 默认5列
    },
    // 生成CSS Grid模板列样式
    getGridTemplateColumns (columns) {
      if (typeof columns !== 'number' || columns <= 0) return 'repeat(auto-fit, minmax(200px, 1fr))'
      return `repeat(${columns}, 1fr)`
    },
    // 判断项目是否应该显示（有数据）
    shouldShowItem (item) {
      if (!item.field || item.field === '') return false
      return this.data[item.field] !== null && this.data[item.field] !== undefined
    },
    // 获取分组表格单元格的值
    getCellValue (item, column) {
      if (!item || !column) return ''
      const dataIndex = column.dataIndex || column.field

      // 如果是分类行，只返回 label
      if (item.isCategory) {
        return item.label || ''
      }

      // 数据行：从 _rawData 中获取对应字段（兼容大小写）
      if (item._rawData && typeof item._rawData === 'object') {
        // 尝试原始字段名
        if (item._rawData[dataIndex] !== undefined) return item._rawData[dataIndex]
        // 尝试小写字段名
        const lowerDataIndex = dataIndex.toLowerCase()
        if (item._rawData[lowerDataIndex] !== undefined) return item._rawData[lowerDataIndex]
      }

      return ''
    },
    // 截断文本，超过指定长度显示省略号
    truncateText (text, maxLength) {
      if (!text || typeof text !== 'string') return text || ''
      if (text.length <= maxLength) return text
      return text.substring(0, maxLength) + '...'
    },
    // 处理单元格点击事件
    handleCellClick (column, rowItem) {
      if (!column || !column.event) return
      // 获取事件名称
      const eventName = column.event
      // 获取行原始数据
      const rowData = rowItem._rawData || rowItem
      // 检查父组件是否注册了对应的事件监听器（与 XButtons 一致）
      if (this.$listeners[eventName]) {
        // 传递当前行数据给父组件
        this.$emit(eventName, rowData)
      } else {
        // 未实现事件函数时的提示（与 XButtons 一致）
        console.warn(`[XHDescriptions] 已触发单元格，事件名 [${eventName}]，但父组件未实现事件函数`)
      }
    },
    // 获取单元格样式类名
    getCellClass (column) {
      if (!column) return ''
      const classes = []
      // 如果配置了 event 属性，添加可点击样式
      if (column.event) {
        classes.push('clickable-cell')
      }
      return classes
    }
  },
  watch: {
    queryParamsName: {
      handler (newValue) {
        console.log('[XHDescriptions] watch queryParamsName changed:', newValue)
        this.getData(newValue, {})
      },
      deep: true
    },
    parameter: {
      handler (newValue, oldValue) {
        console.log('[XHDescriptions] watch parameter changed:', { old: oldValue, new: newValue })
        this.getData(this.queryParamsName, {})
      },
      deep: true
    }
  }
}
</script>

<style scoped lang="less">
.patient-info-descriptions {
  background: #fff;
  border-radius: 4px;
  width: 100%;
}

.descriptions-container {
  position: relative;
  width: 100%;
  padding-right: 80px; /* 为按钮预留空间 */
}

/* 自适应布局样式 */
.flex-descriptions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  width: 100%;
}

/* Grid布局样式 */
.grid-descriptions {
  width: 100%;
}

.grid-row {
  display: grid;
  gap: 16px 24px;
  width: 100%;
  margin-bottom: 16px;
}

.grid-row:last-child {
  margin-bottom: 0;
}

.grid-item {
  display: flex;
  align-items: flex-start;
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.3s;
  min-width: 0; /* 允许内容收缩 */
  min-height: 40px; /* 确保行高一致 */
}

.grid-item:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

/* 占位符项目样式 */
.placeholder-item {
  background-color: transparent !important;
}

.placeholder-item:hover {
  background-color: transparent !important;
}

.placeholder-item {
  /* 占位符项目保持布局空间 */
  min-height: 32px;
  width: fit-content;
  margin-right: 24px;
  margin-bottom: 16px;
}

.placeholder-content {
  /* 占位符内容为空，不显示任何内容 */
  min-height: 20px; /* 较小的高度，避免视觉突兀 */
  visibility: hidden; /* 完全隐藏内容 */
}

/* Grid布局冒号样式 */
.colon {
  margin: 0;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
}

.description-item {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.3s;
  white-space: nowrap;
  flex: 0 1 auto;
}

.description-item:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

/* 共用样式 */
.label-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(0, 0, 0, 0.65);
  font-size: v-bind('(config && config.style && config.style.fontSize) || "14px"');
  white-space: nowrap;
}

.label-text {
  white-space: nowrap;
  color: #313131;
  text-decoration: none !important;
}

.list-label-text{
  font-weight: bold;
}

.content-wrapper {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  font-size: v-bind('(config && config.style && config.style.fontSize) || "14px"');
  color: rgba(0, 0, 0, 0.85);
  text-decoration: none !important;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 强制移除任何链接样式 */
::v-deep a {
  color: #313131 !important;
  text-decoration: none !important;
}

.detail-button-wrapper {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
  padding: 4px 8px;
  white-space: nowrap;
  background-color: #fff;
}

/* 底部区域：分割线 + 三列内容 */
.xhdesc-footer {
  margin-top: 12px;
}

.xhdesc-divider {
  width: calc(100% + 24px);
  height: 0;
  border-bottom: 1px solid #E5E9F0;
  margin: 10px -12px 14px;
  overflow: hidden;
}

/* medical-history 模式：左 padding 11px，右 12px */
.patient-info-descriptions.xhdesc-medical-history .xhdesc-divider {
  width: calc(100% + 23px);
  margin-left: -11px;
  margin-right: -12px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr; // 单列
  gap: 8px 24px; // 与上方描述项间距保持一致
  align-items: start; // 左上对齐
}

.footer-right {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
}

.footer-right-item {
  display: inline-flex;
  align-items: center;
}

/* Ant Design 描述列表样式覆盖 */
::v-deep(.ant-descriptions-row) {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

::v-deep(.ant-descriptions-item) {
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important; /* 拉伸对齐，确保子项高度一致 */
  flex-direction: row !important;
  margin-right: 24px;
  width: fit-content !important;
  margin-bottom: 16px;
  height: 32px !important; /* 固定高度 */
}

::v-deep(.ant-descriptions-item-container) {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  position: relative;
  gap: 0 !important;
  width: 100% !important;
}

::v-deep(.ant-descriptions-item-label) {
  color: rgba(0, 0, 0, 0.65) !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: v-bind('(config && config.style && config.style.fontSize) || "14px"') !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  white-space: nowrap !important;
  min-width: v-bind('(config && config.style && config.style.labelWidth) || "80px"') !important;
  min-height: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  padding-right: 2px !important;
}

::v-deep(.ant-descriptions-item-content) {
  font-size: v-bind('(config && config.style && config.style.fontSize) || "14px"') !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 100% !important; /* 占满父容器高度 */
  padding: 0 !important;
  margin: 0 !important;
  margin-left: 0px !important;
}

/* 移除冒号的默认间距 */
::v-deep(.ant-descriptions-item-colon) {
  margin: 0 !important;
  padding: 0 4px 0 0 !important;
}


::v-deep(.ant-descriptions-item-container:hover) {
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: 4px;
}

::v-deep(.ant-btn-link) {
  padding: 0;
  height: auto;
  line-height: 1;
}

/* 隐藏占位符项目的冒号 */
::v-deep(.ant-descriptions-item.placeholder-item .ant-descriptions-item-colon) {
  display: none !important;
}



::v-deep(.ant-btn-link:hover) {
  color: #1890ff;
  background: transparent;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .content-wrapper {
    max-width: 200px;
  }
}

@media screen and (max-width: 576px) {
  .content-wrapper {
    max-width: 150px;
  }
  .flex-descriptions {
    gap: 4px 12px;
  }
}

/* 添加虚线样式 */
.with-divider {
  position: relative;
  margin-bottom: 16px !important;
}

.with-divider::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
}

/* 对于 Ant Design 描述列表的特殊处理 */
::v-deep(.ant-descriptions-item.with-divider) {
  position: relative;
  margin-bottom: 16px !important;
}

::v-deep(.ant-descriptions-item.with-divider::after) {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
}

/* 加边框 */
.xhdesc-description {
  padding: 4px 4px 4px 4px;

  &.patient-info-descriptions,
  .patient-info-descriptions {
    border: 1px solid #E5E9F0;
    border-radius: 6px;
    padding: 6.5px 12px;

    ::v-deep .ant-btn-link {
      border: none;
    }

    ::v-deep .ant-descriptions-item-content {
      font-weight: bold;
    }
  }
}
/* 病患信息样式开关：patient-style */
.xhdesc-patient-style {
  min-height: 41px;
  border-radius: 6px;
  opacity: 1;
  background: #FFFFFF;
  box-sizing: border-box;
  border: 0px solid #E5E9F0;
  padding-bottom: 0px !important;
  width: 100%;
  overflow: hidden;

  &.patient-info-descriptions,
  .patient-info-descriptions {
    border: 0px solid #E5E9F0;
    border-radius: 6px;
    background: #FFFFFF;
    min-height: 41px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px 12px;

    ::v-deep .label-wrapper .label-text {
      font-family: "Source Han Sans";
      font-size: 16px !important;
      font-weight: 400 !important;
      line-height: 23px !important;
      letter-spacing: 0em;
      font-feature-settings: "kern" on;
      color: #5D5C5C;
      white-space: nowrap;
    }

    ::v-deep .label-wrapper.with-avatar {
      gap: 9px;
    }

    .gender-icon {
      margin-top: 2px;
    }
    .gender-img {
      width: 20px;
      height: 20px;
      opacity: 1;
      display: inline-block;
    }

    ::v-deep .detail-button-wrapper .ant-btn .anticon {
      margin-left: 4px;
      color: #94979E;
      opacity: 1;
    }

    ::v-deep .detail-button-wrapper .ant-btn,
    ::v-deep .detail-button-wrapper .ant-btn span {
      font-family: "Source Han Sans";
      font-size: 16px;
      color: #5D5C5C;
      white-space: nowrap;
    }

    ::v-deep .ant-descriptions-item-content,
    ::v-deep .content-wrapper,
    .medical-history-text {
      font-family: "Source Han Sans";
      font-size: 16px !important;
      font-weight: 700;
      line-height: 23px !important;
      letter-spacing: 0em;
      font-feature-settings: "kern" on;
      color: #5D5C5C;
      word-break: break-word;
    }

    ::v-deep .ant-descriptions-item {
      padding-bottom: 4px;
      display: flex;
      align-items: center;
      min-height: 32px;
    }

    @media (max-width: 768px) {
      padding: 6px 8px;

      ::v-deep .ant-descriptions-item {
        flex-basis: 50%; /* 在小屏幕上每行显示两项 */
      }

      ::v-deep .label-wrapper .label-text,
      ::v-deep .ant-descriptions-item-content {
        font-size: 14px !important;
      }
    }
  }
}

/* 展开态：patient-style 自适应高度 */
.xhdesc-patient-style.xhdesc-open,
.xhdesc-open .patient-info-descriptions.xhdesc-patient-style,
.xhdesc-open .xhdesc-patient-style .patient-info-descriptions {
  height: auto;
}
.xhdesc-patient-style.xhdesc-open .patient-info-descriptions,
.xhdesc-open .patient-info-descriptions.xhdesc-patient-style,
.xhdesc-open .xhdesc-patient-style .patient-info-descriptions {
  align-items: flex-start;
}
// 去除住院收费页面两个描述列表之间的间距
.xhdesc-margin-top-12 {
  margin-top: -12px;
}
.xhdesc-no-padding {
  padding: 0px;
  &.patient-info-descriptions,
  .patient-info-descriptions {
    ::v-deep .descriptions-container {
      padding: 0px;
    }
    ::v-deep .content-wrapper {
      margin: 0px;
    }
  }
}
// 库存管理左侧边距
.xhdesc-padding-left15{
  padding-left: 15px;
}
// 库存管理左侧字体样式
.xhdesc-line-height30{
  &.patient-info-descriptions,
  .patient-info-descriptions{
    ::v-deep .ant-descriptions-item{
      margin-bottom: 0px
    }
    ::v-deep .content-wrapper{
      line-height: 30px;
    }
    ::v-deep .ant-descriptions-item-label{
      line-height: 30px;
    }
    ::v-deep .content-wrapper{
      color: #0057FE;
      font-weight: 700
    }
  }
}
/* 医疗病史模式：自定义HTML结构样式 */
.medical-history-descriptions {
  width: 100%;
}

.medical-history-item {
  margin: 0;
  width: 100%;
}

.medical-history-item.with-divider {
  position: relative;
  padding-bottom: 4px;
  margin-bottom: 4px;
}

.medical-history-item.with-divider::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.medical-history-content {
  font-family: "Source Han Sans";
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0em;
  text-align: left;
  word-break: break-word;
  white-space: normal;
  text-indent: 0;
  padding-left: 0;
  margin-left: 0;
  overflow: hidden;
  position: relative;
}

.medical-history-label {
  font-family: "Source Han Sans";
  font-size: 16px;
  font-weight: 700;
  color: #313131;
  white-space: nowrap;
  float: left;
  margin-right: 0px;
  position: relative;
  z-index: 1;
}

.medical-history-text {
  font-family: "Source Han Sans";
  font-size: 16px;
  font-weight: 400;
  color: #313131;
  display: block;
  overflow: hidden;
  text-indent: 0;
  padding-left: 0;
  margin-left: 0;
  word-break: break-word;
  white-space: normal;
  text-align: left;
  line-height: 24px;
  margin-top: 0;
  margin-bottom: 0;
}

.medical-history-text.ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  word-break: break-word;
  white-space: normal;
  line-height: 24px;
  text-indent: 0;
  padding-left: 0;
  margin-left: 0;
  text-align: left;
  -webkit-box-pack: start;
  -webkit-box-align: start;
}

.medical-history-text.ellipsis::after {
  display: none;
}

.medical-history-text.ellipsis::first-line {
  text-indent: 0;
}

@supports not (-webkit-line-clamp: 3) {
  .medical-history-text.ellipsis {
    display: block;
    max-height: 72px;
    overflow: hidden;
    position: relative;
  }

  .medical-history-text.ellipsis::after {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
    background: #fff;
    padding-left: 4px;
    display: block;
  }
}

/* 医疗病史样式开关 */
.patient-info-descriptions.xhdesc-medical-history {
  padding: 9px 12px 10px 11px !important;
  .descriptions-container {
    padding-right: 0;
    padding-left: 0px;
  }
  .medical-history-footer {
    width: 100%;
  }
  .medical-history-footer .footer-right {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
  }
  .medical-history-footer .footer-right .label-wrapper .label-text {
    font-family: "Source Han Sans";
    font-size: 16px;
    font-weight: 700;
    color: #313131;
    line-height: 22px;
  }
  .medical-history-footer .footer-right .content-wrapper {
    font-family: "Source Han Sans";
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    color: #313131;
  }

  .medical-history-footer .footer-right .medical-history-item {
    display: inline-block;
    text-align: right;
  }

  .medical-history-footer .footer-right .medical-history-content {
    text-align: right;
  }

  .medical-history-footer .footer-right .medical-history-label {
    float: none;
    display: inline;
    margin-right: 0px;
  }

  .medical-history-footer .footer-right .medical-history-text {
    display: inline;
    text-align: right;
  }

  .medical-history-footer .footer-right .medical-history-text.ellipsis {
    display: inline;
    text-align: right;
  }
}

/* 加边框 */
.xhdesc-border1 {
  &.patient-info-descriptions,
  .patient-info-descriptions {
    border: 1px solid #E5E9F0;
    border-radius: 6px;
  }
}

.xhdesc-grid-formatted {
  &.patient-info-descriptions,
  .patient-info-descriptions {
    ::v-deep .label-wrapper .label-text {
      height: 23px;
      opacity: 1;
      font-family: "Source Han Sans";
      font-size: 16px;
      font-weight: normal;
      line-height: normal;
      letter-spacing: 0em;
      color: #313131;
    }

    ::v-deep .content-wrapper,
    ::v-deep .ant-descriptions-item-content {
      height: 23px;
      opacity: 1;
      font-family: "Source Han Sans";
      font-size: 16px;
      font-weight: bold;
      line-height: normal;
      letter-spacing: 0em;
      color: #313131;
    }
  }
}

.xhdesc-report-mode {
  &.patient-info-descriptions,
  .patient-info-descriptions {
    ::v-deep .flex-descriptions{
      gap: 2px;
      .description-item {
        min-width: 175px;
        border-radius: 0px;
        display: inline-block;
        padding: 10px;
        border: 1px solid #E5E9F0;
        .content-wrapper {
          margin-left: 0px;
          width: 100%;
          margin-top: 14px;
          display: flex; justify-content: space-between;
        }
      }
    }
    ::v-deep .report-value {
      font-weight: bold;
      color: #0057FE;
    }
    ::v-deep .report-unit {
      font-weight: bold;
      text-align: end;
    }
  }
}

/* 分组表格模式样式 */
.group-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.group-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;

  // 表头样式：右对齐、加粗、无背景色、无边框
  thead tr th {
    height: 30px;
    opacity: 1;
    padding: 0 8px;
    font-family: "Source Han Sans";
    font-size: 16px;
    font-weight: 700;
    line-height: 30px;
    text-align: right;
    letter-spacing: 0em;
    background: transparent;
    border: none;
    color: #313131;
    white-space: nowrap;
  }

  // 数据行单元格样式
  tbody tr td {
    height: 30px;
    padding: 0 8px;
    font-family: "Source Han Sans";
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    text-align: right;
    letter-spacing: 0em;
    background: transparent;
    border: none;
    color: #313131;
    white-space: nowrap;
  }

  // 分类行样式：无背景色、无边框、加粗
  .category-row td {
    position: relative;
    font-weight: 700;
    text-align: left;
    width: 50%;
    padding-left: 32px; // 为实心圆装饰留出空间
  }

  // 分类行前面的实心圆装饰
  .category-row .category-name {
    position: relative;
    display: block;
    padding-left: 24px;
    line-height: 30px;
    vertical-align: middle;
    height: 30px;
  }

  .category-row .category-name::before {
    content: '';
    position: absolute;
    left: 8px;
    top: calc(50% - 2px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3362DA;
  }

  .category-row .category-name .ant-tooltip {
    display: block;
  }

  // 标签列（左对齐）
  .data-row .item-value:first-child {
    text-align: left;
    width: 50%;
  }

  // 数量列：加粗
  .data-row .item-number {
    font-weight: 700;
  }

  // 即将过期列：蓝色加粗
  .data-row .item-expiring {
    color: #0057FE;
    font-weight: 700;
  }

  // 可点击单元格样式
  .data-row .clickable-cell {
    cursor: pointer;
    color: #0057FE;
    font-weight: 700;

    &:hover {
      background-color: rgba(51, 98, 218, 0.08);
      border-radius: 2px;
    }
  }

  // 空状态
  .empty-row td {
    text-align: center;
    color: #999;
    padding: 24px 8px;
  }

  // 截断文本样式
  .truncate-text {
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }
}
</style>
