<script setup>
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Box,
  CircleClose,
  Delete,
  Download,
  FolderOpened,
  Grid,
  Paperclip,
  Refresh,
  Search,
  Setting,
  View
} 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: [] },
      { 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: '220-01', label: '[01] 第一民主组', children: [] },
          { id: '220-02', label: '[02] 第二民主组', children: [] },
          { id: '220-03', label: '[03] 第三民主组', children: [] },
          { id: '220-04', label: '[04] 第四民主组', children: [] },
          { id: '220-05', label: '[05] 第五民主组', children: [] },
          { id: '220-06', label: '[06] 第六民主组', children: [] },
          { id: '220-07', label: '[07] 第七民主组', children: [] },
          { id: '220-08', label: '[08] 第八民主组', 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(null)

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 && !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))

const tableRef = ref(null)
const selectedRows = ref([])

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

const allRows = ref([
  {
    id: 1,
    districtId: '220-01',
    districtName: '湘乡市壶天镇合东村第一民主组',
    contractorCode: '430381106220060086',
    contractorName: '叶谷平',
    changeTime: '2025-09-01 18:53:17',
    processStatus: '审核通过',
    changeContent: '内业变更：修改1名家庭成员信息',
    rejectReason: ''
  },
  {
    id: 2,
    districtId: '220-02',
    districtName: '湘乡市壶天镇合东村第二民主组',
    contractorCode: '430381106220070078',
    contractorName: '贺汉秋',
    changeTime: '2025-07-23 10:28:10',
    processStatus: '内业已审核',
    changeContent: '新增2名家庭成员',
    rejectReason: ''
  },
  {
    id: 3,
    districtId: '220-03',
    districtName: '湘乡市壶天镇合东村第三民主组',
    contractorCode: '430381106220070113',
    contractorName: '彭吉良',
    changeTime: '2025-07-21 09:27:23',
    processStatus: '内业已审核',
    changeContent: '将地块[00074]后背塘脚调整',
    rejectReason: ''
  },
  {
    id: 4,
    districtId: '220-04',
    districtName: '湘乡市壶天镇合东村第四民主组',
    contractorCode: '430381106220070047',
    contractorName: '叶长初',
    changeTime: '2025-07-16 10:20:20',
    processStatus: '内业已审核',
    changeContent: '修改1名家庭成员：姓名/证件号',
    rejectReason: ''
  },
  {
    id: 5,
    districtId: '220-05',
    districtName: '湘乡市壶天镇合东村第五民主组',
    contractorCode: '430381106220070103',
    contractorName: '傅桂平',
    changeTime: '2025-06-30 11:02:48',
    processStatus: '内业已审核',
    changeContent: '修改1名家庭成员：与户主关系',
    rejectReason: ''
  },
  {
    id: 6,
    districtId: '220-06',
    districtName: '湘乡市壶天镇合东村第六民主组',
    contractorCode: '430381106220040068',
    contractorName: '郭洪生',
    changeTime: '2025-06-30 10:58:20',
    processStatus: '内业已审核',
    changeContent: '删除1名家庭成员',
    rejectReason: ''
  },
  {
    id: 7,
    districtId: '220-07',
    districtName: '湘乡市壶天镇合东村第七民主组',
    contractorCode: '430381106220030048',
    contractorName: '贺冬贤',
    changeTime: '2025-06-27 16:57:22',
    processStatus: '内业已审核',
    changeContent: '承包方联系电话更新',
    rejectReason: ''
  },
  {
    id: 8,
    districtId: '220-08',
    districtName: '湘乡市壶天镇合东村第八民主组',
    contractorCode: '430381106220030042',
    contractorName: '叶钢仁',
    changeTime: '2025-06-27 16:47:09',
    processStatus: '内业已审核',
    changeContent: '新增1名家庭成员',
    rejectReason: ''
  },
  {
    id: 9,
    districtId: '220-01',
    districtName: '湘乡市壶天镇合东村第一民主组',
    contractorCode: '430381106220030040',
    contractorName: '叶武仁',
    changeTime: '2025-06-27 16:42:15',
    processStatus: '审核通过',
    changeContent: '无任何修改',
    rejectReason: ''
  },
  {
    id: 10,
    districtId: '220-02',
    districtName: '湘乡市壶天镇合东村第二民主组',
    contractorCode: '430381106220030038',
    contractorName: '叶跃仁',
    changeTime: '2025-06-27 16:33:48',
    processStatus: '审核通过',
    changeContent: '无任何修改',
    rejectReason: ''
  },
  {
    id: 11,
    districtId: '220-03',
    districtName: '湘乡市壶天镇合东村第三民主组',
    contractorCode: '430381106220030049',
    contractorName: '董奇春',
    changeTime: '2025-06-27 16:26:57',
    processStatus: '内业已审核',
    changeContent: '由承包方董秋春申报修正家庭成员信息',
    rejectReason: ''
  },
  {
    id: 12,
    districtId: '220-04',
    districtName: '湘乡市壶天镇合东村第四民主组',
    contractorCode: '430381106220070073',
    contractorName: '贺爱军',
    changeTime: '2025-06-27 16:14:37',
    processStatus: '内业已审核',
    changeContent: '新增1名家庭成员',
    rejectReason: ''
  },
  {
    id: 13,
    districtId: '220-05',
    districtName: '湘乡市壶天镇合东村第五民主组',
    contractorCode: '430381106220070046',
    contractorName: '叶志明',
    changeTime: '2025-06-27 15:53:22',
    processStatus: '内业已审核',
    changeContent: '修改1名家庭成员：证件有效期',
    rejectReason: ''
  },
  {
    id: 14,
    districtId: '220-06',
    districtName: '湘乡市壶天镇合东村第六民主组',
    contractorCode: '430381106220070045',
    contractorName: '叶雪明',
    changeTime: '2025-06-27 15:51:43',
    processStatus: '审核通过',
    changeContent: '修改1名家庭成员：联系方式',
    rejectReason: ''
  },
  {
    id: 15,
    districtId: '220-07',
    districtName: '湘乡市壶天镇合东村第七民主组',
    contractorCode: '430381106220030019',
    contractorName: '胡小世',
    changeTime: '2025-06-27 14:50:06',
    processStatus: '内业已审核',
    changeContent: '新增1名家庭成员',
    rejectReason: ''
  },
  {
    id: 16,
    districtId: '220-08',
    districtName: '湘乡市壶天镇合东村第八民主组',
    contractorCode: '430381106220060079',
    contractorName: '梅勇',
    changeTime: '2025-06-24 10:25:30',
    processStatus: '内业已审核',
    changeContent: '承包方地址更新',
    rejectReason: ''
  },
  {
    id: 17,
    districtId: '220-01',
    districtName: '湘乡市壶天镇合东村第一民主组',
    contractorCode: '430381106220030030',
    contractorName: '叶志定',
    changeTime: '2025-06-24 09:39:09',
    processStatus: '内业已审核',
    changeContent: '删除1名家庭成员',
    rejectReason: ''
  },
  {
    id: 18,
    districtId: '220-02',
    districtName: '湘乡市壶天镇合东村第二民主组',
    contractorCode: '430381106220060058',
    contractorName: '叶茂东',
    changeTime: '2025-06-24 08:56:16',
    processStatus: '内业已审核',
    changeContent: '新增1名家庭成员',
    rejectReason: ''
  }
])

