<script setup>
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Download,
  Grid,
  Printer,
  Refresh,
  Search,
  Document
} from '@element-plus/icons-vue'

const scopeSelect = ref('selected')
const districtSearch = ref('')
const treeRef = ref(null)

const treeData = ref([
  {
    id: '106',
    label: '106壶天镇',
    children: [
      {
        id: '203',
        label: '203大坪村',
        children: Array.from({ length: 12 }, (_, i) => {
          const no = String(i + 1).padStart(2, '0')
          return { id: `203-${no}`, label: `[${no}] 大坪第${i + 1}村民组`, children: [] }
        })
      },
      { id: '206', label: '206石狗村', children: [] },
      { id: '207', label: '207壶天村', children: [] },
      { id: '210', label: '210中石村', children: [] },
      { id: '214', label: '214光辉村', children: [] },
      { id: '218', label: '218直东村', children: [] },
      { id: '220', label: '220合东村', children: [] },
      { id: '222', label: '222南岳坪村', children: [] },
      { id: '224', label: '224上新桥村', children: [] },
      { id: '229', label: '229潭桥村', children: [] },
      { id: '230', label: '230双坪村', children: [] },
      { id: '235', label: '235山坪村', children: [] },
      { id: '238', label: '238大塘村', children: [] },
      { id: '239', label: '239山竹村', children: [] },
      { id: '242', label: '242渠溪村', children: [] },
      { id: '244', label: '244雄辉村', children: [] },
      { id: '247', label: '247井湾村', children: [] },
      { id: '248', label: '248背冲村', children: [] }
    ]
  },
  { id: '107', label: '107翻江镇', children: [] },
  { id: '110', label: '110月山镇', children: [] }
])

const treeProps = { children: 'children', label: 'label' }

const selectedNodeId = ref('')
const selectedSubtreeIds = ref(new Set())

function walkSubtreeIds(node, set) {
  if (!node) return
  set.add(node.id)
  const children = Array.isArray(node.children) ? node.children : []
  for (const child of children) walkSubtreeIds(child, set)
}

function filterTreeNode(value, data) {
  if (!value) return true
  if (scopeSelect.value === 'selected' && selectedSubtreeIds.value.size > 0 && !selectedSubtreeIds.value.has(data?.id)) {
    return false
  }
  return String(data?.label || '').includes(value)
}

function handleTreeNodeClick(data) {
  selectedNodeId.value = data?.id || ''
  const set = new Set()
  walkSubtreeIds(data, set)
  selectedSubtreeIds.value = set
  if (districtSearch.value) treeRef.value?.filter?.(districtSearch.value)
}

watch(districtSearch, (val) => treeRef.value?.filter?.(val))

// Tabs
const activeTab = ref('fbf')

// Data Generation
function buildFbfRows() {
  const base = [
    { code: '4303811021001', name: '湘乡市月山镇白龙村一组', leader: '彭正', idNo: '430381198302125011' },
    { code: '4303811021002', name: '湘乡市月山镇白龙村二组', leader: '肖和辉', idNo: '430322195610105035' },
    { code: '4303811021003', name: '湘乡市月山镇白龙村三组', leader: '周建云', idNo: '430322197310265079' },
    { code: '4303811021004', name: '湘乡市月山镇白龙村四组', leader: '曾小枚', idNo: '430322196807195091' },
    { code: '4303811021005', name: '湘乡市月山镇白龙村十六组', leader: '杨成高', idNo: '43032219510909503X' },
    { code: '4303811021007', name: '湘乡市月山镇白龙村十五组', leader: '彭上', idNo: '430322197401225013' },
    { code: '4303811021008', name: '湘乡市月山镇白龙村十八组', leader: '吕其林', idNo: '430322196409285139' },
    { code: '4303811021010', name: '湘乡市月山镇白龙村十七组', leader: '吴建阳', idNo: '430322196401265053' },
    { code: '4303811021011', name: '湘乡市月山镇白龙村八组', leader: '王兵良', idNo: '430322196703125056' },
    { code: '4303811021013', name: '湘乡市月山镇白龙村七组', leader: '葛向日', idNo: '430322196708145072' },
    { code: '4303811021015', name: '湘乡市月山镇白龙村六组', leader: '彭红根', idNo: '430322196907285019' },
    { code: '4303811021018', name: '湘乡市月山镇白龙村九组', leader: '彭洪龙', idNo: '430381198905225054' },
    { code: '4303811021019', name: '湘乡市月山镇白龙村十一组', leader: '廖卫平', idNo: '430322197311115099' },
    { code: '4303811021020', name: '湘乡市月山镇白龙村十组', leader: '李朝晖', idNo: '430322196808305053' },
    { code: '4303811021021', name: '湘乡市月山镇白龙村十三组', leader: '王海根', idNo: '430322196903155110' },
    { code: '4303811021022', name: '湘乡市月山镇白龙村十四组', leader: '周卫中', idNo: '430322195610215074' }
  ]
  return base.map((item, i) => ({
    id: i + 1,
    fbfCode: item.code,
    fbfName: item.name,
    leaderName: item.leader,
    idNo: item.idNo,
    address: item.name
  }))
}

