<template>
  <div class="x-collapse-wrapper" :class="wrapperClassObject">
    <div class="collapse-content-wrapper" :class="{ 'with-pagination': shouldShowPagination }">
      <a-collapse
        :activeKey="activeKey"
        @change="handleChange"
        :bordered="config.bordered || true"
        :expand-icon-position="config.expandIconPosition || 'right'"
        :style="config.style || ''"
      >
        <a-collapse-panel
          v-for="(panel, panelIndex) in pagedPanels"
          :key="panelIndex.toString()"
          :show-arrow="config.showArrow || false"
          :disabled="config.collapsible">
          <template #header>
            <div class="header-content">
              <!-- 新增蓝色圆点图标，根据配置显示 -->
              <div
                v-if="config.showCircleIcon"
                class="blue-circle-icon"
                :style="config.circleIconStyle || {}"></div>
              <span
                class="header-text"
                :style="config.titleStyle">
                {{ getPanelTitle(panel) }}
              </span>
              <!-- 当有 title2 数据时显示信息项 -->
              <template v-if="panel.title2 && panel.title2.length">
                <span
                  v-for="(item, headerIndex) in panel.title2"
                  :key="`panel-${panelIndex}-title2-${headerIndex}`"
                  class="info-item"
                  :style="config.title2Style">
                  <!-- 根据showTitle是否显示键名 -->
                  <span v-if="item.showTitle">{{ item.key }}：</span>
                  <span>{{ item.value }}</span>
                </span>
              </template>
              <!-- 当有 title3 数据时显示时间项（与 title2 一致：支持数组/单项） -->
              <template v-if="panel.title3 && Array.isArray(panel.title3) && panel.title3.length">
                <span
                  v-for="(item, t3Index) in panel.title3"
                  :key="`panel-${panelIndex}-title3-${t3Index}`"
                  :class="['time-item', { 'time-first': t3Index === 0 }]"
                  :style="config.title3Style">
                  <span v-if="item.showTitle">{{ item.key }}:</span>
                  <span>{{ item.value }}</span>
                </span>
              </template>
              <span
                v-else-if="panel.title3"
                class="time-item time-first"
                :style="config.title3Style">
                {{ panel.title3 }}
              </span>
              <!-- 修改搜索框的显示条件 -->
              <a-input-search
                v-if="panel.search"
                v-model="searchText[panelIndex]"
                :placeholder="panel.searchPlace"
                class="search-input"
                @search="(value) => onSearch(value, panelIndex)"
                @click.stop/>
            </div>
          </template>

          <!-- 新增设置图标，根据配置显示 -->
          <template #extra v-if="config.showSettingIcon">
            <a-icon
              v-if="activeKey.includes(panelIndex.toString())"
              :type="config.settingIconType || 'setting'"
              class="setting-icon"
              @click.stop="handleSettingClick(panel, panelIndex)"/>
          </template>

          <!-- 根据类型显示不同内容 -->
          <template v-if="panel.type === 'picture'">
            <img :src="panel.configName" alt="图片" style="width: 100%; max-width: 500px;"/>
          </template>
          <template v-else-if="['x-image-report','x-form-table','x-simple-table','x-add-native-form','x-tree-pro', 'x-his-editor', 'x-tab', 'x-form-group', 'x-report', 'x-buttons', 'x-label-select', 'x-conversation', 'x-check-list', 'x-cardSet', 'x-collapse','x-h-descriptions', 'x-sidebar', 'x-list','x-input','x-time-line', 'x-radio', 'x-text-card','x-tree-rows'].includes(panel.type)">
            <component
              :is="getComponentName(panel.type)"
              :ref="`dynamicComponent_${ panel.type }_${ panelIndex }`"
              :serverName="panel.serverName || 'af-his'"
              :queryParamsName="panel.configName"
              :parameter="panel.parameter"
              :countVisible="false"
              :env="env"
              :style="config.componentStyle || ''"
              v-bind="panel.attrs || {}"
              :class="panel.className"
              :ipanelIndex="panelIndex"
              @deleteData="deleteData"
              @add="add"
              @listClick="listClick"
              @click="click"
              @component-mounted="handleMounted"
              @search-complete="handleSearchComplete" />
          </template>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <div v-if="shouldShowPagination" class="xcollapse-pagination">
      <div class="pagination-extras">
        <a-button-group size="small">
          <a-button icon="vertical-right" :disabled="paginationCurrent === 1" @click="goFirstPage"/>
          <a-pagination
            :current="paginationCurrent"
            :pageSize="paginationPageSize"
            :total="paginationTotal"
            :showSizeChanger="false"
            show-less-items
            @change="onPageChange"/>
          <a-button icon="vertical-left" :disabled="paginationCurrent === maxPage" @click="goLastPage"/>
        </a-button-group>
        <span class="pagination-info">共 {{ maxPage }} 页， {{ paginationTotal }} 条</span>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: 'XCollapse',
  components: {
    XFormTable: () => import('@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'),
    XAddNativeForm: () => import('@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'),
    XFormGroup: () => import('@vue2-client/base-client/components/common/XFormGroup/XFormGroup.vue'),
    XTreePro: () => import('@vue2-client/base-client/components/common/XTree/XTreePro.vue'),
    XHisEditor: () => import('@vue2-client/base-client/components/his/XHisEditor/XHisEditor.vue'),
    XTab: () => import('@vue2-client/base-client/components/common/XTab/XTab.vue'),
    XReport: () => import('@vue2-client/base-client/components/common/XReport/XReport.vue'),
    XButtons: () => import('@vue2-client/base-client/components/common/XButtons/XButtons.vue'),
    XLabelSelect: () => import('@vue2-client/base-client/components/common/XLabelSelect/XLabelSelect.vue'),
    XConversation: () => import('@vue2-client/base-client/components/common/XConversation/XConversation.vue'),
    XCheckList: () => import('@vue2-client/base-client/components/common/XCheckList/XCheckList.vue'),
    XCardSet: () => import('@vue2-client/base-client/components/common/XCardSet/XCardSet.vue'),
    XCollapse: () => import('@vue2-client/base-client/components/common/XCollapse/XCollapse.vue'),
    XHDescriptions: () => import('@vue2-client/base-client/components/his/XHDescriptions/XHDescriptions.vue'),
    XImageReport: () => import('@vue2-client/base-client/components/his/XImageReport/XImageReport.vue'),
    XSidebar: () => import('@vue2-client/base-client/components/his/XSidebar/XSidebar.vue'),
    XList: () => import('@vue2-client/base-client/components/his/XList/XList.vue'),
    XInput: () => import('@vue2-client/base-client/components/common/XInput/XInput.vue'),
    XTimeLine: () => import('@vue2-client/base-client/components/common/XTimeline/XTimeline.vue'),
    XRadio: () => import('@vue2-client/base-client/components/his/XRadio/XRadio.vue'),
    XTextCard: () => import('@vue2-client/base-client/components/his/XTextCard/XTextCard.vue'),
    XTreeRows: () => import('@vue2-client/base-client/components/his/XTreeRows/XTreeRows.vue'),
    XSimpleTable: () => import('@vue2-client/base-client/components/his/XSimpleTable/XSimpleTable.vue')
  },
  data () {
    return {
      activeKey: [],
      config: {},
      configName: '',
      searchText: {},
      sonInstances: [], // 存储子组件实例
      paginationCurrent: 1,
      paginationPageSize: 5,
      lastParams: {}, // 缓存最近一次非分页参数
      paginationTotal: 0, // 后端返回的 total（仅分页模式使用）
    }
  },
  props: {
    // 环境
    env: {
      type: String,
      default: 'prod'
    },
    // json名
    queryParamsName: {
      type: [String, Object],
      default: null
    },
    parameter: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  created () {
    this.getData(this.queryParamsName, this.parameter)
  },
  beforeDestroy () {},
  computed: {
    // 基于 $attrs 的样式类开关（与 XHDescriptions.vue 思路一致）
    wrapperClassObject () {
      const attrs = this.$attrs || {}
      const classes = {}
      const booleanStyleKeys = [
        'style1',
        'check-result',
        'medical-entry'
      ]
      booleanStyleKeys.forEach(key => {
        const val = attrs[key]
        const truthy = val === true || val === '' || val === 'true'
        if (truthy) classes[`xcollapse-${key}`] = true
      })
      const size = attrs.size
      if (size && typeof size === 'string') classes[`xcollapse-size-${size}`] = true
      if (this.shouldShowPagination) classes['with-pagination'] = true
      return classes
    },
    enablePagination () { return !!this.config?.pagination },
    shouldShowPagination () { return this.enablePagination },
    maxPage () {
      const size = Number(this.paginationPageSize || 1)
      const total = this.paginationTotal
      return Math.max(1, Math.ceil(total / size))
    },
    pagedPanels () {
      const showData = this.config?.showData || []
      if (this.enablePagination) return showData
      const start = (this.paginationCurrent - 1) * this.paginationPageSize
      const end = start + this.paginationPageSize
      return showData.slice(start, end)
    }
  },
  methods: {
    handleMounted (instance) {
      this.sonInstances.push(instance)
    },
    handleSearchComplete ({ hasMatch, panelIndex }) {
      if (hasMatch && !this.activeKey.includes(panelIndex.toString())) {
        // 只展开包含搜索结果的面板
        this.activeKey = [panelIndex.toString()]
      }
    },
    getComponentName (componentName) {
      return componentName
    },
    getPanelTitle (panel) {
      // 兼容数据为纯对象数组（无 title 字段）时的显示
      if (panel && panel.title) return panel.title
      if (panel && panel.name) return panel.name
      if (panel && panel.code) return panel.code
      return ''
    },
    add (data) {
      this.$emit('add', data)
    },
    deleteData (data) {
      this.$emit('deleteData', data)
    },
    listClick (data) {
      this.$emit('listClick', data)
    },
    click (data) {
      this.$emit('click', data)
    },
    getConfigByName (componentName) {
      const refKey = `dynamicComponent_${componentName}`
      return this.$refs[refKey]
    },
    // xTreeRow 组件搜素功能
    searchTreeRows (title) {
      this.$nextTick(() => {
        const instances = this.sonInstances
        instances.forEach(comp => {
          try {
            comp.searchTitleToggle?.(title)
          } catch (e) {
            console.error('调用失败:', e)
          }
        })
      })
    },
    async getData (config, parameter) {
      this.configName = config
      getConfigByName(config, 'af-his', res => {
        // 合并配置，保留已有的 pagination 等开关
        const original = this.config || {}
        this.config = { ...original, ...res }
        // 同步分页初值（仅当配置里提供时）
        const p = this.config?.pagination || null
        if (p && p.pageSize) this.paginationPageSize = Number(p.pageSize)
        // 只在初始化时设置默认页码，避免每次重置
        if (p && p.current && this.paginationCurrent === 1) {
          this.paginationCurrent = Number(p.current)
        }

        // 组合请求参数，启用分页时传递页码与页大小
        const baseParams = (parameter && Object.keys(parameter).length ? parameter : this.lastParams) || {}
        this.lastParams = { ...baseParams }
        const requestParams = { ...baseParams }
        if (this.enablePagination) {
          requestParams.page = this.paginationCurrent
          requestParams.pageSize = this.paginationPageSize
        }

        runLogic(res.mainLogic, requestParams, 'af-his').then(result => {
          let showData = []
          let totalCount = 0

          if (this.enablePagination) {
            // 启用分页：后端固定返回 { total, data: [], page, pageSize }
            showData = result.data
            this.paginationTotal = Number(result.total) || 0
            totalCount = this.paginationTotal
          } else {
            // 未启用分页：直接取数组
            showData = Array.isArray(result && result.data) ? result.data : (Array.isArray(result) ? result : [])
            totalCount = showData.length
          }

          // 赋值
          this.$set(this.config, 'showData', showData)
          this.$set(this.config, 'totalCount', Number(totalCount))

          // 后端分页边界保护：当前页超界时回退到最后一页并重拉
          if (this.enablePagination) {
            const total = Number(this.config.totalCount || 0)
            const size = Number(this.paginationPageSize || 1)
            const maxPage = Math.max(1, Math.ceil(total / size))
            if (this.paginationCurrent > maxPage) {
              this.paginationCurrent = maxPage
              this.getData(this.queryParamsName, this.parameter)
              return
            }
          }

          // 更具timeType更改时间类型
          if (this.config.timeType && this.config.timeType === '.') {
            this.config.showData.forEach(panel => {
              // if (panel.title3) {
              //   panel.title3 = this.convertToCustomFormat(panel.title3)
              // }
            })
            this.$forceUpdate()
          }
          // 根据配置决定是否展开面板
          const shouldCollapseAll = this.config.collapseAllByDefault || false
          if (shouldCollapseAll) {
            // 如果配置为默认关闭，直接设置为空数组，避免展开动画
            this.activeKey = []
          } else {
            // 默认展开当前页的所有面板
            this.activeKey = (this.config.showData || []).map((_, i) => i.toString())
          }
        })
      })
    },
    onPageChange (page) {
      this.paginationCurrent = page
      // 后端分页：重新拉数；前端分页：仅切片
      this.getData(this.queryParamsName, this.lastParams)
    },
    goFirstPage () {
      if (this.paginationCurrent === 1) return
      this.onPageChange(1)
    },
    goLastPage () {
      if (this.paginationCurrent === this.maxPage) return
      this.onPageChange(this.maxPage)
    },
    refreshXCollapse () {
      this.getData(this.queryParamsName, this.parameter)
    },
    convertToCustomFormat (dateString) {
      // 创建一个新的 Date 对象
      const date = new Date(dateString)
      // 获取年、月、日
      const year = date.getFullYear()
      const month = date.getMonth() + 1 // 月份从0开始，所以需要加1
      const day = date.getDate()
      // 返回格式化后的字符串
      return `${year}.${month}.${day}`
    },
    handleChange (keys) {
      this.activeKey = keys
      // console.log(this.activeKey)
    },
    onSearch (value, panelIndex) {
      this.$emit('searchChange', { value: value, panelIndex: panelIndex })
    },
    handleSettingClick (panel, panelIndex) {
      this.$emit('settingClick', { panel, panelIndex })
    }
  },
  watch: {
    queryParamsName: {
      handler (newValue) {
        this.getData(newValue, this.parameter)
      },
      deep: true
    }
  }
}
</script>