const filteredRows = computed(() => {
  const ids = selectedSubtreeIds.value
  if (!ids || ids.size === 0) return allRows.value
  return allRows.value.filter((r) => ids.has(r.districtId) || ids.has(r.districtId?.split?.('-')?.[0]) || ids.has(r.districtId?.slice?.(0, 3)))
})

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

watch([pageSize, selectedNodeId], () => {
  currentPage.value = 1
  jumpPage.value = 1
})

function handleSelectionChange(rows) {
  selectedRows.value = rows || []
}

function handleRefresh() {
  selectedRows.value = []
  tableRef.value?.clearSelection?.()
  ElMessage.success('刷新成功')
}

const progressDialogOpen = ref(false)
const progressForm = ref({
  step: '内业已审核',
  remark: ''
})

const detailDialogOpen = ref(false)
const detailActiveTab = ref('base')
const detailData = ref(null)
const detailFiles = ref([])
const detailFlow = ref([])

function openProgressDialog() {
  if (!selectedRows.value.length) {
    ElMessage.warning('请先选择数据')
    return
  }
  progressDialogOpen.value = true
}

function saveProgress() {
  const next = String(progressForm.value.step || '')
  selectedRows.value.forEach((row) => {
    const idx = allRows.value.findIndex((r) => r.id === row.id)
    if (idx >= 0) allRows.value[idx] = { ...allRows.value[idx], processStatus: next }
  })
  progressDialogOpen.value = false
  ElMessage.success('设置成功')
}