function buildCbfRows() {
  const base = [
    { code: '430381110210000001', name: '防止其它标...', members: 1, idNo: '430322198415160015', phone: '', addr: '防止其它标段误覆盖' },
    { code: '430381110210010036', name: '曾光明', members: 4, idNo: '430322194504205038', phone: '17377729003', addr: '湘乡市月山镇白龙村一组' },
    { code: '430381110210010037', name: '曾光耀', members: 2, idNo: '430322195409035039', phone: '13054147917', addr: '湘乡市月山镇白龙村一组' },
    { code: '430381110210010038', name: '陈光辉', members: 6, idNo: '430381195411130019', phone: '18867398758', addr: '湘乡市月山镇白龙村一组' },
    { code: '430381110210010039', name: '陈光耀', members: 7, idNo: '430322196301155033', phone: '16670780822', addr: '湘乡市月山镇白龙村一组' },
    { code: '430381110210010040', name: '陈中建', members: 5, idNo: '43038119660918501X', phone: '18073209563', addr: '湘乡市月山镇白龙村一组' },
    { code: '430381110210010041', name: '陈建平', members: 3, idNo: '430322195605115028', phone: '17369275091', addr: '湘乡市月山镇白龙村一组' },
    { code: '430381110210010042', name: '陈光明', members: 6, idNo: '430322196907125074', phone: '18773275193', addr: '湘乡市月山镇白龙村一组' },
    { code: '430381110210010043', name: '吴爱萍', members: 1, idNo: '342830197110065440', phone: '15616273331', addr: '湘乡市月山镇白龙村一组' },
    { code: '430381110210010044', name: '陈哲宇', members: 2, idNo: '430381200308280178', phone: '13237321758', addr: '湘乡市月山镇白龙村一组' },
    { code: '430381110210010045', name: '贺房根', members: 4, idNo: '430322194509145038', phone: '17769329018', addr: '湘乡市月山镇白龙村一组' },
    { code: '430381110210010046', name: '贺桥生', members: 1, idNo: '430322196803175050', phone: '17507325218', addr: '湘乡市月山镇白龙村一组' },
    { code: '430381110210010047', name: '廖建超', members: 3, idNo: '430322197603195078', phone: '15173226768', addr: '湘乡市月山镇白龙村一组' },
    { code: '430381110210010048', name: '廖凤良', members: 1, idNo: '430322196310265111', phone: '19973263590', addr: '湘乡市月山镇白龙村一组' },
    { code: '430381110210010049', name: '成国清', members: 6, idNo: '430322195606045068', phone: '13407428899', addr: '湘乡市月山镇白龙村一组' },
    { code: '430381110210010050', name: '廖建华', members: 8, idNo: '430322196008255094', phone: '18608486751', addr: '湘乡市月山镇白龙村一组' }
  ]
  return base.map((item, i) => ({
    id: i + 1,
    cbfCode: item.code,
    cbfName: item.name,
    memberCount: item.members,
    idNo: item.idNo,
    phone: item.phone,
    address: item.addr
  }))
}

