<template>
  <div>
    <div style="margin-bottom: 16px; display: flex; align-items: center; gap: 16px;">
      <Button v-if="currentCityId" icon="md-arrow-back" @click="handleBackToCity">返回市州列表</Button>
      <span v-if="currentCityId" style="font-weight: bold;">当前查看：{{ currentCityName }}</span>
      <ButtonGroup v-if="!currentCityId">
        <Button :type="searchParams.area_jurisdiction === '' ? 'primary' : 'default'" @click="handleAreaChange('')">
          全部
        </Button>
        <Button style="margin-left: 10px;" :type="searchParams.area_jurisdiction === '1' ? 'primary' : 'default'"
                @click="handleAreaChange('1')">区县
        </Button>
      </ButtonGroup>
      <Button type="primary" icon="md-download" @click="handleExport">导出</Button>
    </div>
    <vxe-table
      ref="xTable"
      border
      resizable
      class="mytable-scrollbar"
      highlight-hover-row
      :min-height="300"
      size="medium"
      show-overflow="tooltip"
      :loading="loading"
      align="center"
      header-align="center"
      :sort-config="{trigger: 'cell'}"
      show-footer
      :footer-method="footerMethod"
      :data="tableData">
      <vxe-table-colgroup title="综治中心规范化建设运行情况概览">
        <vxe-table-column fixed="left" field="city_name" :title="currentCityId ? '区县' : '市州'" :min-width="80">
          <template #default="{ row }">
            <span v-if="!currentCityId" style="color: #2d8cf0; cursor: pointer;"
                  @click="handleCityClick(row)">{{ row.city_name }}</span>
            <span v-else>{{ row.area_name }}</span>
          </template>
        </vxe-table-column>
        <vxe-table-colgroup title="场所设置">
          <vxe-table-column field="squareMeasure" title="平均面积（平方米）" :min-width="120"></vxe-table-column>
          <vxe-table-colgroup title="场所选址">
            <vxe-table-column field="construction01" title="独立选址" :min-width="80"></vxe-table-column>
            <vxe-table-column field="construction02" title="依托原综治中心" :min-width="80"></vxe-table-column>
            <vxe-table-column field="construction03" title="依托司法行政机关公共法律服务中心（法律援助中心）"
                              :min-width="80"></vxe-table-column>
            <vxe-table-column field="construction04" title="依托信访局信访接待中心" :min-width="80"></vxe-table-column>
            <vxe-table-column field="construction05" title="依托法院诉讼服务中心" :min-width="80"></vxe-table-column>
            <vxe-table-column field="construction06" title="依托检察院检察服务中心" :min-width="80"></vxe-table-column>
            <vxe-table-column field="construction071" title="乡创服务中心" :min-width="80"></vxe-table-column>
            <vxe-table-column field="construction072" title="政务大厅" :min-width="80"></vxe-table-column>
            <vxe-table-column field="construction073" title="法院综合审判楼" :min-width="80"></vxe-table-column>
            <!-- 场所选址 - 其他列（动态） -->
            <vxe-table-column
              v-for="(item, index) in dynamicColumns.locationSelection"
              :key="`location-other-${index}`"
              :field="item.field"
              :title="item.title"
              :min-width="80">
            </vxe-table-column>
          </vxe-table-colgroup>
          <vxe-table-colgroup title="功能布局">
            <vxe-table-column field="functional01" title="设置引导受理区" :min-width="80"></vxe-table-column>
            <vxe-table-column field="functional02" title="设置多元化解区" :min-width="80"></vxe-table-column>
            <vxe-table-column field="functional03" title="设置指挥调度区" :min-width="80"></vxe-table-column>
          </vxe-table-colgroup>
        </vxe-table-colgroup>
        <vxe-table-colgroup title="功能布局">
          <vxe-table-colgroup title="机构编制">
            <vxe-table-column field="institutionalStaffingY" title="有" :min-width="80"></vxe-table-column>
            <vxe-table-column field="institutionalStaffingN" title="无" :min-width="80"></vxe-table-column>
          </vxe-table-colgroup>
          <vxe-table-colgroup title="单位级别">
            <vxe-table-column field="unitLevel01" title="股级" :min-width="80"></vxe-table-column>
            <vxe-table-column field="unitLevel02" title="副科级" :min-width="80"></vxe-table-column>
            <vxe-table-column field="unitLevel03" title="正科级" :min-width="80"></vxe-table-column>
            <vxe-table-column field="unitLevel04" title="副处级" :min-width="80"></vxe-table-column>
            <vxe-table-column field="unitLevel05" title="正处级" :min-width="80"></vxe-table-column>
          </vxe-table-colgroup>
          <vxe-table-colgroup title="人员编制">
            <vxe-table-column field="authorizedStrength" title="编制人数" :min-width="80"></vxe-table-column>
            <vxe-table-column field="actualNumber" title="实有人数" :min-width="80"></vxe-table-column>
          </vxe-table-colgroup>
        </vxe-table-colgroup>
        <vxe-table-colgroup title="入驻情况">
          <vxe-table-colgroup title="多中心入驻情况">
            <vxe-table-colgroup title="公共法律服务中心（法律援助中心）">
              <vxe-table-column field="publicLegalZ" title="整体" :min-width="80"></vxe-table-column>
              <vxe-table-column field="publicLegalP" title="派员" :min-width="80"></vxe-table-column>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="信访接待中心">
              <vxe-table-column field="receptionCenterZ" title="整体" :min-width="80"></vxe-table-column>
              <vxe-table-column field="receptionCenterP" title="派员" :min-width="80"></vxe-table-column>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="诉讼服务中心">
              <vxe-table-column field="lawsuitZ" title="整体" :min-width="80"></vxe-table-column>
              <vxe-table-column field="lawsuitP" title="派员" :min-width="80"></vxe-table-column>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="检察服务中心">
              <vxe-table-column field="procuratorialZ" title="整体" :min-width="80"></vxe-table-column>
              <vxe-table-column field="procuratorialP" title="派员" :min-width="80"></vxe-table-column>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="其他">
              <vxe-table-colgroup title="民生受理服务中心">
                <vxe-table-column field="registration011z" title="整体" :min-width="80"></vxe-table-column>
                <vxe-table-column field="registration011p" title="派员" :min-width="80"></vxe-table-column>
              </vxe-table-colgroup>
              <vxe-table-colgroup title="行政争议协调化解中心">
                <vxe-table-column field="registration012Z" title="整体" :min-width="80"></vxe-table-column>
                <vxe-table-column field="registration012P" title="派员" :min-width="80"></vxe-table-column>
              </vxe-table-colgroup>
              <vxe-table-colgroup title="公用事业服务中心">
                <vxe-table-column field="registration013Z" title="整体" :min-width="80"></vxe-table-column>
                <vxe-table-column field="registration013P" title="派员" :min-width="80"></vxe-table-column>
              </vxe-table-colgroup>
              <vxe-table-colgroup title="劳动人事争议仲裁">
                <vxe-table-column field="registration014Z" title="整体" :min-width="80"></vxe-table-column>
                <vxe-table-column field="registration014P" title="派员" :min-width="80"></vxe-table-column>
              </vxe-table-colgroup>
            </vxe-table-colgroup>
            <!-- 多中心入驻情况 - 其他列（动态） -->
            <vxe-table-column
              v-for="(item, index) in dynamicColumns.multiCenter"
              :key="`multi-center-other-${index}`"
              :field="item.field"
              :title="item.title"
              :min-width="80">
            </vxe-table-column>
          </vxe-table-colgroup>
          <vxe-table-colgroup title="常驻部门和单位">
            <vxe-table-column field="resident_department_fy_settle" title="法院" :min-width="80"></vxe-table-column>
            <vxe-table-column field="resident_department_jcy_settle" title="检察院" :min-width="80"></vxe-table-column>
            <vxe-table-column field="resident_department_gg_settle" title="公安" :min-width="80"></vxe-table-column>
            <vxe-table-column field="resident_department_sa_settle" title="司法行政" :min-width="80"></vxe-table-column>
            <vxe-table-column field="resident_department_xf_settle" title="信访" :min-width="80"></vxe-table-column>
            <vxe-table-column field="resident_department_rl_settle" title="人力资源社会保障"
                              :min-width="80"></vxe-table-column>
            <vxe-table-column field="resident_department_rm_settle" title="人民调解组织（特色调解室、金牌调解员）"
                              :min-width="80"></vxe-table-column>
            <vxe-table-colgroup title="其他">
              <vxe-table-column field="residentDepartmentRegistration011" title="民生受理服务中心"
                                :min-width="80"></vxe-table-column>
              <vxe-table-column field="residentDepartmentRegistration012" title="行政争议协调化解中心"
                                :min-width="80"></vxe-table-column>
              <vxe-table-column field="residentDepartmentRegistration013" title="公用事业服务中心"
                                :min-width="80"></vxe-table-column>
              <vxe-table-column field="residentDepartmentRegistration014" title="劳动人事争议仲裁"
                                :min-width="80"></vxe-table-column>
            </vxe-table-colgroup>
            <!-- 常驻部门和单位 - 其他列（动态） -->
            <vxe-table-column
              v-for="(item, index) in dynamicColumns.residentDepartments"
              :key="`resident-other-${index}`"
              :field="item.field"
              :title="item.title"
              :min-width="80">
            </vxe-table-column>
          </vxe-table-colgroup>
          <vxe-table-colgroup title="轮驻部门和单位">
            <vxe-table-column field="rotating_department_mz_settle" title="民政" :min-width="80"></vxe-table-column>
            <vxe-table-column field="rotating_department_zr_settle" title="自然资源" :min-width="80"></vxe-table-column>
            <vxe-table-column field="rotating_department_st_settle" title="生态环境" :min-width="80"></vxe-table-column>
            <vxe-table-column field="rotating_department_zf_settle" title="住房城乡建设"
                              :min-width="80"></vxe-table-column>
            <vxe-table-column field="rotating_department_ws_settle" title="卫生健康" :min-width="80"></vxe-table-column>
            <vxe-table-column field="rotating_department_ty_settle" title="退役军人事务"
                              :min-width="80"></vxe-table-column>
            <vxe-table-column field="rotating_department_sc_settle" title="市场监管" :min-width="80"></vxe-table-column>
            <vxe-table-column field="rotating_department_gh_settle" title="工会" :min-width="80"></vxe-table-column>
            <vxe-table-column field="rotating_department_gqt_settle" title="共青团" :min-width="80"></vxe-table-column>
            <vxe-table-column field="rotating_department_fl_settle" title="妇联" :min-width="80"></vxe-table-column>
            <vxe-table-column field="rotating_department_fxh_settle" title="法学会" :min-width="80"></vxe-table-column>
            <vxe-table-column field="rotating_department_hy_settle" title="行业性专业性调解组织"
                              :min-width="80"></vxe-table-column>
            <vxe-table-colgroup title="其他">
              <vxe-table-column field="rotatingDepartmentRegistration011" title="民生受理服务中心"
                                :min-width="80"></vxe-table-column>
              <vxe-table-column field="rotatingDepartmentRegistration012" title="行政争议协调化解中心"
                                :min-width="80"></vxe-table-column>
              <vxe-table-column field="rotatingDepartmentRegistration013" title="公用事业服务中心"
                                :min-width="80"></vxe-table-column>
              <vxe-table-column field="rotatingDepartmentRegistration014" title="劳动人事争议仲裁"
                                :min-width="80"></vxe-table-column>
            </vxe-table-colgroup>
            <!-- 轮驻部门和单位 - 其他列（动态） -->
            <vxe-table-column
              v-for="(item, index) in dynamicColumns.rotatingDepartments"
              :key="`rotating-other-${index}`"
              :field="item.field"
              :title="item.title"
              :min-width="80">
            </vxe-table-column>
          </vxe-table-colgroup>
          <vxe-table-colgroup title="随驻部门和单位">
            <vxe-table-column field="accompanying_department_ms_settle" title="民商事仲裁机构"
                              :min-width="80"></vxe-table-column>
            <vxe-table-column field="accompanying_department_ld_settle" title="劳动争议仲裁机构"
                              :min-width="80"></vxe-table-column>
            <vxe-table-column field="accompanying_department_gz_settle" title="公证机构"
                              :min-width="80"></vxe-table-column>
            <vxe-table-column field="accompanying_department_jd_settle" title="鉴定机构"
                              :min-width="80"></vxe-table-column>
            <vxe-table-column field="accompanying_department_xl_settle" title="心理服务机构"
                              :min-width="80"></vxe-table-column>
            <vxe-table-column field="accompanying_department_gy_settle" title="公益性社会组织"
                              :min-width="80"></vxe-table-column>
            <vxe-table-column field="accompanying_department_ls_settle" title="律师" :min-width="80"></vxe-table-column>
            <vxe-table-colgroup title="其他">
              <vxe-table-column field="accompanyingDepartmentRegistration011" title="民生受理服务中心"
                                :min-width="80"></vxe-table-column>
              <vxe-table-column field="accompanyingDepartmentRegistration012" title="行政争议协调化解中心"
                                :min-width="80"></vxe-table-column>
              <vxe-table-column field="accompanyingDepartmentRegistration013" title="公用事业服务中心"
                                :min-width="80"></vxe-table-column>
              <vxe-table-column field="accompanyingDepartmentRegistration014" title="劳动人事争议仲裁"
                                :min-width="80"></vxe-table-column>
            </vxe-table-colgroup>
            <!-- 随驻部门和单位 - 其他列（动态） -->
            <vxe-table-column
              v-for="(item, index) in dynamicColumns.followDepartments"
              :key="`follow-other-${index}`"
              :field="item.field"
              :title="item.title"
              :min-width="80">
            </vxe-table-column>
          </vxe-table-colgroup>
        </vxe-table-colgroup>
      </vxe-table-colgroup>
    </vxe-table>
  </div>