<style scoped lang="less">
.x-collapse-wrapper { position: relative; display: flex; flex-direction: column; min-height: 100%; height: 100%; }
.collapse-content-wrapper { flex: 1; min-height: 0; overflow: auto; position: relative; max-height: 78vh; }
.collapse-content-wrapper.with-pagination { padding-bottom: 0px; }
.header-content {
  display: flex;
  align-items: center;
  justify-content: flex-start; // 左对齐，避免圆点被拉开
  gap: 8px; // 圆点与标题的基础间距
  white-space: nowrap;
  overflow: hidden;
  flex: 1; // 占满可用宽度，便于空间分配
}

.header-text {
  margin-right: 14.17px;
  font-size: 16px;
  font-weight: 800;
  flex-shrink: 0;
}

.info-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #888888;
  flex-shrink: 0;
}

.time-item {
  margin-left: 12px;
  text-align: right;
  flex-shrink: 0;
}

:deep(.ant-collapse-header) {
  display: flex;
  position: relative;
  // border-bottom: v-bind('config.showLine ? "1px solid #000000" : "none"');
  align-items: center !important;
  background-color: #ffffff;
  padding: 12px 16px !important; /* 确保头部有足够的内边距 */
}

:deep(.ant-collapse-header-text) {
  flex: 1;
}