function buildJtcyRows() {
  const base = [
    { code: '430381110210000001', host: '防止其它标...', name: '防止其它标段...', sex: '男', type: '居民身份证', idNo: '430322198415160015', relation: '户主', phone: '', memo: '' },
    { code: '430381110210010036', host: '曾光明', name: '曾庆泉', sex: '男', type: '居民身份证', idNo: '43038120060206015X', relation: '孙子', phone: '', memo: '其他' },
    { code: '430381110210010036', host: '曾光明', name: '曾光明', sex: '男', type: '居民身份证', idNo: '430322194504205038', relation: '户主', phone: '', memo: '其他' },
    { code: '430381110210010036', host: '曾光明', name: '曾辰馨', sex: '女', type: '居民身份证', idNo: '430381201604162584', relation: '孙女', phone: '', memo: '其他' },
    { code: '430381110210010036', host: '曾光明', name: '彭淑媛', sex: '女', type: '居民身份证', idNo: '430381198707195026', relation: '儿媳', phone: '', memo: '' },
    { code: '430381110210010037', host: '曾光耀', name: '曾光耀', sex: '男', type: '居民身份证', idNo: '430322195409035039', relation: '户主', phone: '', memo: '其他' },
    { code: '430381110210010037', host: '曾光耀', name: '王秋桂', sex: '女', type: '居民身份证', idNo: '430322195408055062', relation: '配偶', phone: '', memo: '' },
    { code: '430381110210010038', host: '陈光辉', name: '陈光辉', sex: '男', type: '居民身份证', idNo: '430381195411130019', relation: '户主', phone: '', memo: '' },
    { code: '430381110210010038', host: '陈光辉', name: '袁小丰', sex: '女', type: '居民身份证', idNo: '430322196712115087', relation: '配偶', phone: '17726132365', memo: '' },
    { code: '430381110210010038', host: '陈光辉', name: '陈星星', sex: '男', type: '居民身份证', idNo: '430381199404235013', relation: '子', phone: '18926998862', memo: '' },
    { code: '430381110210010038', host: '陈光辉', name: '陈妍薇', sex: '女', type: '居民身份证', idNo: '43038120190602024X', relation: '孙女', phone: '18926998862', memo: '' },
    { code: '430381110210010038', host: '陈光辉', name: '冯雅妮', sex: '女', type: '居民身份证', idNo: '430321199610144941', relation: '儿媳', phone: '17773298375', memo: '' },
    { code: '430381110210010038', host: '陈光辉', name: '陈鸿毅', sex: '男', type: '居民身份证', idNo: '430381202108250053', relation: '孙子', phone: '18926998862', memo: '' },
    { code: '430381110210010039', host: '陈光耀', name: '曾淑晗', sex: '女', type: '户口簿', idNo: '43038120031126008X', relation: '外孙女', phone: '', memo: '' },
    { code: '430381110210010039', host: '陈光耀', name: '曾琦', sex: '男', type: '居民身份证', idNo: '430381201507140092', relation: '外孙子', phone: '', memo: '' },
    { code: '430381110210010039', host: '陈光耀', name: '陈燕', sex: '女', type: '户口簿', idNo: '430381198509115048', relation: '女', phone: '', memo: '' }
  ]
  return base.map((item, i) => ({
    id: i + 1,
    cbfCode: item.code,
    hostName: item.host,
    memberName: item.name,
    sex: item.sex,
    idType: item.type,
    idNo: item.idNo,
    relation: item.relation,
    phone: item.phone,
    memo: item.memo
  }))
}

function buildDkRows() {
  const base = [
    { code: '4303811102100100001', name: '大大托', type: '承包地块', area: '0.78', e: '空地', s: '空地', w: '空地', n: '空地', fbf: '湘乡市月山镇白龙村一组' },
    { code: '4303811102100100002', name: '三字坪', type: '承包地块', area: '0.75', e: '空地', s: '空地', w: '空地', n: '空地', fbf: '湘乡市月山镇白龙村一组' },
    { code: '4303811102100100003', name: '童子弯', type: '承包地块', area: '1.34', e: '空地', s: '空地', w: '空地', n: '空地', fbf: '湘乡市月山镇白龙村一组' },
    { code: '4303811102100100004', name: '大大托', type: '承包地块', area: '0.61', e: '空地', s: '空地', w: '空地', n: '河', fbf: '湘乡市月山镇白龙村一组' },
    { code: '4303811102100100005', name: '童子弯', type: '承包地块', area: '1.21', e: '空地', s: '空地', w: '空地', n: '空地', fbf: '湘乡市月山镇白龙村一组' },
    { code: '4303811102100100006', name: '沙山', type: '承包地块', area: '1.92', e: '空地', s: '空地', w: '田坎', n: '空地', fbf: '湘乡市月山镇白龙村一组' },
    { code: '4303811102100100007', name: '三字坪', type: '承包地块', area: '1.35', e: '空地', s: '空地', w: '空地', n: '空地', fbf: '湘乡市月山镇白龙村一组' },
    { code: '4303811102100100008', name: '大大托', type: '承包地块', area: '0.42', e: '空地', s: '山', w: '空地', n: '山', fbf: '湘乡市月山镇白龙村一组' },
    { code: '4303811102100100009', name: '大大托', type: '承包地块', area: '0.25', e: '空地', s: '空地', w: '空地', n: '空地', fbf: '湘乡市月山镇白龙村一组' },
    { code: '4303811102100100010', name: '童子弯', type: '承包地块', area: '0.99', e: '空地', s: '空地', w: '空地', n: '空地', fbf: '湘乡市月山镇白龙村一组' },
    { code: '4303811102100100011', name: '童子弯', type: '承包地块', area: '1.31', e: '房屋', s: '空地', w: '空地', n: '空地', fbf: '湘乡市月山镇白龙村一组' },
    { code: '4303811102100100012', name: '童子弯大老丘', type: '承包地块', area: '0.86', e: '空地', s: '空地', w: '空地', n: '空地', fbf: '湘乡市月山镇白龙村一组' },
    { code: '4303811102100100013', name: '童子弯长三亩', type: '承包地块', area: '1.66', e: '路', s: '空地', w: '空地', n: '空地', fbf: '湘乡市月山镇白龙村一组' },
    { code: '4303811102100100014', name: '三字坪', type: '承包地块', area: '1.74', e: '空地', s: '荒地', w: '空地', n: '空地', fbf: '湘乡市月山镇白龙村一组' },
    { code: '4303811102100100015', name: '杨岭段', type: '承包地块', area: '0.64', e: '水塘', s: '空地', w: '田坎', n: '空地', fbf: '湘乡市月山镇白龙村一组' },
    { code: '4303811102100100016', name: '大大托', type: '承包地块', area: '0.57', e: '空地', s: '空地', w: '空地', n: '河', fbf: '湘乡市月山镇白龙村一组' }
  ]
  return base.map((item, i) => ({
    id: i + 1,
    dkCode: item.code,
    dkName: item.name,
    dkType: item.type,
    area: item.area,
    east: item.e,
    south: item.s,
    west: item.w,
    north: item.n,
    fbfName: item.fbf
  }))
}