async function handleRestore() {
  await ElMessageBox.confirm('确认进行数据还原？', '提示', { type: 'warning', confirmButtonText: '确定', cancelButtonText: '取消' })
  ElMessage.success('操作成功')
}

async function handleExport() {
  ElMessage.success('导出任务已提交')
}

async function handleClearBusiness() {
  await ElMessageBox.confirm('确认清理业务记录？', '提示', { type: 'warning', confirmButtonText: '确定', cancelButtonText: '取消' })
  ElMessage.success('清理成功')
}

function makeDetailFiles(row) {
  const base = String(row?.contractorCode || '').slice(-6) || '000000'
  return [
    { name: `身份证正反面_${base}.jpg`, size: '356KB', time: row?.changeTime || '', uploader: row?.contractorName || '' },
    { name: `变更申请表_${base}.pdf`, size: '1.2MB', time: row?.changeTime || '', uploader: row?.contractorName || '' }
  ]
}

function makeDetailFlow(row) {
  const t = String(row?.changeTime || '')
  const base = t ? t.replace(/(\d{2}:\d{2}:\d{2}).*$/, '$1') : '09:30:00'
  const date = t ? t.slice(0, 10) : '2025-06-27'
  const t1 = `${date} ${base}`
  const t2 = `${date} 10:12:40`
  const t3 = `${date} 14:26:05`
  const status = String(row?.processStatus || '内业已审核')
  return [
    { time: t1, title: '提交上报', desc: `承包方：${row?.contractorName || '-'}（小程序）` },
    { time: t2, title: '受理', desc: `行政区划：${row?.districtName || '-'}` },
    { time: t3, title: status, desc: status === '审核通过' ? '审核结论：通过' : '审核结论：已核对' }
  ]
}

function setDetail(row) {
  const full = allRows.value.find((r) => r.id === row?.id) || row
  detailData.value = {
    ...full,
    reportSource: '小程序',
    reportType: '变更上报',
    contactPhone: '138****6688',
    idCard: '430381************',
    submitter: full?.contractorName || '',
    submitTime: full?.changeTime || '',
    auditUser: '内业审核员',
    auditTime: full?.processStatus === '审核通过' ? '2025-09-02 09:20:31' : '2025-06-28 10:05:12'
  }
  detailFiles.value = makeDetailFiles(full)
  detailFlow.value = makeDetailFlow(full)
}

function openDetail(row) {
  setDetail(row)
  detailActiveTab.value = 'base'
  detailDialogOpen.value = true
}

function openAttachment(row) {
  setDetail(row)
  detailActiveTab.value = 'files'
  detailDialogOpen.value = true
}

function downloadFile(file) {
  ElMessage.success(`开始下载：${file?.name || ''}`)
}

function processTagType(status) {
  if (status === '审核通过') return 'success'
  if (status === '内业已审核') return 'info'
  return 'warning'
}

function processTagClass(status) {
  if (status === '审核通过') return '!bg-emerald-500 !border-emerald-500 !text-white'
  if (status === '内业已审核') return '!bg-teal-500 !border-teal-500 !text-white'
  return ''
}

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
}

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

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

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

