<template>
  <!-- 表格公共组件 -->
  <div>
    <!-- 表单搜索 -->
    <el-card v-show="showSearch" class="search-card">
      <el-form :inline="true" ref="queryFormRef" :rules="formRules" :model="queryParams" label-width="auto">
        <el-form-item :key="v" :prop="item.f_model" v-for="(item, v) in formLabel"
                      :label="item.isShow ? item.f_label : ''">
          <el-input clearable :maxlength="item.f_max || 50" v-if="item.f_type === 'ipt'"
                    v-model.trim="queryParams[item.f_model]" :placeholder="`请输入${item.f_label}`"
                    :style="{ width: item.f_width || '180px' }" />
          <el-select clearable filterable v-if="item.f_type === 'sel'" v-model="queryParams[item.f_model]"
                     :placeholder="`请选择${item.f_label}`" :style="{ width: item.f_width || '180px' }">
            <el-option :key="v" :label="sel.label" :value="sel.value" v-for="(sel, v) in item.f_selList" />
          </el-select>
          <el-cascader clearable style="width: 180px" :show-all-levels="false" :props="item.optionProps"
                       :options="item.f_selList" v-if="item.f_type === 'selCasAdd'" v-model="queryParams[item.f_model]"
                       @change="
                            handleCasAdd(
                                $event,
                                item.f_model,
                                cascadeFunc,
                                extraTableProp,
                            )
                            " />
          <el-cascader style="width: 180px" :show-all-levels="false" :options="item.f_selList"
                       :props="item.optionProps" v-if="item.f_type === 'selCas'" v-model="queryParams[item.f_model]"
                       @change="handleCas($event, item.f_model)" />
          <el-date-picker type="date" style="width: 240px" value-format="yyyy-MM-dd"
                          v-if="item.f_type === 'date'" v-model="queryParams[item.f_model]"
                          :placeholder="`请选择${item.f_label}`" />
          <el-date-picker type="daterange" style="width: 240px" range-separator="至" value-format="yyyy-MM-dd"
                          start-placeholder="开始日期" end-placeholder="结束日期" v-if="item.f_type === 'dateRange'"
                          v-model="queryParams[item.f_model]" @change="onChangeTime($event, item.dateType)"
                          :picker-options="pickerOptions" />
          <el-input-number :min="0" style="width: 240px" v-if="item.f_type === 'num'"
                           v-model="queryParams[item.f_model]" />
        </el-form-item>
        <!-- 自定义搜索插槽：父组件可自行插入 el-form-item -->
        <slot name="form" :queryParams="queryParams"></slot>
        <el-form-item v-if="showBtnCrews">
          <el-button v-if="showQueryButtons" class="query-btn" @click="handleQuery">
            查询
          </el-button>
          <el-button v-if="showQueryButtons" class="reset-btn" @click="resetQuery">
            重置
          </el-button>

          <slot name="btn" :queryParams="queryParams"></slot>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 按钮集群 -->
    <el-row class="btn-container">
      <ToolbarModel v-if="showRightTools" :columns="columnCheckList" @queryTable="getTableList"
                    :showSearch.sync="showSearch" :handleShow.sync="handleShow" :indexNumShow.sync="indexNumShow"
                    :selectionShow.sync="selectionShow" :isSelectShow="isSelectShow" :showOperation="showOperation" />
    </el-row>

    <!-- 表格 -->
    <el-card class="table-card" :style="isShowtableCardStyle ? tableCardStyle : ''">
      <!-- 表格头部插槽 -->
      <div class="table-header" v-if="$slots.tableTitle || $slots.tableActions">
        <div class="table-title">
          <slot name="tableTitle"></slot>
        </div>
        <div class="table-actions">
          <slot name="tableActions"></slot>
        </div>
      </div>

      <!-- 表格容器，添加最大高度和滚动 -->
      <div class="table-container" :style="tableContainerStyle">
        <el-table ref="tableRef" :data="tableList" style="width: 100%" :max-height="computedTableMaxHeight"
                  v-loading="loading" select-on-indeterminate @selection-change="handleSelectionChange"
                  @current-change="handleCurrentChange" highlight-current-row>
          <el-table-column width="45" align="center" type="selection" :selectable="selectable"
                           v-if="selectionShow && isSelectShow" />
          <el-table-column width="45" align="center" label="" v-if="isRadioShow">
            <template slot-scope="scope">
              <el-radio
                :label="getRowUniqueId(scope.row, scope.$index)"
                v-model="currentRowId"
                :disabled="isRadioDisabled(scope.row)"
                @change="handleRadioChange(scope.row, scope.$index)"
              >
                <span></span>
              </el-radio>
            </template>
          </el-table-column>
          <el-table-column fixed width="55" label="序号" type="index" align="center" :index="(index) =>
                            (queryParams.pageNum - 1) *
                            queryParams.pageSize +
                            index +
                            1
                        " v-if="indexNumShow" />
          <el-table-column :key="v" align="center" :label="item.t_label" :prop="item.t_props"
                           :width="item.t_width" show-overflow-tooltip v-for="(item, v) in tableColumCheckProps">
            <template slot-scope="scope">
              <!-- 判断当前列数据是否需要使用插槽的数据 -->
              <template v-if="item.t_slot">
                <slot :data="scope.row" :name="item.t_slot"></slot>
              </template>
              <template v-else>
                {{ scope.row[item.t_props] || '-' }}
              </template>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" :width="handleColWidth" :show-overflow-tooltip="false"
                           fixed="right" v-if="handleShow && showOperation">
            <template slot-scope="{ row }">
              <div class="optionDivRef">
                <slot :data="row" name="handle">-</slot>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <pagination :total="total" @pagination="getTableList" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" />
      </div>
    </el-card>
  </div>