function buildCbhtRows() {
  const base = [
    { code: '430381110210010036J', cbf: '曾光明', fbf: '湘乡市月山镇白龙村一组', start: '20261201', end: '20561130', type: '家庭承包', count: 3, area: '2.87' },
    { code: '430381110210010037J', cbf: '曾光耀', fbf: '湘乡市月山镇白龙村一组', start: '20261201', end: '20561130', type: '家庭承包', count: 2, area: '1.82' },
    { code: '430381110210010038J', cbf: '陈光辉', fbf: '湘乡市月山镇白龙村一组', start: '20261201', end: '20561130', type: '家庭承包', count: 1, area: '1.92' },
    { code: '430381110210010039J', cbf: '陈光耀', fbf: '湘乡市月山镇白龙村一组', start: '20261201', end: '20561130', type: '家庭承包', count: 1, area: '1.35' },
    { code: '430381110210010040J', cbf: '陈中建', fbf: '湘乡市月山镇白龙村一组', start: '20261201', end: '20561130', type: '家庭承包', count: 4, area: '2.97' },
    { code: '430381110210010041J', cbf: '陈建平', fbf: '湘乡市月山镇白龙村一组', start: '20261201', end: '20561130', type: '家庭承包', count: 2, area: '2.52' },
    { code: '430381110210010042J', cbf: '陈光明', fbf: '湘乡市月山镇白龙村一组', start: '20261201', end: '20561130', type: '家庭承包', count: 1, area: '1.74' },
    { code: '430381110210010043J', cbf: '吴爱萍', fbf: '湘乡市月山镇白龙村一组', start: '20261201', end: '20561130', type: '家庭承包', count: 4, area: '2.22' },
    { code: '430381110210010044J', cbf: '陈哲宇', fbf: '湘乡市月山镇白龙村一组', start: '20261201', end: '20561130', type: '家庭承包', count: 2, area: '1.61' },
    { code: '430381110210010045J', cbf: '贺房根', fbf: '湘乡市月山镇白龙村一组', start: '20261201', end: '20561130', type: '家庭承包', count: 2, area: '2.14' },
    { code: '430381110210010046J', cbf: '贺桥生', fbf: '湘乡市月山镇白龙村一组', start: '20261201', end: '20561130', type: '家庭承包', count: 1, area: '1.14' },
    { code: '430381110210010047J', cbf: '廖建超', fbf: '湘乡市月山镇白龙村一组', start: '20261201', end: '20561130', type: '家庭承包', count: 1, area: '1.12' },
    { code: '430381110210010048J', cbf: '廖凤良', fbf: '湘乡市月山镇白龙村一组', start: '20261201', end: '20561130', type: '家庭承包', count: 2, area: '1.95' },
    { code: '430381110210010049J', cbf: '成国清', fbf: '湘乡市月山镇白龙村一组', start: '20261201', end: '20561130', type: '家庭承包', count: 2, area: '2.48' },
    { code: '430381110210010050J', cbf: '廖建华', fbf: '湘乡市月山镇白龙村一组', start: '20261201', end: '20561130', type: '家庭承包', count: 2, area: '2.08' },
    { code: '430381110210010051J', cbf: '廖建平', fbf: '湘乡市月山镇白龙村一组', start: '20261201', end: '20561130', type: '家庭承包', count: 5, area: '5.36' }
  ]
  return base.map((item, i) => ({
    id: i + 1,
    contractCode: item.code,
    cbfName: item.cbf,
    fbfName: item.fbf,
    startDate: item.start,
    endDate: item.end,
    type: item.type,
    dkCount: item.count,
    contractArea: item.area
  }))
}