</template>
<script>
import axios from '@/libs/api.request'
import { selectDictList } from '@/api/contradiction'
import { export_table_to_excel } from '@/libs/excel'

/**
 * 数据加载方案：使用统计接口获取表头和数据
 *
 * 统计接口：/api/ac/jilinsscgsdp/constructionSelection/selectComprehensiveGovernanceCountList
 *
 * 支持的返回格式：
 * 1. 同时返回表头和数据：
 *    {
 *      errcode: 0,
 *      data: {
 *        dynamicColumns: {
 *          locationSelection: [{field: 'location_0', title: '其他（社区服务中心）'}, ...],
 *          multiCenter: [...],
 *          residentDepartments: [...],
 *          rotatingDepartments: [...],
 *          followDepartments: [...]
 *        },
 *        tableData: [
 *          {name: '长春', params: 1200, location_0: 3, location_1: 2, ...},
 *          ...
 *        ]
 *      }
 *    }
 *
 * 2. 只返回数据（表头为空或使用默认）：
 *    {
 *      errcode: 0,
 *      data: [
 *        {name: '长春', params: 1200, location_0: 3, ...},
 *        ...
 *      ]
 *    }
 *    或
 *    {
 *      errcode: 0,
 *      data: {
 *        tableData: [...],
 *        data: [...],
 *        results: [...],
 *        list: [...]
 *      }
 *    }
 *
 * 同步机制：
 * - 加载数据时会自动同步表头字段，确保数据中包含所有表头定义的字段
 * - 如果数据中缺少某个字段，会自动补充默认值 0
 */