</template>

<script>
import ToolbarModel from '../ToolbarModel'
export default {
  components: { ToolbarModel },
  props: {
    // 表单查询条件
    formLabel: {
      type: Array,
      default: () => [],
    },
    // 列表请求接口
    requestApi: {
      type: Function,
      default: () => function () { },
    },
    // 列表配置项
    columnsList: {
      type: Array,
      default: () => [],
    },
    // 传递的额外参数
    sendParams: {
      type: Object,
      default: () => null,
    },
    // 是否显示查询按钮 默认显示
    showBtnCrews: {
      type: Boolean,
      default: true,
    },
    // 是否显示查询/重置按钮（不影响插槽按钮） 默认显示
    showQueryButtons: {
      type: Boolean,
      default: true,
    },
    // 级联选择
    cascadeFunc: {
      type: Function,
      default: () => null,
    },
    // 级联选择 额外参数
    extraTableProp: {
      type: Object,
      default: () => null,
    },
    // 是否显示操作列 默认不显示
    showOperation: {
      type: Boolean,
      default: false,
    },
    // 是否显示右侧工具栏 默认不显示
    showRightTools: {
      type: Boolean,
      default: false,
    },

    // 复选框是否勾选
    selectable: {
      type: Function,
      default: () => {
        return true
      },
    },
    // 是否显示复选框 由父组件传递 默认不显示
    isSelectShow: {
      type: Boolean,
      default: false,
    },
    // 是否显示单选框 由父组件传递 默认不显示
    isRadioShow: {
      type: Boolean,
      default: false,
    },
    // 单选框唯一标识的字段名（如 'id', 'proId', 'bidId' 等）
    radioKey: {
      type: String,
      default: 'id',
    },
    // 单选框禁用判断的字段名（如果该字段值不为空，则禁用该行的单选框）
    radioDisabledKey: {
      type: String,
      default: '',
    },
    // 测试时使用的数据源
    testTableList: {
      type: Array,
      default: () => [],
    },
    // 是否显示当天日期
    isCurrentDate: {
      type: Boolean,
      default: false,
    },
    // 是否只可选择一个月的范围
    isOneMonth: {
      type: Boolean,
      default: false,
    },
    // 表格最大高度（像素），默认700px
    tableMaxHeight: {
      type: [Number, String],
      default: 650,
    },
    // 是否自动加载数据 默认自动加载
    autoLoad: {
      type: Boolean,
      default: true,
    },
    handleColWidth: {
      type: Number,
      default: 200,
    },
    showSearch: {
      type: Boolean,
      default: true,
    },
    indexNumShow: {
      type: Boolean,
      default: true,
    },
    isShowtableCardStyle:{
      type: Boolean,
      default: true,
    }

  },
  computed: {
    /* 根据操作栏控制表头是否显示 */
    tableColumCheckProps() {
      return this.columnCheckList.filter((e) => {
        return e.checked != false
      })
    },
    /* 表格卡片动态高度 */
    tableCardStyle() {
      const baseHeight = this.showSearch ? 200 : 120 // 搜索区域高度
      const toolbarHeight = this.showRightTools ? 40 : 0 // 工具栏高度
      const paginationHeight = 60 // 分页区域高度
      const availableHeight = `calc(100vh - ${baseHeight + toolbarHeight + paginationHeight + 25
      }px)`
      return {
        height: availableHeight,
        display: 'flex',
        flexDirection: 'column',
      }
    },
    /* 表格容器样式 */
    tableContainerStyle() {
      return {
        flex: '1 1 auto',
        minHeight: 0,
        overflow: 'hidden',
      }
    },
    /* 计算表格实际最大高度，减去分页区域高度 */
    computedTableMaxHeight() {
      // 分页区域高度：基础高度 + margin + padding（考虑分页条数选择器展开的情况）
      const paginationHeight = 100 // 分页区域高度（包含margin和padding，以及下拉选择器展开的高度）
      const tableHeaderHeight = (this.$slots.tableTitle || this.$slots.tableActions) ? 50 : 0 // 表格头部高度
      const cardPadding = 40 // 卡片内边距（上下各20px）
      const totalReservedHeight = paginationHeight + tableHeaderHeight + cardPadding

      if (typeof this.tableMaxHeight === 'number') {
        const calculatedHeight = this.tableMaxHeight - totalReservedHeight
        return calculatedHeight > 200 ? calculatedHeight : 200 // 确保最小高度200px
      } else {
        // 如果是字符串（如 '600px'），解析并计算
        const heightValue = parseInt(String(this.tableMaxHeight).replace('px', '')) || 600
        const calculatedHeight = heightValue - totalReservedHeight
        return calculatedHeight > 200 ? calculatedHeight : 200 // 确保最小高度200px
      }
    },
  },
  watch: {
    columnsList: {
      handler(nv, ov) {
        if (nv !== ov) {
          this.columnsList = nv
          this.columnCheckList = this.columnsList.map((e) => {
            this.$set(e, 'checked', true)
            return e
          })
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      // 表单校验
      formRules: {},
      loading: false,
      // 列表接口查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 列表数据源
      tableList: [],
      // 选中数据
      selectedData: [],
      // 列表数据条数
      total: 0,
      // 搜索区域是否隐藏

      // 是否显示复选框
      selectionShow: true,
      // 是否显示序号

      // 是否显示操作列
      handleShow: true,
      // 列表每列 label
      columnCheckList: [],
      // 操作列最小宽度
      dynamicWidth: 0,
      // 自增id
      idCount: 1,
      // 日期查询条件 字段名称
      typeList: [],

      // 日期选择器配置
      pickerOptions: {},
      // 单选框当前选中的行唯一标识
      currentRowId: null,
      // 单选框当前选中的行数据
      currentRowData: null,
    }
  },

  created() {
    this.columnCheckList = this.columnsList.map((e) => {
      this.$set(e, 'checked', true)
      return e
    })
    /* 生成查询参数 */
    this.formLabel.map((e) => {
      if (e.f_type === 'dateRange') {
        this.$set(this.queryParams, e.dateType[0], '')
        this.$set(this.queryParams, e.dateType[1], '')
        this.typeList = e.dateType

        if (this.isOneMonth) {
          this.pickerOptions = {
            disabledDate: (time) => {
              // 禁用今天之后的日期
              return time.getTime() > Date.now()
            },
            onPick: ({ maxDate, minDate }) => {
              // 当选择第一个日期后，设置第二个日期的可选范围
              this.pickerOptions.minDate = minDate
              if (minDate) {
                const maxRangeDate = new Date(minDate)
                maxRangeDate.setMonth(minDate.getMonth() + 1)
                this.pickerOptions.maxDate = maxRangeDate
              } else {
                this.pickerOptions.maxDate = null
              }
            },
          }
        }
      } else {
        this.$set(this.queryParams, e.f_model, '')
      }
    })
    if (this.sendParams !== null) {
      for (let key in this.sendParams) {
        this.$set(this.queryParams, key, this.sendParams[key])
      }
    }
    // 根据 autoLoad 属性决定是否自动加载数据
    if (this.autoLoad) {
      this.getTableList()
    }
  },
  updated() {
    // 若需要自适应最小宽度，可启用下行；当前使用固定宽度 handleColWidth
    this.dynamicWidth = this.getOperatorWidth()
  },
  methods: {
    /** 获取列表数据 */
    async getTableList() {
      try {
        if (
          this.queryParams.time &&
          this.queryParams.time.length !== 0
        ) {
          this.queryParams[this.typeList[0]] =
            this.queryParams.time[0]
          this.queryParams[this.typeList[1]] =
            this.queryParams.time[1]
        }

        const params = { ...this.queryParams }
        const queryParams = JSON.parse(JSON.stringify(params))
        delete queryParams.time // 剔除无关参数
        // 删除日期范围选择器绑定的临时数组字段（如 openTime），保留实际使用的两个字段（如 openStartTime, openEndTime）
        this.formLabel.forEach((item) => {
          if (
            item.f_type === 'dateRange' &&
            item.dateType &&
            item.dateType.length === 2
          ) {
            delete queryParams[item.f_model]
          }
        })
        // console.log(
        //     `%c🔍 列表查询入参 %c`,
        //     'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
        //     '',
        //     queryParams,
        // )
        this.loading = true
        const res = await this.requestApi(queryParams)
        console.log('queryParams111',queryParams)
        if (res.code === 200) {
          console.log('res',res)
          this.tableList = res.rows
          this.total = res.total
          // 数据刷新后，如果之前选中的行不在当前列表中或被禁用，清空选中状态
          if (this.isRadioShow && this.currentRowId) {
            let exists = false
            let isDisabled = false
            for (let i = 0; i < this.tableList.length; i++) {
              const row = this.tableList[i]
              const uniqueId = this.getRowUniqueId(row, i)
              if (uniqueId === this.currentRowId) {
                exists = true
                // 检查该行是否被禁用
                isDisabled = this.isRadioDisabled(row)
                if (!isDisabled) {
                  // 更新当前行数据引用
                  this.currentRowData = row
                }
                break
              }
            }
            if (!exists || isDisabled) {
              this.currentRowId = null
              this.currentRowData = null
            }
          }
        }
        this.loading = false
      } catch (error) {
        this.loading = false
        this.tableList = this.testTableList
      }
    },
    /** 查询按钮 */
    handleQuery() {
      this.getTableList()
    },

    /** 重置按钮 */
    resetQuery() {
      this.$refs.queryFormRef.resetFields()
      if (this.typeList.length > 1) {
        if (this.isCurrentDate) {
          this.queryParams[this.typeList[0]] = new Date()
            .toISOString()
            .split('T')[0]
          this.queryParams[this.typeList[1]] = new Date()
            .toISOString()
            .split('T')[0]
          this.queryParams.time = [
            new Date().toISOString().split('T')[0],
            new Date().toISOString().split('T')[0],
          ]
        } else {
          this.queryParams[this.typeList[0]] = ''
          this.queryParams[this.typeList[1]] = ''
          this.queryParams.time = []
        }
      } else {
        this.queryParams[this.typeList[0]] = ''
      }
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getTableList()
    },
    /** 级联选择 */
    handleCas(e, val) {
      this.queryParams[val] = e[e.length - 1]
    },
    /** 级联选择只选最后一级 */
    handleCasAdd(e, val, func, prop) {
      if (e.length !== 0) {
        this.queryParams[val] = e[e.length - 1]
        let setObj = {}
        // 合并
        if (prop) {
          Object.assign(setObj, prop)
        }
        // 设置id自增
        this.$set(setObj, 'id', this.idCount)
        this.idCount++
        // 获取单位
        func({
          id: e[e.length - 1],
        })
          .then((res) => {
            this.$set(setObj, 'name', res.data.parentName)
            this.$set(setObj, 'unitName', res.data.unitName)
            this.$set(setObj, 'typeName', res.data.name)
          })
          .catch((err) => { })
        for (let key in this.queryParams) {
          this.$set(setObj, key, this.queryParams[key])
        }
        this.tableList.unshift(setObj)
        console.log(this.tableList)
      }
    },
    /** 动态设置操作列的列宽 */
    getOperatorWidth() {
      const operatorColumn =
        document.getElementsByClassName('optionDivRef')

      // 默认宽度
      let width = 100
      // 内间距
      let paddingSpacing = 0
      // 按钮数量
      let buttonCount = 0

      if (operatorColumn.length > 0) {
        Array.prototype.forEach.call(operatorColumn, function (item) {
          // 最宽的宽度
          width = width > item.offsetWidth ? width : item.offsetWidth
          const buttons = item.getElementsByClassName('el-button')
          buttonCount = buttons.length
          buttonCount =
            buttonCount > buttons.length
              ? buttonCount
              : buttons.length
        })
        return width + 10
      }
    },

    queryTableList(params) {
      Object.assign(this.queryParams, params)
      this.getTableList()
    },

    handleSelectionChange(e) {
      this.selectedData = e
    },

    // 获取行的唯一标识（优先使用 radioKey 指定的字段）
    getRowUniqueId(row, index) {
      // 优先使用 radioKey 指定的字段作为唯一标识
      if (this.radioKey && row[this.radioKey] !== undefined && row[this.radioKey] !== null && row[this.radioKey] !== '') {
        return String(row[this.radioKey])
      }
      // 如果 radioKey 指定的字段不存在，尝试使用常见的ID字段
      if (row.id !== undefined && row.id !== null && row.id !== '') {
        return String(row.id)
      }
      if (row.proId !== undefined && row.proId !== null && row.proId !== '') {
        return String(row.proId)
      }
      if (row.bidId !== undefined && row.bidId !== null && row.bidId !== '') {
        return String(row.bidId)
      }
      // 如果都没有，使用索引作为后备（确保唯一性）
      // 注意：如果数据没有唯一ID，使用索引可能导致分页切换时选中状态丢失
      const rowIndex = index !== undefined ? index : this.tableList.findIndex(r => r === row)
      // 使用行的内容生成一个稳定的哈希值作为唯一标识
      try {
        const rowStr = JSON.stringify(row)
        // 简单的哈希函数，确保相同内容返回相同值
        let hash = 0
        for (let i = 0; i < rowStr.length; i++) {
          const char = rowStr.charCodeAt(i)
          hash = ((hash << 5) - hash) + char
          hash = hash & hash // Convert to 32bit integer
        }
        return `hash_${Math.abs(hash)}_${rowIndex}`
      } catch (e) {
        // 如果序列化失败，使用索引
        return `index_${rowIndex}`
      }
    },

    // 处理单选框变化事件
    handleRadioChange(row, index) {
      if (this.isRadioShow && row) {
        // 如果该行被禁用，直接返回，不执行任何操作
        if (this.isRadioDisabled(row)) {
          return
        }
        const uniqueId = this.getRowUniqueId(row, index)
        // 只有当值真正改变时才更新，避免重复触发
        if (this.currentRowId !== uniqueId) {
          this.currentRowId = uniqueId
          this.currentRowData = row
          // 注意：这里不直接 emit，让 watch 中的监听器来处理，避免重复触发
        }
      }
    },

    // 判断单选框是否禁用
    isRadioDisabled(row) {
      // 如果没有设置禁用判断字段，不禁用
      if (!this.radioDisabledKey) {
        return false
      }
      // 获取禁用判断字段的值
      const disabledValue = row[this.radioDisabledKey]
      // 如果值为空（null、undefined、''），不禁选（返回 false）
      // 如果不为空，则禁止选中（返回 true）
      return disabledValue !== null && disabledValue !== undefined && disabledValue !== ''
    },

    // 处理表格当前行变化（用于高亮）
    handleCurrentChange(currentRow) {
      if (this.isRadioShow && currentRow) {
        // 如果该行被禁用，直接返回，不执行任何操作
        if (this.isRadioDisabled(currentRow)) {
          return
        }
        const index = this.tableList.findIndex(r => r === currentRow)
        const uniqueId = this.getRowUniqueId(currentRow, index)
        this.currentRowId = uniqueId
        this.currentRowData = currentRow
      }
    },

    /* 时间change事件 */
    onChangeTime(e, type) {
      if (this.isOneMonth) {
        if (e && e.length === 2) {
          const [start, end] = e
          const startDate = new Date(start)
          const endDate = new Date(end)
          // 计算两个日期之间的天数差
          const diffTime = Math.abs(endDate - startDate)
          const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
          // 如果超过31天，自动调整结束日期
          if (diffDays > 31) {
            const newEndDate = new Date(startDate)
            newEndDate.setDate(startDate.getDate() + 31)
            this.queryParams.time = [
              start,
              newEndDate.toISOString().split('T')[0],
            ]
            this.$message.warning(
              '选择的时间范围超过31天，查询将会缓慢，已自动调整',
            )
          }
        }
      } else {
        if (type && type.length === 2) {
          const [_1, _2] = type
          if (e && e.length > 0) {
            const [_time1, _time2] = e
            this.queryParams[_1] = _time1
            this.queryParams[_2] = _time2
          } else {
            // 清空日期范围时，同时清空两个字段
            this.queryParams[_1] = ''
            this.queryParams[_2] = ''
          }
        }
      }
    },
  },

  watch: {
    sendParams: {
      handler(nv, ov) {
        if (nv) {
          for (let key in nv) {
            this.$set(this.queryParams, key, this.sendParams[key])
          }
        }
      },
      deep: true,
    },
    // 监听单选框选中值的变化
    currentRowId(newVal, oldVal) {
      if (this.isRadioShow && newVal && newVal !== oldVal) {
        // 找到对应的行数据和索引
        let foundRow = null
        let foundIndex = -1
        for (let i = 0; i < this.tableList.length; i++) {
          const row = this.tableList[i]
          const uniqueId = this.getRowUniqueId(row, i)
          if (uniqueId === newVal) {
            foundRow = row
            foundIndex = i
            break
          }
        }
        if (foundRow) {
          // 如果该行被禁用，清空选中状态，不触发事件
          if (this.isRadioDisabled(foundRow)) {
            this.currentRowId = oldVal
            this.currentRowData = null
            return
          }
          this.currentRowData = foundRow
          this.$emit('radio-change', foundRow, foundIndex)
        }
      }
    },
  },
}
</script>

<style scoped lang="scss">
.search-card {
  margin-bottom: 10px;

  ::v-deep .el-form-item {
    margin-bottom: 10px;
  }

  .query-btn {
    width: 98px;
    height: 36px;
    background: #1f72ea;
    box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
    border-radius: 4px 4px 4px 4px;
    color: #fff;
    border: none;
    font-size: 14px;
    transition: all 0.3s;

    &:hover {
      background: #4a8bff;
      box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
    }
  }

  .reset-btn {
    width: 98px;
    height: 36px;
    background: #ffffff;
    box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
    border-radius: 4px 4px 4px 4px;
    color: #333;
    border: none;
    font-size: 14px;
    transition: all 0.3s;

    &:hover {
      background: #f5f5f5;
      box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
      color: #40a9ff;
    }
  }
}

.table-card {
  ::v-deep .el-card__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
  }

  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    flex-shrink: 0;

    .table-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }

    .table-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }
  }

  // 新增表格容器样式
  .table-container {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;

    ::v-deep .el-table {
      width: 100%;
      margin-bottom: 0;
    }
  }

  .pagination-wrapper {
    flex-shrink: 0;
    margin-top: 16px;
    padding-top: 16px;
    width: 100%;
  }

  ::v-deep .el-pagination {
    margin: 0;
    padding: 0;
    text-align: right;
    background: #fff;
  }
}