function buildWqqRows() {
  return Array.from({ length: 15 }).map((_, i) => ({
    id: i + 1,
    dkCode: `4303811102100199${String(i).padStart(3, '0')}`,
    dkName: i % 2 === 0 ? '未名地块' : '争议地块',
    dkType: '承包地块',
    area: (Math.random() * 5).toFixed(2),
    east: '空地',
    south: '空地',
    west: '空地',
    north: '空地',
    fbfName: '湘乡市月山镇白龙村一组',
    memo: i % 3 === 0 ? '权属不清' : '未登记'
  }))
}

const fbfRows = ref(buildFbfRows())
const cbfRows = ref(buildCbfRows())
const jtcyRows = ref(buildJtcyRows())
const dkRows = ref(buildDkRows())
const cbhtRows = ref(buildCbhtRows())
const wqqRows = ref(buildWqqRows())

// Filter Logic for each tab (reusing same logic pattern)
const fbfFilter = ref({})
const cbfFilter = ref({})
const jtcyFilter = ref({})
const dkFilter = ref({})
const cbhtFilter = ref({})
const wqqFilter = ref({})

function filterCommon(rows, filters) {
  return rows.filter(r => {
    for (const key in filters) {
      if (filters[key] && !String(r[key] || '').includes(filters[key])) return false
    }
    return true
  })
}

const fbfFiltered = computed(() => filterCommon(fbfRows.value, fbfFilter.value))
const cbfFiltered = computed(() => filterCommon(cbfRows.value, cbfFilter.value))
const jtcyFiltered = computed(() => filterCommon(jtcyRows.value, jtcyFilter.value))
const dkFiltered = computed(() => filterCommon(dkRows.value, dkFilter.value))
const cbhtFiltered = computed(() => filterCommon(cbhtRows.value, cbhtFilter.value))
const wqqFiltered = computed(() => filterCommon(wqqRows.value, wqqFilter.value))

// Pagination
const pageSize = ref(20)
const currentPage = ref(1)
const jumpPage = ref(1)

const activeRows = computed(() => {
  switch (activeTab.value) {
    case 'fbf': return fbfFiltered.value
    case 'cbf': return cbfFiltered.value
    case 'jtcy': return jtcyFiltered.value
    case 'dk': return dkFiltered.value
    case 'cbht': return cbhtFiltered.value
    case 'wqq': return wqqFiltered.value
    default: return []
  }
})

const total = computed(() => activeRows.value.length)
const pageRows = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  return activeRows.value.slice(start, start + pageSize.value)
})

watch([pageSize, activeTab, selectedNodeId, scopeSelect], () => {
  currentPage.value = 1
  jumpPage.value = 1
  // Reset filters when switching? Maybe not required, but good practice
})

function doJump() {
  const maxPage = Math.max(1, Math.ceil(total.value / pageSize.value))
  const next = Math.min(Math.max(1, Number(jumpPage.value || 1)), maxPage)
  currentPage.value = next
}

// Handlers
function handleRefresh() {
  ElMessage.success('已刷新')
}
function handleIconAction(name) {
  ElMessage.success(name)
}
function handleViewHistory(row) {
  ElMessage.success(`查看 ${row.fbfName} 历史记录`)
}
function handleSwap() {
  ElMessage.success('换组/换村操作')
}
function handleExportContractor() {
  ElMessage.success('导出承包方清单')
}
function handleExportLand() {
  ElMessage.success('导出确权地清单')
}

// Layout
const tableRef = ref(null)
const contentWrapEl = ref(null)
let resizeObserver = null
function ensureTableLayout() {
  nextTick(() => tableRef.value?.doLayout?.())
}

onMounted(async () => {
  await nextTick()
  const defaultNode = treeData.value?.[0]?.children?.find?.((v) => v.id === '203') || treeData.value?.[0]
  handleTreeNodeClick(defaultNode)
  treeRef.value?.setCurrentKey?.(defaultNode?.id)
  ensureTableLayout()
  if (contentWrapEl.value && !resizeObserver) {
    resizeObserver = new ResizeObserver(() => ensureTableLayout())
    resizeObserver.observe(contentWrapEl.value)
  }
})