export default {
  data () {
    return {
      searchParams: {
        area_jurisdiction: '' // 空为全部，'1'为六十个区县
      },
      currentCityId: '', // 当前选中的市ID，用于查询区县数据
      currentCityName: '', // 当前选中的市名称
      tableData: [],
      loading: false,
      // 动态列配置
      dynamicColumns: {
        locationSelection: [], // 场所选址 - 其他列
        multiCenter: [], // 多中心入驻情况 - 其他列
        residentDepartments: [], // 常驻部门和单位 - 其他列
        rotatingDepartments: [], // 轮驻部门和单位 - 其他列
        followDepartments: [] // 随驻部门和单位 - 其他列
      }
    }
  },
  mounted () {
    // 先加载字典（表头），再加载数据
    this.loadDictAndData()
  },
  methods: {
    // 加载字典和数据
    async loadDictAndData () {
      await this.loadDictOptions()
      await this.loadData()
    },
    // 加载字典选项（用于动态表头）
    async loadDictOptions () {
      try {
        // 加载 event_registration_status 字典作为动态列表头
        const response = await selectDictList({ type: 'event_registration_status' })
        if (response.data && response.data.errcode === 0) {
          const options = this.formatDictOptions(response.data.data || [])
          // 将字典数据转换为动态列格式
          // 多中心入驻情况、常驻部门、轮驻部门、随驻部门的"其他"列使用相同字典
          this.dynamicColumns.multiCenter = options.map((item, index) => ({
            field: `multiCenter_other_${index}`,
            title: item.label
          }))
          this.dynamicColumns.residentDepartments = options.map((item, index) => ({
            field: `resident_other_${index}`,
            title: item.label
          }))
          this.dynamicColumns.rotatingDepartments = options.map((item, index) => ({
            field: `rotating_other_${index}`,
            title: item.label
          }))
          this.dynamicColumns.followDepartments = options.map((item, index) => ({
            field: `follow_other_${index}`,
            title: item.label
          }))
        }

        // 加载场所选址字典中的"其他"子项
        const constructionRes = await selectDictList({ type: 'event_construction_selection' })
        if (constructionRes.data && constructionRes.data.errcode === 0) {
          const constructionOptions = this.formatDictOptions(constructionRes.data.data || [])
          // 找到"其他"选项
          const otherOption = constructionOptions.find(item => item.label === '其他' || item.value === '其他')
          if (otherOption) {
            // 加载"其他"的子级选项
            const otherChildRes = await selectDictList({
              type: 'event_construction_selection',
              parent_id: otherOption.value
            })
            if (otherChildRes.data && otherChildRes.data.errcode === 0) {
              const otherOptions = this.formatDictOptions(otherChildRes.data.data || [])
              this.dynamicColumns.locationSelection = otherOptions.map((item, index) => ({
                field: `location_other_${index}`,
                title: item.label
              }))
            }
          }
        }
      } catch (error) {
        console.error('加载字典失败:', error)
      }
    },
    // 格式化字典选项
    formatDictOptions (list) {
      if (!Array.isArray(list)) return []
      return list
        .map(item => {
          const label = item.label || item.dict_name || item.name || ''
          const value = item.value || item.dict_value || item.code || item.id || label
          if (!label) return null
          return { label, value }
        })
        .filter(Boolean)
    },
    // 搜索条件变化
    handleSearch () {
      this.loadData()
    },
    // 区域筛选变化
    handleAreaChange (val) {
      this.searchParams.area_jurisdiction = val
      this.currentCityId = '' // 切换筛选时清空市ID
      this.currentCityName = ''
      this.loadData()
    },
    // 点击市州查看区县数据
    handleCityClick (row) {
      if (row.city_id) {
        this.currentCityId = row.city_id
        this.currentCityName = row.city_name
        this.loadData()
      }
    },
    // 返回市州列表
    handleBackToCity () {
      this.currentCityId = ''
      this.currentCityName = ''
      this.loadData()
    },
    // 统一加载数据：使用统计接口
    async loadData () {
      try {
        this.loading = true
        const params = {}
        // 如果选择了六十个区县，传递 area_jurisdiction 参数
        if (this.searchParams.area_jurisdiction) {
          params.area_jurisdiction = this.searchParams.area_jurisdiction
        }
        // 如果选择了某个市，传递 city_id 参数查询区县数据
        if (this.currentCityId) {
          params.city_id = this.currentCityId
        }
        const response = await axios.request({
          url: '/api/ac/jilinsscgsdp/constructionSelection/selectComprehensiveGovernanceCountList',
          method: 'post',
          data: params
        })

        if (response.data && response.data.errcode === 0) {
          const data = response.data.data || {}

          // 处理动态列（表头）
          // 如果接口返回了动态列信息，则使用；否则保持空数组
          if (data.dynamicColumns || data.columns) {
            const columns = data.dynamicColumns || data.columns || {}
            this.dynamicColumns.locationSelection = this.formatColumns(columns.locationSelection || [], 'location')
            this.dynamicColumns.multiCenter = this.formatColumns(columns.multiCenter || [], 'multiCenter')
            this.dynamicColumns.residentDepartments = this.formatColumns(columns.residentDepartments || [], 'resident')
            this.dynamicColumns.rotatingDepartments = this.formatColumns(columns.rotatingDepartments || [], 'rotating')
            this.dynamicColumns.followDepartments = this.formatColumns(columns.followDepartments || [], 'follow')
          }

          // 处理表格数据
          // 支持多种返回格式：{ tableData: [...] }、{ data: [...] }、直接返回数组
          let rawTableData = []
          if (Array.isArray(data)) {
            rawTableData = data
          } else if (data.tableData) {
            rawTableData = data.tableData
          } else if (data.data && Array.isArray(data.data)) {
            rawTableData = data.data
          } else if (data.results && Array.isArray(data.results)) {
            rawTableData = data.results
          } else if (data.list && Array.isArray(data.list)) {
            rawTableData = data.list
          }

          // 同步表头字段：确保数据中包含所有表头定义的字段
          this.tableData = this.syncDataWithColumns(rawTableData)
        } else {
          const msg = response.data && response.data.errmsg ? response.data.errmsg : '加载数据失败'
          this.$Message.error(msg)
        }
      } catch (error) {
        console.error('加载数据失败:', error)
        this.$Message.error('加载数据失败')
      } finally {
        this.loading = false
      }
    },
    // 加载动态列数据（表头接口）- 保留方法以兼容旧逻辑，但不再单独调用
    async loadDynamicColumns () {
      // 此方法已合并到 loadData 中，保留仅为兼容
      console.warn('loadDynamicColumns 方法已废弃，请使用 loadData 方法')
    },
    // 加载表格数据（数据接口）- 保留方法以兼容旧逻辑，但不再单独调用
    async loadTableData () {
      // 此方法已合并到 loadData 中，保留仅为兼容
      console.warn('loadTableData 方法已废弃，请使用 loadData 方法')
    },
    // 仅刷新数据（表头不变时使用，性能更好）
    async refreshTableData () {
      // 由于接口已合并，直接调用 loadData 即可
      await this.loadData()
    },
    // 格式化列数据
    formatColumns (columns, prefix = 'dynamic') {
      if (!Array.isArray(columns)) {
        return []
      }
      return columns.map((item, index) => {
        // 如果接口返回的是字符串数组，转换为对象格式
        if (typeof item === 'string') {
          return {
            field: `${prefix}_${index}`,
            title: item
          }
        }
        // 如果已经是对象格式，直接返回
        return {
          field: item.field || `${prefix}_${index}`,
          title: item.title || item.name || ''
        }
      })
    },
    // 同步数据与表头字段：确保数据中包含所有表头定义的字段
    syncDataWithColumns (rawData) {
      // 收集所有动态列的字段名
      const allDynamicFields = []
      Object.values(this.dynamicColumns).forEach(columns => {
        columns.forEach(col => {
          if (col.field && !allDynamicFields.includes(col.field)) {
            allDynamicFields.push(col.field)
          }
        })
      })

      // 为每行数据添加动态字段，如果数据中没有该字段，则设置为默认值 0
      return rawData.map(row => {
        const newRow = { ...row }
        allDynamicFields.forEach(field => {
          // 如果数据中没有该字段，或者值为 null/undefined，则设置为默认值 0
          if (!newRow.hasOwnProperty(field) || newRow[field] === null || newRow[field] === undefined) {
            newRow[field] = 0
          }
        })
        return newRow
      })
    },
    // 更新 tableData，为动态列添加字段（兼容旧方法）
    updateTableDataWithDynamicFields () {
      this.tableData = this.syncDataWithColumns(this.tableData)
    },
    // 表尾合计方法
    footerMethod ({ columns, data }) {
      const footerData = [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '合计'
          }
          // 对数值列进行求和
          const field = column.property
          if (!field) return ''
          // 计算该列所有数值的和
          let sum = 0
          let hasValue = false
          data.forEach(row => {
            const value = row[field]
            if (typeof value === 'number') {
              sum += value
              hasValue = true
            } else if (value && !isNaN(Number(value))) {
              sum += Number(value)
              hasValue = true
            }
          })
          return hasValue ? parseFloat(sum.toFixed(2)) : ''
        })
      ]
      return footerData
    },
    // 导出表格（保持多级表头结构）
    handleExport () {
      if (!this.tableData || this.tableData.length === 0) {
        this.$Message.warning('暂无数据可导出')
        return
      }

      // 获取表格的header DOM，解析多级表头
      const headerWrapper = this.$refs.xTable.$el.querySelector('.vxe-table--header-wrapper')
      const bodyWrapper = this.$refs.xTable.$el.querySelector('.vxe-table--body-wrapper')
      const footerWrapper = this.$refs.xTable.$el.querySelector('.vxe-table--footer-wrapper')

      if (!headerWrapper || !bodyWrapper) {
        this.$Message.error('获取表格失败')
        return
      }

      // 创建临时table元素，合并header、body、footer
      const tempTable = document.createElement('table')
      tempTable.id = 'export-table-temp'
      tempTable.style.borderCollapse = 'collapse'
      tempTable.style.width = '100%'

      // 复制表头
      const headerTable = headerWrapper.querySelector('table')
      if (headerTable) {
        const thead = headerTable.querySelector('thead')
        if (thead) {
          const clonedThead = thead.cloneNode(true)
          // 为表头单元格添加居中样式
          this.addCenterStyleToCells(clonedThead)
          tempTable.appendChild(clonedThead)
        }
      }

      // 复制数据体
      const bodyTable = bodyWrapper.querySelector('table')
      if (bodyTable) {
        const tbody = bodyTable.querySelector('tbody')
        if (tbody) {
          const clonedTbody = tbody.cloneNode(true)
          // 为数据单元格添加居中样式
          this.addCenterStyleToCells(clonedTbody)
          tempTable.appendChild(clonedTbody)
        }
      }

      // 复制表尾（合计行）
      if (footerWrapper) {
        const footerTable = footerWrapper.querySelector('table')
        if (footerTable) {
          const tfoot = footerTable.querySelector('tfoot') || footerTable.querySelector('tbody')
          if (tfoot) {
            const clonedFoot = tfoot.cloneNode(true)
            if (clonedFoot.tagName === 'TBODY') {
              clonedFoot.tagName = 'TFOOT'
            }
            // 为表尾单元格添加居中样式
            this.addCenterStyleToCells(clonedFoot)
            tempTable.appendChild(clonedFoot)
          }
        }
      }

      // 将临时table添加到body中（xlsx需要从DOM中读取）
      tempTable.style.position = 'absolute'
      tempTable.style.left = '-9999px'
      document.body.appendChild(tempTable)

      try {
        // 使用 excel.js 工具类导出
        export_table_to_excel('export-table-temp', '综治中心规范化建设运行情况统计.xlsx')
        this.$Message.success('导出成功')
      } catch (error) {
        console.error('导出失败:', error)
        this.$Message.error('导出失败，请稍后重试')
      } finally {
        // 清理临时table
        setTimeout(() => {
          const tempEl = document.getElementById('export-table-temp')
          if (tempEl && tempEl.parentNode) {
            tempEl.parentNode.removeChild(tempEl)
          }
        }, 100)
      }
    },
    // 为单元格添加居中样式（用于导出）
    addCenterStyleToCells (element) {
      if (!element) return
      const cells = element.querySelectorAll('td, th')
      cells.forEach(cell => {
        cell.style.textAlign = 'center'
        cell.setAttribute('align', 'center')
        // 设置垂直居中
        cell.style.verticalAlign = 'middle'
        cell.setAttribute('valign', 'middle')
      })
    }
  }
}
</script>
<style scoped>
/*滚动条整体部分*/
.mytable-scrollbar ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/*滚动条的轨道*/
.mytable-scrollbar ::-webkit-scrollbar-track {
  background-color: #FFFFFF;
}

/*滚动条里面的小方块，能向上向下移动*/
.mytable-scrollbar ::-webkit-scrollbar-thumb {
  background-color: #bfbfbf;
  border-radius: 5px;
  border: 1px solid #F1F1F1;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}

.mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
  background-color: #A8A8A8;
}

.mytable-scrollbar ::-webkit-scrollbar-thumb:active {
  background-color: #787878;
}

/*边角，即两个滚动条的交汇处*/
.mytable-scrollbar ::-webkit-scrollbar-corner {
  background-color: #FFFFFF;
}
</style>