.btn-container {
  margin-bottom: 6px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

::v-deep .btn-handler {
  display: flex;
  flex: 1;

  .el-button {
    padding: 6px 18px;
  }
}

::v-deep .optionDivRef {
  white-space: nowrap;
  display: inline-block;

  .el-button {
    padding: 6px 12px;
  }
}

// 单选框样式
::v-deep .el-radio {
  margin: 0;

  .el-radio__label {
    padding-left: 0;
  }

  .el-radio__input {
    .el-radio__inner {
      width: 16px;
      height: 16px;
    }
  }

  // 禁用状态下的样式，确保无法点击
  &.is-disabled {
    cursor: not-allowed;
    pointer-events: auto; // 保持 pointer-events 以显示禁用状态

    .el-radio__input {
      cursor: not-allowed;
    }

    .el-radio__label {
      cursor: not-allowed;
    }
  }
}

// 表格样式优化
::v-deep .el-table {
  .el-button--text {
    padding: 0;
    font-size: 14px;
  }

  // 表头样式
  thead {
    th {
      background-color: #f1f6ff;
      color: #424242;
      font-size: 16px;
      font-weight: 600;
    }
  }

  // 表格边框样式
  &.el-table--border {
    border: 1px solid #ebeef5;
    border-right: none;
    border-bottom: none;

    th,
    td {
      border-right: 1px solid #ebeef5;
    }
  }
}

::v-deep .pagination-container {
  margin-top: 0;
  .el-pagination{
    padding-top: 0 !important;
  }
}
</style>