onBeforeUnmount(() => {
  resizeObserver?.disconnect?.()
  resizeObserver = null
})
</script>

<template>
  <div class="h-full w-full flex overflow-hidden bg-white">
    <!-- Left Tree -->
    <div class="w-72 border-r border-gray-200 bg-white flex flex-col">
      <div class="p-2 border-b border-gray-200">
        <el-select v-model="scopeSelect" size="small" class="w-full" placeholder="选中的节点中搜索">
          <el-option label="选中的节点中搜索" value="selected" />
          <el-option label="全部" value="all" />
        </el-select>
        <el-input v-model="districtSearch" size="small" class="w-full mt-2" clearable placeholder="搜索" />
      </div>
      <el-scrollbar class="flex-1">
        <div class="p-2">
          <el-tree
            ref="treeRef"
            :data="treeData"
            node-key="id"
            :props="treeProps"
            :filter-node-method="filterTreeNode"
            default-expand-all
            highlight-current
            :expand-on-click-node="false"
            @node-click="handleTreeNodeClick"
          />
        </div>
      </el-scrollbar>
    </div>

    <!-- Right Content -->
    <div ref="contentWrapEl" class="flex-1 overflow-hidden flex flex-col">
      <div class="border-b border-gray-200 px-2 pt-2">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="发包方" name="fbf" />
          <el-tab-pane label="承包方" name="cbf" />
          <el-tab-pane label="家庭成员" name="jtcy" />
          <el-tab-pane label="地块" name="dk" />
          <el-tab-pane label="承包合同" name="cbht" />
          <el-tab-pane label="未确权耕地园地" name="wqq" />
        </el-tabs>
      </div>

      <!-- Toolbar -->
      <div class="flex items-center justify-between px-3 py-2 border-b border-gray-200">
        <div class="flex items-center gap-2">
          <!-- Dynamic Buttons based on Active Tab -->
          <template v-if="activeTab === 'fbf'">
            <el-button :icon="Refresh" circle @click="handleRefresh" />
          </template>
          <template v-if="activeTab === 'cbf'">
            <el-button type="success" size="small" :icon="Refresh" @click="handleSwap">换组/换村</el-button>
            <el-button type="success" size="small" :icon="Download" @click="handleExportContractor">导出承包方清单</el-button>
          </template>
          <template v-if="activeTab === 'dk'">
            <el-button type="success" size="small" :icon="Download" @click="handleExportLand">导出确权地清单</el-button>
          </template>
        </div>
        <div class="flex items-center gap-2">
          <el-button :icon="Grid" circle size="small" @click="handleIconAction('已切换显示')" />
          <el-button :icon="Download" circle size="small" @click="handleIconAction('导出')" />
          <el-button :icon="Printer" circle size="small" @click="handleIconAction('打印')" />
        </div>
      </div>

      <!-- Table Area -->
      <div class="flex-1 p-3 overflow-hidden">
        <div class="h-full border border-gray-200 flex flex-col">
          <div class="flex-1 overflow-hidden">
            <!-- FBF Table -->
            <el-table v-if="activeTab === 'fbf'" ref="tableRef" :data="pageRows" height="100%" border stripe>
              <el-table-column label="#" width="56" align="center">
                <template #default="{ $index }">
                  {{ (currentPage - 1) * pageSize + $index + 1 }}
                </template>
              </el-table-column>
              <el-table-column prop="fbfCode" label="发包方编码" min-width="160" show-overflow-tooltip>
                <template #header>
                  <div class="flex items-center gap-1">
                    <span>发包方编码</span>
                    <el-icon class="text-gray-400"><Search /></el-icon>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="fbfName" label="发包方名称" min-width="220" show-overflow-tooltip>
                <template #header>
                  <div class="flex items-center gap-1">
                    <span>发包方名称</span>
                    <el-icon class="text-gray-400"><Search /></el-icon>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="leaderName" label="负责人姓名" width="120" show-overflow-tooltip>
                <template #header>
                  <div class="flex items-center gap-1">
                    <span>负责人姓名</span>
                    <el-icon class="text-gray-400"><Search /></el-icon>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="idNo" label="证件号码" width="180" show-overflow-tooltip>
                 <template #header>
                  <div class="flex items-center gap-1">
                    <span>证件号码</span>
                    <el-icon class="text-gray-400"><Search /></el-icon>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="发包方地址" min-width="200" show-overflow-tooltip />
              <el-table-column label="" width="120" align="center" fixed="right">
                <template #default="{ row }">
                  <el-button type="success" size="small" @click="handleViewHistory(row)">查看历史记录</el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- CBF Table -->
            <el-table v-if="activeTab === 'cbf'" ref="tableRef" :data="pageRows" height="100%" border stripe>
              <el-table-column type="selection" width="46" align="center" />
              <el-table-column label="#" width="56" align="center">
                <template #default="{ $index }">
                  {{ (currentPage - 1) * pageSize + $index + 1 }}
                </template>
              </el-table-column>
              <el-table-column prop="cbfCode" label="编码" min-width="190" show-overflow-tooltip>
                <template #header>
                  <div class="flex items-center gap-1">
                    <span>编码</span>
                    <el-icon class="text-gray-400"><Search /></el-icon>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="cbfName" label="名称" width="120" show-overflow-tooltip>
                <template #header>
                  <div class="flex items-center gap-1">
                    <span>名称</span>
                    <el-icon class="text-gray-400"><Search /></el-icon>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="memberCount" label="成员数" width="80" />
              <el-table-column prop="idNo" label="证件号" width="180" show-overflow-tooltip>
                <template #header>
                  <div class="flex items-center gap-1">
                    <span>证件号</span>
                    <el-icon class="text-gray-400"><Search /></el-icon>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="phone" label="联系电话" width="130" show-overflow-tooltip />
              <el-table-column prop="address" label="地址" min-width="200" show-overflow-tooltip />
              <el-table-column label="" width="60" align="center" fixed="right">
                <template #default>
                  <el-icon class="text-gray-500 cursor-pointer"><Document /></el-icon>
                </template>
              </el-table-column>
            </el-table>

            <!-- JTCY Table -->
            <el-table v-if="activeTab === 'jtcy'" ref="tableRef" :data="pageRows" height="100%" border stripe>
              <el-table-column label="#" width="56" align="center">
                <template #default="{ $index }">
                  {{ (currentPage - 1) * pageSize + $index + 1 }}
                </template>
              </el-table-column>
              <el-table-column prop="cbfCode" label="承包方编码" min-width="190" show-overflow-tooltip>
                <template #header>
                  <div class="flex items-center gap-1">
                    <span>承包方编码</span>
                    <el-icon class="text-gray-400"><Search /></el-icon>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="hostName" label="户主名称" width="120" show-overflow-tooltip>
                <template #header>
                  <div class="flex items-center gap-1">
                    <span>户主名称</span>
                    <el-icon class="text-gray-400"><Search /></el-icon>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="memberName" label="成员姓名" width="120" show-overflow-tooltip>
                <template #header>
                  <div class="flex items-center gap-1">
                    <span>成员姓名</span>
                    <el-icon class="text-gray-400"><Search /></el-icon>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="sex" label="成员性别" width="100" />
              <el-table-column prop="idType" label="成员证件类型" width="120" />
              <el-table-column prop="idNo" label="成员证件号码" width="180" show-overflow-tooltip>
                <template #header>
                  <div class="flex items-center gap-1">
                    <span>成员证件号码</span>
                    <el-icon class="text-gray-400"><Search /></el-icon>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="relation" label="与户主关系" width="120" />
              <el-table-column prop="phone" label="联系电话" width="120" />
              <el-table-column prop="memo" label="成员备注" min-width="120" />
              <el-table-column label="成员备注..." min-width="120" />
            </el-table>

            <!-- DK Table -->
            <el-table v-if="activeTab === 'dk'" ref="tableRef" :data="pageRows" height="100%" border stripe>
              <el-table-column label="#" width="56" align="center">
                <template #default="{ $index }">
                  {{ (currentPage - 1) * pageSize + $index + 1 }}
                </template>
              </el-table-column>
              <el-table-column prop="dkCode" label="地块编码" min-width="190" show-overflow-tooltip>
                <template #header>
                  <div class="flex items-center gap-1">
                    <span>地块编码</span>
                    <el-icon class="text-gray-400"><Search /></el-icon>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="dkName" label="地块名称" width="140" show-overflow-tooltip>
                <template #header>
                  <div class="flex items-center gap-1">
                    <span>地块名称</span>
                    <el-icon class="text-gray-400"><Search /></el-icon>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="dkType" label="地块类别" width="120" />
              <el-table-column prop="area" label="实测面积(亩)" width="120">
                <template #header>
                  <div class="flex items-center gap-1">
                    <span>实测面积(亩)</span>
                    <el-icon class="text-gray-400"><Search /></el-icon>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="east" label="东至" width="100" />
              <el-table-column prop="south" label="南至" width="100" />
              <el-table-column prop="west" label="西至" width="100" />
              <el-table-column prop="north" label="北至" width="100" />
              <el-table-column prop="fbfName" label="所属发包方" min-width="200" show-overflow-tooltip />
            </el-table>

            <!-- CBHT Table -->
            <el-table v-if="activeTab === 'cbht'" ref="tableRef" :data="pageRows" height="100%" border stripe>
              <el-table-column label="#" width="56" align="center">
                <template #default="{ $index }">
                  {{ (currentPage - 1) * pageSize + $index + 1 }}
                </template>
              </el-table-column>
              <el-table-column prop="contractCode" label="承包合同编码" min-width="190" show-overflow-tooltip sortable>
                <template #header>
                  <div class="flex items-center gap-1">
                    <span>承包合同编码</span>
                    <el-icon class="text-gray-400"><Search /></el-icon>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="cbfName" label="承包方" width="120" show-overflow-tooltip>
                <template #header>
                  <div class="flex items-center gap-1">
                    <span>承包方</span>
                    <el-icon class="text-gray-400"><Search /></el-icon>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="fbfName" label="发包方" min-width="200" show-overflow-tooltip>
                <template #header>
                  <div class="flex items-center gap-1">
                    <span>发包方</span>
                    <el-icon class="text-gray-400"><Search /></el-icon>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="startDate" label="承包期限起" width="120" />
              <el-table-column prop="endDate" label="承包期限止" width="120" />
              <el-table-column prop="type" label="承包方式" width="100" />
              <el-table-column prop="dkCount" label="地块数" width="100">
                <template #header>
                  <div class="flex items-center gap-1">
                    <span>地块数</span>
                    <el-icon class="text-gray-400"><Search /></el-icon>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="contractArea" label="合同面积" width="120" sortable>
                <template #header>
                  <div class="flex items-center gap-1">
                    <span>合同面积</span>
                    <el-icon class="text-gray-400"><Search /></el-icon>
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <!-- WQQ Table -->
            <el-table v-if="activeTab === 'wqq'" ref="tableRef" :data="pageRows" height="100%" border stripe>
              <el-table-column label="#" width="56" align="center">
                <template #default="{ $index }">
                  {{ (currentPage - 1) * pageSize + $index + 1 }}
                </template>
              </el-table-column>
              <el-table-column prop="dkCode" label="地块编码" min-width="190" show-overflow-tooltip>
                <template #header>
                  <div class="flex items-center gap-1">
                    <span>地块编码</span>
                    <el-icon class="text-gray-400"><Search /></el-icon>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="dkName" label="地块名称" width="140" show-overflow-tooltip>
                <template #header>
                  <div class="flex items-center gap-1">
                    <span>地块名称</span>
                    <el-icon class="text-gray-400"><Search /></el-icon>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="dkType" label="地块类别" width="120" />
              <el-table-column prop="area" label="实测面积(亩)" width="120">
                <template #header>
                  <div class="flex items-center gap-1">
                    <span>实测面积(亩)</span>
                    <el-icon class="text-gray-400"><Search /></el-icon>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="east" label="东至" width="100" />
              <el-table-column prop="south" label="南至" width="100" />
              <el-table-column prop="west" label="西至" width="100" />
              <el-table-column prop="north" label="北至" width="100" />
              <el-table-column prop="fbfName" label="所属发包方" min-width="200" show-overflow-tooltip />
              <el-table-column prop="memo" label="说明" min-width="150" show-overflow-tooltip />
            </el-table>
          </div>

          <!-- Pagination -->
          <div class="h-12 px-2 border-t border-gray-200 flex items-center justify-between">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="total"
              layout="prev, pager, next"
              background
              small
            />
            <div class="flex items-center gap-2 text-sm text-gray-700">
              <div>到第</div>
              <el-input-number v-model="jumpPage" :min="1" :max="Math.max(1, Math.ceil(total / pageSize))" size="small" controls-position="right" class="!w-24" />
              <div>页</div>
              <el-button size="small" type="primary" @click="doJump">确定</el-button>
              <div class="ml-2">共 {{ total }} 条</div>
              <el-select v-model="pageSize" size="small" class="!w-24">
                <el-option :label="`10条/页`" :value="10" />
                <el-option :label="`20条/页`" :value="20" />
                <el-option :label="`50条/页`" :value="50" />
                <el-option :label="`100条/页`" :value="100" />
              </el-select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
:deep(.el-tree-node__content) {
  height: 26px;
}
:deep(.el-tabs__header) {
  margin-bottom: 0;
}
:deep(.el-tabs__nav-wrap::after) {
  height: 1px;
}
</style>
