<template>
  <div
    ref="drawerRoot"
    class="drawer"
    :class="[{ 'drawer-collapsed': !isOpen }, wrapperClassObject()]"
    :style="drawerStyle">
    <div
      v-show="!isFrameConfig || showToggleInFrame"
      class="drawer-toggle"
      :class="{ 'toggle-collapsed': !isOpen }"
      :style="toggleButtonStyle"
      @click="toggleDrawer">
      <div class="arrow">
        {{ isOpen ? '›' : '‹' }}
      </div>
    </div>
    <div class="drawer-content" v-show="isOpen" :style="contentStyle">
      <x-report
        ref="x_report"
        :configName="queryParamsName"
        :server-name="serverName"
        :show-img-in-cell="true"
        :display-only="true"
        :edit-mode="false"
        :show-save-button="false"
        :no-padding="true"
        :dont-format="true">
      </x-report>
    </div>
  </div>
</template>

<script>

import XReport from '@vue2-client/base-client/components/common/XReportGrid'
import { shortcutManager } from '@vue2-client/base-client/utils/shortcutManager'

export default {
  components: {
    XReport
  },
  name: 'XSidebar',
  inject: {
    getGridScopePath: { default: null }
  },
  props: {
    // 配置参数
    queryParamsName: {
      type: String,
      default: ''
    },
    serverName: {
      type: String,
      default: 'af-his'
    },
    // Frame 配置下是否依然显示收缩按钮（默认为 false，保持兼容老用法）
    showToggleInFrame: {
      type: Boolean,
      default: false
    },
    // 是否允许该组件主动调整同级布局（默认不影响其它页面）
    affectLayout: {
      type: Boolean,
      default: false
    },
    // 展开时所占宽度百分比（percent模式使用，影响父级 ant-col 的 flex 与 max-width）
    expandedWidthPercent: {
      type: Number,
      default: 33.3
    },
    // 收缩时所占宽度百分比（percent模式使用）
    collapsedWidthPercent: {
      type: Number,
      default: 2
    },
    // 展开时所占宽度像素值（px模式使用）
    expandedWidth: {
      type: Number,
      default: 602
    },
    // 收缩时所占宽度像素值（px模式使用）
    collapsedWidth: {
      type: Number,
      default: 26
    },
    // 总宽度像素值（px模式使用）
    totalWidth: {
      type: Number,
      default: 1638
    },
    // 宽度计算模式：'percent' 百分比模式，'px' 像素模式
    // 使用示例：
    // percent模式: <x-sidebar :width-mode="'percent'" :expanded-width-percent="40" :collapsed-width-percent="3" />
    // px模式: <x-sidebar :width-mode="'px'" :expanded-width="500" :collapsed-width="30" />
    widthMode: {
      type: String,
      default: 'percent',
      validator: value => ['percent', 'px'].includes(value)
    },
    // 折叠时保持的行高（px），由外部传入
    rowHeight: {
      type: Number,
      default: null
    }
  },
  data () {
    return {
      isOpen: this.queryParamsName?.endsWith('Frame') || false,
      // 定义主内容区域的最大和最小宽度百分比
      mainWithData: [{ max: 80, min: 50 }],
      rowResizeObserver: null,
      drawerResizeObserver: null,
      syncDrawerMinHeightRafId: null,
      // 记录所在 a-row 有史以来出现过的最大高度，只增不减，展开/收起基准统一
      maxRowHeight: null,
      // 记录抽屉自身高度，用于按钮居中
      drawerHeight: null
    }
  },
  computed: {
    isFrameConfig () {
      return this.queryParamsName?.endsWith('Frame') || false
    },
    sidebarSnapshotKey () {
      const routePath = this.$route?.path || 'default'
      let parentPath = ''
      if (typeof this.getGridScopePath === 'function') {
        parentPath = this.getGridScopePath()
      }
      const myFullPath = parentPath
        ? `${parentPath}/${this.queryParamsName}`
        : this.queryParamsName
      return `sidebar:${routePath}::${myFullPath}`
    },
    drawerStyle () {
      const isPx = this.widthMode === 'px'
      const base = !this.isOpen
        ? isPx
          ? { width: `${this.collapsedWidth}px` }
          : { width: `${this.collapsedWidthPercent}%` }
        : isPx
          ? { width: `${this.expandedWidth}px`, display: 'flex', flexDirection: 'row', alignItems: 'stretch' }
          : { width: `${this.expandedWidthPercent}%`, display: 'flex', flexDirection: 'row', alignItems: 'stretch' }
      if (this.rowHeight) {
        base['--sidebar-row-height'] = this.rowHeight + 'px'
      }
      return base
    },
    contentStyle () {
      const isPx = this.widthMode === 'px'
      if (!this.isOpen) return { display: 'none' }
      if (isPx) {
        const contentWidth = Math.max(0, (this.expandedWidth || 0) - (this.collapsedWidth || 0))
        return { width: `${contentWidth}px`, flex: '1 1 auto', overflow: 'hidden' }
      }
      const contentPercent = Math.max(0, (this.expandedWidthPercent || 0) - (this.collapsedWidthPercent || 0))
      return { width: `${contentPercent}%`, flex: '1 1 auto', overflow: 'hidden' }
    },
    toggleButtonStyle () {
      const isPx = this.widthMode === 'px'
      const width = isPx ? `${this.collapsedWidth}px` : `${this.collapsedWidthPercent}%`
      // 优先用外部传入的 rowHeight，否则用内部计算的行高
      const rowH = this.rowHeight || this.maxRowHeight
      const top = rowH ? `${rowH / 2 - 24}px` : '50%'
      return { width, top }
    }
  },
  mounted () {
    console.log('[XSidebar] mounted, isOpen:', this.isOpen, 'queryParamsName:', this.queryParamsName)
    // 在挂载后调整父元素宽度（方法内部已区分是否影响布局）
    this.updateLayout(this.isOpen)
    // 如果抽屉初始状态为打开，设置padding
    if (this.isOpen) {
      this.updateCardBodyPadding()
      this.activateSidebarScope()
    } else {
      // 折叠状态：延迟停用，等内层组件注册完成
      this.scheduleDeactivateSidebarScope()
    }
    // 同步计算一次最大行高（此时 this.$el 已挂载，computed 属性立即响应，按钮 top 立即就位）
    this.computeMaxRowHeight()
    this.$nextTick(() => {
      this.bindRowResizeObserver()
      this.bindDrawerResizeObserver()
    })
  },
  beforeDestroy () {
    if (this._deactivateRetryTimer) {
      clearTimeout(this._deactivateRetryTimer)
      this._deactivateRetryTimer = null
    }
    if (this.syncDrawerMinHeightRafId) {
      cancelAnimationFrame(this.syncDrawerMinHeightRafId)
      this.syncDrawerMinHeightRafId = null
    }
    this.unbindRowResizeObserver()
    this.unbindDrawerResizeObserver()
    this.deactivateSidebarScope()
  },
  methods: {
    // ========== 作用域管理 ==========
    activateSidebarScope () {
      if (!shortcutManager.isEnabled) return
      const snapshot = shortcutManager.routeStateSnapshots.get(this.sidebarSnapshotKey)
      if (snapshot?.tabStates?.size > 0) {
        // 只恢复之前是激活状态的侧边栏内部作用域
        snapshot.tabStates.forEach((wasActive, scopeId) => {
          if (wasActive) {
            shortcutManager.scopeActive.set(scopeId, true)
          }
        })
        shortcutManager.routeStateSnapshots.delete(this.sidebarSnapshotKey)
      }
    },
    scheduleDeactivateSidebarScope (retryCount = 0) {
      const maxRetries = 20   // 增加到 20 次（2 秒）
      const retryDelay = 100

      this.$nextTick(() => {
        if (this.isOpen) return

        // 先尝试停用
        this.deactivateSidebarScope()

        if (retryCount < maxRetries) {
          // ✅ 关键修改：不管 hasActiveChildScope 是什么，都继续重试
          // 目的：等待内部组件完成注册
          this._deactivateRetryTimer = setTimeout(() => {
            this._deactivateRetryTimer = null
            this.scheduleDeactivateSidebarScope(retryCount + 1)
          }, retryDelay)
        }
      })
    },
    deactivateSidebarScope () {
      if (!shortcutManager.isEnabled) return

      let parentPath = ''
      if (typeof this.getGridScopePath === 'function') {
        parentPath = this.getGridScopePath()
      }
      const routePath = this.$route?.path || 'default'
      const myFullPath = parentPath
        ? `${parentPath}/${this.queryParamsName}`
        : this.queryParamsName
      const sidebarPrefix = `${routePath}::${myFullPath}/`

      // 只收集侧边栏内部的作用域
      const sidebarScopes = new Map()
      shortcutManager.scopeActive.forEach((active, scopeId) => {
        if (scopeId.startsWith(sidebarPrefix)) {
          sidebarScopes.set(scopeId, active)
        }
      })

      // 没有内部作用域，跳过
      if (sidebarScopes.size === 0) return

      // 检查是否有激活的
      let hasActive = false
      sidebarScopes.forEach((active) => {
        if (active) hasActive = true
      })
      if (!hasActive) return

      // 保存快照
      shortcutManager.routeStateSnapshots.set(this.sidebarSnapshotKey, {
        tabStates: new Map(sidebarScopes),
        lastAccess: Date.now()
      })

      // 只停用侧边栏内部的
      sidebarScopes.forEach((_, scopeId) => {
        shortcutManager.setScopeActive(scopeId, false)
      })
    },
    toggleDrawer () {
      // 展开前读一次行高（此时仍为展开状态），更新最大高度记录，确保收起后基准正确
      if (!this.isOpen) {
        const row = this.getSidebarParentRow()
        if (row) {
          const h = Math.round(row.offsetHeight || row.getBoundingClientRect().height)
          if (h > 0) {
            if (this.maxRowHeight === null || h > this.maxRowHeight) {
              this.maxRowHeight = h
            }
          }
        }
      }
      const wasOpen = this.isOpen
      this.isOpen = !this.isOpen
      this.$emit('on-drawer-change', this.isOpen)
      this.updateLayout(this.isOpen)

      if (this.isOpen && !wasOpen) {
        this.activateSidebarScope()
      } else if (!this.isOpen && wasOpen) {
        this.deactivateSidebarScope()
      }

      if (this.isOpen) {
        // 展开后行高可能微增，读一次最新值（只增不减）
        this.syncDrawerMinHeightToParentRow()
        this.$nextTick(() => {
          this.updateCardBodyPadding()
        })
      }
    },
    getSidebarParentRow () {
      if (!this.$el) return null
      let currentCol = this.$el.parentNode
      while (
        currentCol &&
        (!currentCol.className ||
          !currentCol.className.includes ||
          !currentCol.className.includes('ant-col'))
        ) {
        currentCol = currentCol.parentNode
      }
      if (!currentCol || !currentCol.parentNode) return null
      const row = currentCol.parentNode
      if (!row.className || !row.className.includes('ant-row')) return null
      return row
    },
    // 展开/收起共用同一套参照：用 CSS 变量记录行高，箭头始终相对于该值居中，
    // 不走 CSS transition，彻底避免 min-height 动画化导致的"缓慢下移"问题
    scheduleSyncDrawerMinHeight () {
      if (this.syncDrawerMinHeightRafId) return
      this.syncDrawerMinHeightRafId = requestAnimationFrame(() => {
        this.syncDrawerMinHeightRafId = null
        this.syncDrawerMinHeightToParentRow()
      })
    },
    // 同步读取行高并更新 maxRowHeight，供 mounted 在渲染前调用
    computeMaxRowHeight () {
      const root = this.$refs.drawerRoot
      if (!root) return
      const row = this.getSidebarParentRow()
      if (!row) return
      const raw = row.offsetHeight || row.getBoundingClientRect().height
      const h = Math.round(raw)
      if (h > 0 && (this.maxRowHeight === null || h > this.maxRowHeight)) {
        this.maxRowHeight = h
      }
    },
    syncDrawerMinHeightToParentRow () {
      this.$nextTick(() => {
        const root = this.$refs.drawerRoot
        if (!root) return
        const row = this.getSidebarParentRow()
        if (!row) return
        const raw = row.offsetHeight || row.getBoundingClientRect().height
        const h = Math.round(raw)
        if (h <= 0) return
        // 只增不减：记录有史以来出现过的最大行高，作为收起后的定位基准
        if (this.maxRowHeight === null || h > this.maxRowHeight) {
          this.maxRowHeight = h
        }
        if (!this.rowResizeObserver && typeof ResizeObserver !== 'undefined') {
          this.rowResizeObserver = new ResizeObserver(() => {
            this.scheduleSyncDrawerMinHeight()
          })
          this.rowResizeObserver.observe(row)
        }
      })
    },
    bindRowResizeObserver () {
      if (typeof ResizeObserver === 'undefined') return
      this.unbindRowResizeObserver()
      const row = this.getSidebarParentRow()
      if (!row) return
      this.rowResizeObserver = new ResizeObserver(() => {
        this.scheduleSyncDrawerMinHeight()
      })
      this.rowResizeObserver.observe(row)
    },
    unbindRowResizeObserver () {
      if (this.rowResizeObserver) {
        this.rowResizeObserver.disconnect()
        this.rowResizeObserver = null
      }
    },
    bindDrawerResizeObserver () {
      if (typeof ResizeObserver === 'undefined') return
      this.unbindDrawerResizeObserver()
      const root = this.$refs.drawerRoot
      if (!root) return
      this.drawerResizeObserver = new ResizeObserver(() => {
        this.updateDrawerHeight()
      })
      this.drawerResizeObserver.observe(root)
    },
    unbindDrawerResizeObserver () {
      if (this.drawerResizeObserver) {
        this.drawerResizeObserver.disconnect()
        this.drawerResizeObserver = null
      }
    },
    updateDrawerHeight () {
      const root = this.$refs.drawerRoot
      if (!root) return
      const h = root.offsetHeight || root.getBoundingClientRect().height
      if (h > 0) {
        this.drawerHeight = Math.round(h)
      }
    },
    // 通用的样式保护方法
    protectElementStyles (element, stylesToProtect = ['padding', 'padding-left', 'padding-right', 'padding-top', 'padding-bottom', 'margin', 'background-color', 'color', 'font-size', 'border']) {
      const protectedStyles = {}

      // 保存需要保护的样式
      stylesToProtect.forEach(style => {
        const value = element.style.getPropertyValue(style)
        if (value) {
          protectedStyles[style] = value
        }
      })

      return protectedStyles
    },

    // 恢复保护的样式
    restoreElementStyles (element, protectedStyles) {
      Object.entries(protectedStyles).forEach(([property, value]) => {
        if (value) {
          element.style.setProperty(property, value, 'important')
        }
      })
    },

    // 安全地设置布局样式，保护其他样式
    safeSetLayoutStyles (element, layoutStyles) {
      // 保护所有可能的样式配置
      const protectedStyles = this.protectElementStyles(element)

      // 设置布局样式
      Object.entries(layoutStyles).forEach(([property, value]) => {
        // 将驼峰命名转换为CSS标准命名
        const cssProperty = property.replace(/([A-Z])/g, '-$1').toLowerCase()
        element.style.setProperty(cssProperty, value)
      })

      // 恢复保护的样式
      this.restoreElementStyles(element, protectedStyles)
    },
    wrapperClassObject () {
      const attrs = this.$attrs || {}
      const classes = {}
      const booleanStyleKeys = ['']
      booleanStyleKeys.forEach(key => {
        const val = attrs[key]
        const truthy = val === true || val === '' || val === 'true'
        if (truthy) classes[`x-sidebar-${key}`] = true
      })
      return classes
    },
    // 更新card-body的padding
    updateCardBodyPadding () {
      // widthMode 为空时才需要处理
      if (!this.widthMode) { return }
      this.$nextTick(() => {
        const cardBody = this.$el.querySelector('.ant-card-body')
        if (cardBody) {
          cardBody.style.padding = '0px'
        } else {
          // 如果找不到元素，可能需要等待XReport完全渲染
          setTimeout(() => {
            const cardBody = this.$el.querySelector('.ant-card-body')
            if (cardBody) {
              cardBody.style.padding = '0px'
            }
          }, 500)
        }
      })
    },
    // 获取同级的其他所有a-col元素
    getSiblingCols (className) {
      try {
        // 找到当前组件所在的a-col
        let currentCol = this.$el.parentNode
        while (currentCol && !currentCol.className.includes('ant-col')) {
          currentCol = currentCol.parentNode
        }
        if (!currentCol) {
          console.warn('当前组件不在a-col内')
          return []
        }
        // 找到a-col的父元素(a-row)
        const row = currentCol.parentNode
        if (!row || !row.className.includes('ant-row')) {
          console.warn('未找到父级a-row元素')
          return []
        }

        // 如果没有指定 className，则返回该行下所有的 a-col 同级元素
        const allCols = Array.from(row.children).filter(child => {
          const isCol = child.className && child.className.includes && child.className.includes('ant-col')
          if (!isCol) return false
          if (!className) return true
          return child.className.includes(className)
        })

        // 过滤掉当前a-col，返回其他所有a-col
        return allCols.filter(col => col !== currentCol)
      } catch (error) {
        console.error('获取同级a-col时出错:', error)
        return []
      }
    },
    // 在同一行中查找距离当前侧边栏最近的内容列（从右往左找第一个 a-col）
    findNearestContentCol (otherCols, currentCol) {
      if (!otherCols || otherCols.length === 0 || !currentCol || !currentCol.parentNode) {
        return null
      }
      let prev = currentCol.previousSibling
      while (prev) {
        if (otherCols.includes(prev)) {
          return prev
        }
        prev = prev.previousSibling
      }
      // 如果没找到明显靠近的，就兜底返回第一个同级列
      return otherCols[0] || null
    },
    // 计算mainCol,currentCol可以设置的总宽度
    computeRemainingWidth (allElements, mainCol, currentCol) {
      if (!allElements || allElements.length === 0) {
        return '0px'
      }

      // 排除 mainCol 和 currentCol
      const filteredElements = allElements.filter(element =>
        element !== mainCol && element !== currentCol
      )

      let totalWidth = 0

      // 计算过滤后元素的总宽度（包括外边距）
      filteredElements.forEach(element => {
        if (element && element.style) {
          const computedStyle = window.getComputedStyle(element)
          const width = parseFloat(computedStyle.width) || 0
          const marginLeft = parseFloat(computedStyle.marginLeft) || 0
          const marginRight = parseFloat(computedStyle.marginRight) || 0
          totalWidth += width + marginLeft + marginRight
        }
      })

      // 添加 mainCol 和 currentCol 的左右外边距
      const addMarginsFromElements = (element) => {
        if (element && element.style) {
          const computedStyle = window.getComputedStyle(element)
          const marginLeft = parseFloat(computedStyle.marginLeft) || 0
          const marginRight = parseFloat(computedStyle.marginRight) || 0
          totalWidth += marginLeft + marginRight
        }
      }

      addMarginsFromElements(mainCol)
      addMarginsFromElements(currentCol)

      return totalWidth > 0 ? `${totalWidth}px` : '0px'
    },
    updateLayout (isOpen) {
      this.$nextTick(() => {
        try {
          // 获取当前行内所有与侧边栏同级的 a-col 列
          const otherCols = this.getSiblingCols()
          if (otherCols.length > 0) {
            let currentCol = this.$el.parentNode
            while (currentCol && !currentCol.className.includes('ant-col')) {
              currentCol = currentCol.parentNode
            }
            if (currentCol) {
              const triggerResize = () => {
                this.$nextTick(() => {
                  const tabComponent = this.$el.querySelector('.ant-tabs')
                  if (tabComponent) {
                    tabComponent.style.width = '100%'
                    window.dispatchEvent(new Event('resize'))
                  }
                })
              }

              if (isOpen) {
                if (this.affectLayout) {
                  if (this.widthMode === 'px') {
                    const drawerWidth = this.expandedWidth || 602
                    // 使用安全的方式设置布局样式
                    this.safeSetLayoutStyles(currentCol, {
                      flex: `0 0 ${drawerWidth}px`,
                      maxWidth: `${drawerWidth}px`,
                      transition: 'all 0.3s'
                    })
                    const mainCol = this.findNearestContentCol(otherCols, currentCol)
                    if (mainCol) {
                      const remainingWidth = this.computeRemainingWidth(this.getSiblingCols(), mainCol, currentCol)

                      // 使用安全的方式设置布局样式
                      this.safeSetLayoutStyles(mainCol, {
                        flex: '1 1 auto',
                        maxWidth: `calc(100% - ${remainingWidth} - ${drawerWidth}px)`,
                        transition: 'all 0.3s'
                      })
                    }
                  } else {
                    const drawerWidth = (this.expandedWidthPercent || 33.3)
                    // 使用安全的方式设置布局样式
                    this.safeSetLayoutStyles(currentCol, {
                      flex: `0 0 ${drawerWidth}%`,
                      maxWidth: `${drawerWidth}%`,
                      transition: 'all 0.3s'
                    })
                    const mainCol = this.findNearestContentCol(otherCols, currentCol)
                    if (mainCol) {
                      const remainingWidth = this.computeRemainingWidth(this.getSiblingCols(), mainCol, currentCol)

                      // 使用安全的方式设置布局样式
                      this.safeSetLayoutStyles(mainCol, {
                        flex: `0 0 calc(100% - ${remainingWidth} - ${drawerWidth}%)`,
                        maxWidth: `calc(100% - ${remainingWidth} - ${drawerWidth}%)`,
                        transition: 'all 0.3s'
                      })
                    }
                  }
                } else {
                  // 恢复默认：只移除我们设置的属性
                  currentCol.style.removeProperty('flex')
                  currentCol.style.removeProperty('max-width')
                  const mainCol = this.findNearestContentCol(otherCols, currentCol)
                  if (mainCol) {
                    mainCol.style.removeProperty('flex')
                    mainCol.style.removeProperty('max-width')
                  }
                }
                triggerResize()
              } else {
                // 收缩状态
                const width = this.widthMode === 'px' ? this.collapsedWidth + 'px' : this.collapsedWidthPercent + '%'
                // 使用安全的方式设置布局样式
                this.safeSetLayoutStyles(currentCol, {
                  flex: '0 0 ' + width,
                  maxWidth: width,
                  transition: 'all 0.3s'
                })
                const mainCol = this.findNearestContentCol(otherCols, currentCol)
                if (mainCol) {
                  const remainingWidth = this.computeRemainingWidth(this.getSiblingCols(), mainCol, currentCol)

                  // 使用安全的方式设置布局样式
                  this.safeSetLayoutStyles(mainCol, {
                    flex: '1 1 auto',
                    maxWidth: `calc(100% - ${remainingWidth} - ${width})`,
                    transition: 'all 0.3s'
                  })
                }
                triggerResize()
              }
            }
          }
        } catch (error) {
          console.error('布局更新失败:', error)
        }
        this.syncDrawerMinHeightToParentRow()
      })
    }
  },
  watch: {
    queryParamsName: {
      immediate: true,
      handler (newVal) {
        if (newVal?.endsWith('Frame')) {
          this.isOpen = true
          // 确保布局更新
          this.$nextTick(() => {
            this.updateLayout(true)
            this.updateCardBodyPadding()
            this.syncDrawerMinHeightToParentRow()
            this.activateSidebarScope()
          })
        }
      }
    }
  }
}
</script>