<template>
  <div class="h-full w-full flex overflow-hidden bg-white">
    <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" clearable class="mt-2" placeholder="搜索">
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </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>

    <div ref="contentWrapEl" class="flex-1 overflow-hidden">
      <div class="h-full flex flex-col">
        <div class="h-12 px-3 border-b border-gray-200 flex items-center justify-between">
          <div class="flex items-center gap-2">
            <el-button :icon="Refresh" circle size="small" @click="handleRefresh" />
          </div>

          <div class="flex items-center gap-2">
            <el-button type="primary" size="small" :icon="Setting" @click="openProgressDialog">设置业务进度</el-button>
            <el-button type="primary" size="small" :icon="FolderOpened" @click="handleRestore">数据还原</el-button>
            <el-button type="primary" size="small" :icon="Download" @click="handleExport">导出</el-button>
            <el-button type="primary" size="small" :icon="Delete" @click="handleClearBusiness">清理业务记录</el-button>
            <div class="w-px h-6 bg-gray-200 mx-1"></div>
            <el-button :icon="Grid" circle size="small" />
            <el-button :icon="Box" circle size="small" />
            <el-button :icon="CircleClose" circle size="small" />
          </div>
        </div>

        <div class="flex-1 p-2 overflow-hidden">
          <div class="h-full border border-gray-200 flex flex-col">
            <div class="flex-1 overflow-hidden">
              <el-table
                ref="tableRef"
                :data="pageRows"
                height="100%"
                border
                stripe
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="44" 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="districtName" label="行政区划名称" min-width="220" show-overflow-tooltip />

                <el-table-column prop="contractorCode" min-width="190">
                  <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="contractorName" min-width="130">
                  <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="changeTime" label="变更时间" min-width="170" sortable />

                <el-table-column label="流程进度" width="110" align="center">
                  <template #default="{ row }">
                    <el-tag :type="processTagType(row.processStatus)" size="small" :class="processTagClass(row.processStatus)">
                      {{ row.processStatus }}
                    </el-tag>
                  </template>
                </el-table-column>

                <el-table-column prop="changeContent" min-width="240" 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="rejectReason" label="驳回原因" min-width="160" show-overflow-tooltip />

                <el-table-column label="" width="170" align="center" fixed="right">
                  <template #default="{ row }">
                    <div class="flex items-center justify-center gap-2">
                      <el-button type="success" size="small" :icon="View" @click="openDetail(row)">查看详情</el-button>
                      <el-button type="success" size="small" :icon="Paperclip" @click="openAttachment(row)">附件</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <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>

    <el-dialog v-model="progressDialogOpen" title="设置业务进度" width="460px">
      <div class="px-1">
        <el-form label-width="92px">
          <el-form-item label="业务进度">
            <el-select v-model="progressForm.step" class="w-full" placeholder="请选择">
              <el-option label="内业已审核" value="内业已审核" />
              <el-option label="审核通过" value="审核通过" />
              <el-option label="待复核" value="待复核" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="progressForm.remark" type="textarea" :rows="3" placeholder="请输入" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="flex items-center justify-end gap-2">
          <el-button size="small" @click="progressDialogOpen = false">取消</el-button>
          <el-button size="small" type="primary" @click="saveProgress">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="detailDialogOpen" width="900px" :close-on-click-modal="false">
      <template #header>
        <div class="flex items-center justify-between pr-2">
          <div class="flex items-center gap-2">
            <div class="text-sm font-medium text-gray-800">查看详情</div>
            <el-tag v-if="detailData" size="small" :type="processTagType(detailData.processStatus)" :class="processTagClass(detailData.processStatus)">
              {{ detailData.processStatus }}
            </el-tag>
          </div>
          <div v-if="detailData" class="text-xs text-gray-500">
            {{ detailData.changeTime }}
          </div>
        </div>
      </template>

      <el-tabs v-model="detailActiveTab" class="!mt-1">
        <el-tab-pane label="基本信息" name="base">
          <div class="grid grid-cols-2 gap-3">
            <div class="border border-gray-200">
              <div class="h-9 px-3 flex items-center text-sm font-medium text-gray-800 border-b border-gray-200 bg-gray-50">上报信息</div>
              <div class="p-3 text-sm text-gray-700 space-y-2">
                <div class="flex"><div class="w-24 text-gray-500">行政区划</div><div class="flex-1">{{ detailData?.districtName || '-' }}</div></div>
                <div class="flex"><div class="w-24 text-gray-500">承包方编码</div><div class="flex-1">{{ detailData?.contractorCode || '-' }}</div></div>
                <div class="flex"><div class="w-24 text-gray-500">承包方名称</div><div class="flex-1">{{ detailData?.contractorName || '-' }}</div></div>
                <div class="flex"><div class="w-24 text-gray-500">上报来源</div><div class="flex-1">{{ detailData?.reportSource || '-' }}</div></div>
                <div class="flex"><div class="w-24 text-gray-500">上报类型</div><div class="flex-1">{{ detailData?.reportType || '-' }}</div></div>
                <div class="flex"><div class="w-24 text-gray-500">提交时间</div><div class="flex-1">{{ detailData?.submitTime || '-' }}</div></div>
              </div>
            </div>

            <div class="border border-gray-200">
              <div class="h-9 px-3 flex items-center text-sm font-medium text-gray-800 border-b border-gray-200 bg-gray-50">人员信息</div>
              <div class="p-3 text-sm text-gray-700 space-y-2">
                <div class="flex"><div class="w-24 text-gray-500">提交人</div><div class="flex-1">{{ detailData?.submitter || '-' }}</div></div>
                <div class="flex"><div class="w-24 text-gray-500">联系电话</div><div class="flex-1">{{ detailData?.contactPhone || '-' }}</div></div>
                <div class="flex"><div class="w-24 text-gray-500">证件号码</div><div class="flex-1">{{ detailData?.idCard || '-' }}</div></div>
                <div class="flex"><div class="w-24 text-gray-500">审核人员</div><div class="flex-1">{{ detailData?.auditUser || '-' }}</div></div>
                <div class="flex"><div class="w-24 text-gray-500">审核时间</div><div class="flex-1">{{ detailData?.auditTime || '-' }}</div></div>
                <div class="flex"><div class="w-24 text-gray-500">驳回原因</div><div class="flex-1">{{ detailData?.rejectReason || '-' }}</div></div>
              </div>
            </div>
          </div>

          <div class="mt-3 border border-gray-200">
            <div class="h-9 px-3 flex items-center text-sm font-medium text-gray-800 border-b border-gray-200 bg-gray-50">流程流转</div>
            <div class="p-3">
              <el-timeline>
                <el-timeline-item v-for="(it, idx) in detailFlow" :key="idx" :timestamp="it.time" placement="top">
                  <div class="text-sm text-gray-800 font-medium">{{ it.title }}</div>
                  <div class="text-sm text-gray-600 mt-1">{{ it.desc }}</div>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="变更内容" name="change">
          <div class="border border-gray-200">
            <div class="h-9 px-3 flex items-center text-sm font-medium text-gray-800 border-b border-gray-200 bg-gray-50">变更描述</div>
            <div class="p-3">
              <el-input :model-value="detailData?.changeContent || ''" type="textarea" :rows="6" readonly />
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="附件" name="files">
          <div class="border border-gray-200">
            <div class="h-9 px-3 flex items-center justify-between border-b border-gray-200 bg-gray-50">
              <div class="text-sm font-medium text-gray-800">附件列表</div>
              <div class="text-xs text-gray-500">共 {{ detailFiles.length }} 个</div>
            </div>
            <el-table :data="detailFiles" border stripe>
              <el-table-column prop="name" label="文件名" min-width="260" show-overflow-tooltip />
              <el-table-column prop="size" label="大小" width="100" align="center" />
              <el-table-column prop="uploader" label="上传人" width="120" align="center" />
              <el-table-column prop="time" label="上传时间" width="170" align="center" />
              <el-table-column label="操作" width="120" align="center">
                <template #default="{ row }">
                  <el-button type="primary" size="small" :icon="Download" @click="downloadFile(row)">下载</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>

      <template #footer>
        <div class="flex items-center justify-end gap-2">
          <el-button size="small" @click="detailDialogOpen = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
:deep(.el-tree-node__content) {
  height: 26px;
}
</style>