:deep(.ant-collapse-content > .ant-collapse-content-box) {
  padding: 16px !important; /* 确保内容区域有足够的内边距 */
}

.search-input {
  margin-left: 12px;
  width: auto;
  max-width: 40%;
}

// 右侧块定位：首个 info-item 或 time-item 推到右侧
.header-content .info-item:first-of-type { margin-left: auto; }
.header-content .time-item:first-of-type { margin-left: auto; }

// 右侧块内部兄弟间距统一
.info-item + .info-item { margin-left: 12px; }
:deep(.ant-collapse-item-disabled > .ant-collapse-header) {
  cursor: default !important;
}

/* 新增样式 */
.blue-circle-icon {
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background: #3362DA;
  margin-top: 15px;
  margin-left: 11px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.setting-icon {
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19.47px;
  height: 20px;
  line-height: 20px;
  vertical-align: middle;
  color: #313131; /* 仅设置图标颜色，不设置背景 */
  margin-top: 0; /* 去除向上偏移 */
  margin-right: 47px; /* 与下拉箭头保持 20px 距离 */
}

:deep(.ant-collapse-extra) {
  display: flex !important;
  align-items: center;
}

.configurable-area {
  //padding: 16px;
  min-height: 100px;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  background-color: #fafafa;
}

.empty-hint {
  color: #999;
  text-align: center;
  margin: 20px 0;
}

.loading-message {
  text-align: center;
  padding: 20px;
  color: #666;
  background: #f5f5f5;
  border-radius: 4px;
  margin: 10px 0;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  background: #fafafa;
  border-radius: 4px;
  margin: 10px 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 分页组件：固定在组件容器底部（不影响全局布局） */
.with-pagination { padding-bottom: 0; }
.xcollapse-pagination { /* 二盒子：自然流布局，不覆盖内容 */
  position: static;
  display: flex;
  justify-content: center;
  padding: 12px 0;
  background: #fff;
  border-top: 1px solid #f0f0f0;
}
.pagination-extras { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pagination-extras .ant-btn-group { gap: 8px; }
.pagination-extras .ant-btn-group + .pagination-info { margin-left: 9px; }
.pagination-info {
  color: #5D5C5C;
  font-family: 'Source Han Sans', sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: normal;
  letter-spacing: 0em;
  font-feature-settings: "kern" on;
}

/* 自定义分页按钮样式 */
:deep(.pagination-extras .ant-btn) {
  font-family: 'Source Han Sans', sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: normal;
  letter-spacing: 0em;
  font-feature-settings: "kern" on;
  color: #5D5C5C;
  border-radius: 4px;
  border: 1px solid #D8D8D8;
  background: #FFFFFF;
  box-sizing: border-box;
  margin-right: 8px;
}

:deep(.pagination-extras .ant-btn:last-child) {
  margin-right: 0;
}

/* 直达首页末页按钮样式 */
:deep(.pagination-extras .ant-btn[icon="vertical-left"]),
:deep(.pagination-extras .ant-btn[icon="vertical-right"]) {
  position: static; /* 使用常规流布局，避免遮挡分页主体 */
  width: 24px;
  height: 24px;
  border-radius: 4px;
  opacity: 1;
  background: #FFFFFF;
  box-sizing: border-box;
  border: 1px solid #D8D8D8;
  margin-right: 8px;
}

/* 上一页下一页按钮样式 */
:deep(.ant-pagination .ant-pagination-prev),
:deep(.ant-pagination .ant-pagination-next) {
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 4px;
  opacity: 1;
  background: #FFFFFF;
  box-sizing: border-box;
  border: 1px solid #D8D8D8;
}

/* 页码选择按钮样式 */
:deep(.ant-pagination .ant-pagination-item) {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid #D8D8D8;
  background: #FFFFFF;
  box-sizing: border-box;
  font-family: 'Source Han Sans', sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: normal;
  letter-spacing: 0em;
  font-feature-settings: "kern" on;
  color: #5D5C5C;
  margin-right: 8px;
}

:deep(.ant-pagination .ant-pagination-item:last-child) {
  margin-right: 0;
}

/* 当前页码样式 */
:deep(.ant-pagination .ant-pagination-item-active) {
  background: #0057FE !important;
  border: 1px solid #1890ff;
  color: #FFFFFF !important;
}

/* 确保选中页码文字颜色生效 */
:deep(.ant-pagination .ant-pagination-item-active a) {
  color: #FFFFFF !important;
}

/* 禁用状态样式 */
:deep(.pagination-extras .ant-btn:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 移除所有可能导致截断的固定高度 */
:deep(.ant-collapse-item) .ant-collapse-content .ant-collapse-content-box > * {
  max-height: none !important; /* 移除可能的最大高度限制 */
  height: auto !important; /* 使用自动高度 */
}

// 基于根容器类进行样式整合：x-collapse-wrapper.xcollapse-style1
.x-collapse-wrapper {
  // 检查结果样式
  &.xcollapse-check-result {
    height: auto; /* 允许根据内容自适应高度，避免滚动被限制 */
    min-height: 600px;
    // 让每个面板成为独立卡片：去掉 antd 默认的分隔线，增加间距与圆角
    :deep(.ant-collapse) {
      background: transparent;
      border: 0;
    }

    :deep(.ant-collapse > .ant-collapse-item) {
      width: 555px;
      min-height: auto;
      height: auto;
      margin-bottom:10px;
      background: #FFFFFF;         // 独立白底
      box-sizing: border-box;
      border: 1px solid #E5E9F0;   // 每个面板自身边框
    }

    :deep(.ant-collapse > .ant-collapse-item:first-child) { margin-top: 0; }
    :deep(.ant-collapse > .ant-collapse-item:last-child) { margin-bottom: 0; }

    :deep(.ant-collapse-content > .ant-collapse-content-box) {
      background: #FFFFFF;
      padding: 0px !important;
    }

    // 表头：恢复合适的上下内边距，去掉顶部额外空白
    :deep(.ant-collapse-header) {
      background: #FFFFFF;
      padding: 0px 0px !important;
      height: 39px !important;
      border-bottom: none !important; // 移除标题处下边线，避免与外边框连为一体
      border: 1px solid #E5E9F0;   // 每个面板自身边框
    }

    /* 将右侧留白转移到标题与第一项之间 */
    .header-content { padding-right: 0px; gap: 5px; }
    .header-content .info-item:first-of-type { margin-left: 24px !important; }
    .header-content .time-item:first-of-type { margin-left: 24px !important; }

    .info-item {
      height: 20px;
      opacity: 1;
      font-family: "Source Han Sans";
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      text-align: right;
      letter-spacing: 0em;
      font-feature-settings: "kern" on;
      color: #313131 !important;
    }

    .header-text {
      height: 23px;
      opacity: 1;
      font-family: "Source Han Sans";
      font-size: 16px;
      font-weight: 700;
      line-height: 23px;
      letter-spacing: 0em;
      padding-right: 40px;
      font-feature-settings: "kern" on;
      color: #313131 !important;
    }
  }
  // 历史病历样式
  &.xcollapse-style1 {
    height: auto; /* 允许根据内容自适应高度，避免滚动被限制 */
    min-height: 600px;
    .header-text {
      font-family: "Source Han Sans";
      font-size: 16px;
      font-weight: 700;
      line-height: 23px;
      letter-spacing: 0em;
      color: #313131;
      margin-top: 8px;
      margin-bottom: 8px;
      margin-right: 0 !important;
    }

    .info-item {
      font-family: "Source Han Sans";
      font-size: 16px;
      font-weight: 700;
      line-height: 23px;
      text-align: right;
      color: #313131;
      margin-top: 9px;
      margin-bottom: 7px;
      margin-left: 28.14px;
      letter-spacing: 0em
    }

    .time-item {
      font-family: "Source Han Sans";
      font-size: 16px;
      font-weight: 400;
      line-height: 23px;
      text-align: right;
      margin-top: 9px;
      margin-bottom: 7px;
      color: #313131;
      letter-spacing: 0em;
    }

    // 让每个面板成为独立卡片：去掉 antd 默认的分隔线，增加间距与圆角
    :deep(.ant-collapse) {
      background: transparent;
      border: 0;
    }

    :deep(.ant-collapse > .ant-collapse-item) {
      width: 555px;
      min-height: auto;
      height: auto;
      margin-bottom:10px;
      background: #FFFFFF;         // 独立白底
      box-sizing: border-box;
      border: 1px solid #E5E9F0;   // 每个面板自身边框
    }

    :deep(.ant-collapse > .ant-collapse-item:first-child) { margin-top: 0; }
    :deep(.ant-collapse > .ant-collapse-item:last-child) { margin-bottom: 0; }

    :deep(.ant-collapse-content > .ant-collapse-content-box) {
      background: #FFFFFF;
      padding: 0px !important;
    }

    // 表头：恢复合适的上下内边距，去掉顶部额外空白
    :deep(.ant-collapse-header) {
      background: #FFFFFF;
      padding: 0px 0px !important;
      height: 41px !important;
      border-bottom: none !important; // 移除标题处下边线，避免与外边框连为一体
      border: 1px solid #E5E9F0;   // 每个面板自身边框
    }
  }

  // 医学词条样式
  &.xcollapse-medical-entry {
    height: auto;
    min-height: 600px;
    :deep(.ant-collapse) { background: transparent; border: 0; }
    :deep(.ant-collapse > .ant-collapse-item) {
      width: 564px;
      min-height: auto;
      height: auto;
      margin-bottom: 14px;
      background: #FFFFFF;
      box-sizing: border-box;
      border: 1px solid #E5E9F0;
    }
    :deep(.ant-collapse > .ant-collapse-item:first-child) { margin-top: 0; }
    :deep(.ant-collapse > .ant-collapse-item:last-child) { margin-bottom: 0; }
    :deep(.ant-collapse-content > .ant-collapse-content-box) { background: #FFFFFF; padding: 0px !important; }
    :deep(.ant-collapse-header) {
      background: #FFFFFF;
      padding: 0px 0px !important;
      height: 39px !important;
      border-bottom: none !important;
      border: 1px solid #E5E9F0;
    }
    .header-text {
      font-family: "Source Han Sans";
      font-size: 16px;
      font-weight: 700;
      line-height: 23px;
      letter-spacing: 0em;
      color: #313131;
      margin-top: 7px;
      margin-bottom: 7px;
      margin-right: 0 !important;
    }
  }
}
</style>