<style scoped>
.drawer {
  position: relative;
  height: 100%;
  min-height: 100%;
  width: 100%;
  background-color: #fff;
  border-left: solid rgba(240, 242, 245) 2px;
  /* 明确列出需要过渡的属性，min-height 和 height 永远不走过渡，避免箭头"慢慢下移" */
  transition: width 0.3s ease, background-color 0.3s ease, border-color 0.3s ease,
  box-shadow 0.3s ease, border-radius 0.3s ease;
  border-radius: 10px;
}
/* 折叠时保持高度 */
.drawer-collapsed {
  width: 26px;
  box-shadow: none;
  height: var(--sidebar-row-height, 100px) !important;
  min-height: var(--sidebar-row-height, 100px);
}
/* 展开时高度由内容撑开，但最小高度用同一变量保持箭头位置一致 */
.drawer:not(.drawer-collapsed) {
  min-height: var(--sidebar-row-height, 100px);
}
.drawer-toggle {
  position: absolute;
  left: 0;
  width: 26px;
  height: 48px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
/* 打开状态：箭头在抽屉内 */
.drawer:not(.drawer-collapsed) .drawer-toggle {
  left: 0;
  border-radius: 0;
  box-shadow: none;
}
/* 关闭状态：箭头在抽屉内 */
.drawer-collapsed .drawer-toggle {
  left: 0;
  border-radius: 0;
  box-shadow: none;
}
.arrow {
  font-size: 20px;
  line-height: 1;
  color: #94979E;
}
.drawer-content {
  height: 100%;
  padding-right: 12px;
  margin-left: 26px;
}
</style>
