info-assets-manage/src/views/zfgl/zfxxgl.vue

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Delete,
  Download,
  Edit,
  Eye,
  FileText,
  Home,
  Info,
  Package,
  Plus,
  Search,
  Settings,
  Users,
  Wrench,
} from 'lucide-vue-next'
import { clientGet, clientPost } from '@/utils/request.ts'
import { renderAsync } from 'docx-preview'

interface ASimplifiedHouseInfo {
  id: string
  assetType?: string | null
  building?: string | null
  floor?: string | null
  houseName?: string | null
  address?: string | null
  status?: string | null
  rentRange?: number | null
  createTime?: Date | null
  updateTime?: Date | null
}

interface ASimplifiedHouseInfoReponse extends BaseResponse {
  data: PageType<ASimplifiedHouseInfo[]>
}

interface AddASimplifiedHouseInfo {
  assetType?: string | null
  building?: string | null
  floor?: string | null
  houseName?: string | null
  address?: string | null
  status?: string | null
  rentRange?: number | null
}

interface UpdateASimplifiedHouseInfo {
  id: string
  assetType?: string | null
  building?: string | null
  floor?: string | null
  houseName?: string | null
  address?: string | null
  status?: string | null
  rentRange?: number | null
}

interface AHouseInfoDetail {
  id: string
  simplifiedHouseId?: string | null
  area?: string | null
  introduce?: string | null
  houseType?: string | null
  createTime?: Date | null
  updateTime?: Date | null
}

interface AHouseInfoDetailResponse extends BaseResponse {
  data: AHouseInfoDetail
}

interface AddAHouseInfoDetail {
  simplifiedHouseId: string
  area?: string | null
  introduce?: string | null
  houseType?: string | null
}

interface UpdateAHouseInfoDetail {
  id: string
  simplifiedHouseId: string
  area?: string | null
  introduce?: string | null
  houseType?: string | null
}

interface ADeviceInfo {
  id: string
  simplifiedHouseId?: string | null
  deviceName: string
  deviceType?: string | null
  deviceBrand?: string | null
  deviceNumber?: string | null
  devicePrice?: string | null
  createTime?: Date | null
  updateTime?: Date | null
}

interface ADeviceInfoListResponse extends BaseResponse {
  data: ADeviceInfo[]
}

interface AddADeviceInfo {
  simplifiedHouseId: string
  deviceName: string
  deviceType?: string | null
  deviceBrand?: string | null
  deviceNumber?: string | null
  devicePrice?: string | null
}

interface UpdateADeviceInfo {
  id: string
  simplifiedHouseId: string
  deviceName: string
  deviceType?: string | null
  deviceBrand?: string | null
  deviceNumber?: string | null
  devicePrice?: string | null
}

interface AMaintenanceRecords {
  id: string
  deviceId: string
  maintenanceDate: Date | null
  maintenanceContent: string
  maintenanceType: string
  maintenanceCost: number | null
  maintenancePerson: string
  maintenanceStatus: string
  createTime?: Date | null
  updateTime?: Date | null
}

interface AMaintenanceRecordsListReponse extends BaseResponse {
  data: AMaintenanceRecords[]
}

interface AddAMaintenanceRecords {
  deviceId: string
  maintenanceDate: Date | null
  maintenanceContent: string
  maintenanceType: string
  maintenanceCost: number | null
  maintenancePerson: string
  maintenanceStatus: string
}

interface UpdateAMaintenanceRecords {
  id: string
  deviceId: string
  maintenanceDate: Date | null
  maintenanceContent: string
  maintenanceType: string
  maintenanceCost: number | null
  maintenancePerson: string
  maintenanceStatus: string
}

interface ATenantInfo {
  id: string
  simplifiedHouseId: string
  tenantName: string
  tenantNumber: string
  tenantIdCard: string
  tenantInDate: string
  tenantTime: string
  tenantRent: number
}

interface ATenantInfoResponse extends BaseResponse {
  data: ATenantInfo
}

interface AContractInfo {
  id: string
  simplifiedHouseId: string
  contractNumber: string
  contractDate: string
  contractTime: string
  contractExpirationDate: string
  contractDeposit: number
  contractStatus: string
  originalContractUrl: string
  signContractUrl: string
}

interface AContractInfoResponse extends BaseResponse {
  data: AContractInfo
}

// 响应式数据
const loading = ref(false)
const tableData = ref<ASimplifiedHouseInfo[]>([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const MINIO_URL = import.meta.env.VITE_MINIO_BASE_URL

// 搜索表单
const searchForm = reactive({
  status: '',
  houseName: '',
  building: '',
  assetType: '',
})

// 对话框控制
const dialogVisible = ref(false)
const detailDialogVisible = ref(false)
const deviceDialogVisible = ref(false)
const maintenanceDialogVisible = ref(false)
const maintenanceRecordDialogVisible = ref(false)
const contractPreviewDialogVisible = ref(false)
const isEdit = ref(false)
const isDeviceEdit = ref(false)
const isMaintenanceEdit = ref(false)
const dialogTitle = ref('新增房屋信息')
const activeTab = ref('detail')

// 表单数据
const houseForm = reactive<AddASimplifiedHouseInfo & { id?: string }>({
  assetType: '',
  building: '',
  floor: '',
  houseName: '',
  address: '',
  status: '空闲',
  rentRange: 0,
})

const detailForm = reactive<AddAHouseInfoDetail & { id?: string }>({
  simplifiedHouseId: '',
  area: '',
  introduce: '',
  houseType: '',
})

const deviceForm = reactive<AddADeviceInfo & { id?: string }>({
  simplifiedHouseId: '',
  deviceName: '',
  deviceType: '',
  deviceBrand: '',
  deviceNumber: '',
  devicePrice: '',
})

// 维护记录相关数据
const currentDeviceId = ref('')
const currentDeviceName = ref('')
const maintenanceList = ref<AMaintenanceRecords[]>([])
const maintenanceLoading = ref(false)

const maintenanceForm = reactive<AddAMaintenanceRecords & { id?: string }>({
  deviceId: '',
  maintenanceDate: null,
  maintenanceContent: '',
  maintenanceType: '',
  maintenanceCost: null,
  maintenancePerson: '',
  maintenanceStatus: '待处理',
})

// 选中的行和设备数据
const selectedRows = ref<ASimplifiedHouseInfo[]>([])
const currentHouseId = ref('')
const currentHouseName = ref('')
const currentHouseStatus = ref('')
const deviceList = ref<ADeviceInfo[]>([])
const deviceLoading = ref(false)

// 租户和合同信息
const tenantInfo = ref<ATenantInfo | null>(null)
const contractInfo = ref<AContractInfo | null>(null)
const tenantLoading = ref(false)
const contractLoading = ref(false)

// 合同预览相关
const previewLoading = ref(false)
const previewTitle = ref('')
const previewContent = ref<HTMLElement | null>(null)

// 计算属性：是否显示租户和合同标签页
const showTenantAndContractTabs = computed(() => {
  return currentHouseStatus.value === '已租'
})

// API方法
const addRentingHouse = async (info: AddASimplifiedHouseInfo) => {
  const res = await clientPost<AddASimplifiedHouseInfo, BaseResponse>(
    '/asimplifiedHouseInfo/save',
    info,
  )
  if (res.code !== 200) {
    ElMessage.error(res.msg)
    return false
  }
  ElMessage.success(res.msg)
  return true
}

const updateRentingHouse = async (info: UpdateASimplifiedHouseInfo) => {
  const res = await clientPost<UpdateASimplifiedHouseInfo, BaseResponse>(
    '/asimplifiedHouseInfo/update',
    info,
  )
  if (res.code !== 200) {
    ElMessage.error(res.msg)
    return false
  }
  ElMessage.success(res.msg)
  return true
}

const deleteBatchRentingHouse = async (ids: string[]) => {
  const res = await clientPost<string[], BaseResponse>('/asimplifiedHouseInfo/deleteBatch', ids)
  if (res.code !== 200) {
    ElMessage.error(res.msg)
    return false
  }
  ElMessage.success(res.msg)
  return true
}

const getList = async () => {
  loading.value = true
  try {
    const params: any = {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
    }
    if (searchForm.status) params.status = searchForm.status
    if (searchForm.houseName) params.houseName = searchForm.houseName
    if (searchForm.building) params.building = searchForm.building
    if (searchForm.assetType) params.assetType = searchForm.assetType

    const res = await clientGet<any, ASimplifiedHouseInfoReponse>(
      '/asimplifiedHouseInfo/findByPage',
      { params },
    )
    if (res.code !== 200) {
      ElMessage.error(res.msg)
      return
    }
    tableData.value = res.data.records
    total.value = res.data.total
  } finally {
    loading.value = false
  }
}

const addRentingHouseDetail = async (info: AddAHouseInfoDetail) => {
  const res = await clientPost<AddAHouseInfoDetail, BaseResponse>('/ahouseInfoDetail/save', info)
  if (res.code !== 200) {
    ElMessage.error(res.msg)
    return false
  }
  ElMessage.success(res.msg)
  return true
}

const updateRentingHouseDetail = async (info: UpdateAHouseInfoDetail) => {
  const res = await clientPost<UpdateAHouseInfoDetail, BaseResponse>(
    '/ahouseInfoDetail/update',
    info,
  )
  if (res.code !== 200) {
    ElMessage.error(res.msg)
    return false
  }
  ElMessage.success(res.msg)
  return true
}

const getDetail = async (simplifiedHouseId: string) => {
  const res = await clientGet<{ id: string }, AHouseInfoDetailResponse>(
    '/ahouseInfoDetail/getBySimplifiedHouseId',
    {
      params: { simplifiedHouseId },
    },
  )
  if (res.code !== 200) {
    ElMessage.error(res.msg)
    return null
  }
  return res.data
}

const addDevice = async (info: AddADeviceInfo) => {
  const res = await clientPost<AddADeviceInfo, BaseResponse>('/adeviceInfo/save', info)
  if (res.code !== 200) {
    ElMessage.error(res.msg)
    return false
  }
  ElMessage.success(res.msg)
  return true
}

const deleteDevice = async (ids: string[]) => {
  const res = await clientPost<string[], BaseResponse>('/adeviceInfo/deleteBatch', ids)
  if (res.code !== 200) {
    ElMessage.error(res.msg)
    return false
  }
  ElMessage.success(res.msg)
  return true
}

const getDeviceList = async (simplifiedHouseId: string) => {
  const res = await clientGet<{ id: string }, ADeviceInfoListResponse>(
    '/adeviceInfo/getBySimplifiedHouseId',
    {
      params: { simplifiedHouseId },
    },
  )
  if (res.code !== 200) {
    ElMessage.error(res.msg)
    return []
  }
  return res.data
}

const updateDevice = async (info: UpdateADeviceInfo) => {
  const res = await clientPost<UpdateADeviceInfo, BaseResponse>('/adeviceInfo/update', info)
  if (res.code !== 200) {
    ElMessage.error(res.msg)
    return false
  }
  ElMessage.success(res.msg)
  return true
}

const addDeviceMaintainRecord = async (info: AddAMaintenanceRecords) => {
  const res = await clientPost<AddAMaintenanceRecords, BaseResponse>(
    '/amaintenanceRecords/save',
    info,
  )
  if (res.code !== 200) {
    ElMessage.error(res.msg)
    return false
  }
  ElMessage.success(res.msg)
  return true
}

const updateDeviceMaintainRecord = async (info: UpdateAMaintenanceRecords) => {
  const res = await clientPost<UpdateAMaintenanceRecords, BaseResponse>(
    '/amaintenanceRecords/update',
    info,
  )
  if (res.code !== 200) {
    ElMessage.error(res.msg)
    return false
  }
  ElMessage.success(res.msg)
  return true
}

const deleteDeviceMaintainRecord = async (ids: string[]) => {
  const res = await clientPost<string[], BaseResponse>('/amaintenanceRecords/delete', ids)
  if (res.code !== 200) {
    ElMessage.error(res.msg)
    return false
  }
  ElMessage.success(res.msg)
  return true
}

const getDeviceMaintainRecord = async (deviceId: string) => {
  const res = await clientGet<{ deviceId: string }, AMaintenanceRecordsListReponse>(
    '/amaintenanceRecords/getByDeviceId',
    {
      params: { deviceId },
    },
  )
  if (res.code !== 200) {
    ElMessage.error(res.msg)
    return []
  }
  return res.data
}

// 根据房屋ID获取租户信息
const getTenantInfo = async (simplifiedHouseId: string) => {
  tenantLoading.value = true
  try {
    const res = await clientGet<
      {
        simplifiedHouseId: string
      },
      ATenantInfoResponse
    >('/atenantInfo/getBySimplifiedHouseId', {
      params: {
        simplifiedHouseId: simplifiedHouseId,
      },
    })
    if (res.code !== 200) {
      ElMessage.error(res.msg)
      tenantInfo.value = null
      return
    }
    tenantInfo.value = res.data
  } finally {
    tenantLoading.value = false
  }
}

// 根据房屋ID获取合同信息
const getContractInfo = async (simplifiedHouseId: string) => {
  contractLoading.value = true
  try {
    const res = await clientGet<
      {
        simplifiedHouseId: string
      },
      AContractInfoResponse
    >('/acontractInfo/getBySimplifiedHouseId', {
      params: {
        simplifiedHouseId: simplifiedHouseId,
      },
    })
    if (res.code !== 200) {
      ElMessage.error(res.msg)
      contractInfo.value = null
      return
    }
    contractInfo.value = res.data
  } finally {
    contractLoading.value = false
  }
}

// 预览docx文件
const previewDocx = async (url: string, title: string) => {
  url = MINIO_URL + url
  if (!url) {
    ElMessage.warning('文档地址为空')
    return
  }

  previewLoading.value = true
  previewTitle.value = title

  try {
    // 获取文档内容
    const response = await fetch(url)
    if (!response.ok) {
      throw new Error('文档加载失败')
    }

    const arrayBuffer = await response.arrayBuffer()

    // 创建预览容器
    const container = document.createElement('div')
    container.style.padding = '20px'
    container.style.backgroundColor = '#fff'
    container.style.minHeight = '400px'

    // 使用docx-preview渲染文档
    await renderAsync(arrayBuffer, container)

    previewContent.value = container
    contractPreviewDialogVisible.value = true
  } catch (error) {
    console.error('预览文档失败:', error)
    ElMessage.error('预览文档失败，请检查文档地址是否正确')
  } finally {
    previewLoading.value = false
  }
}

// 下载文档
const downloadDocument = (url: string, filename: string) => {
  url = MINIO_URL + url
  if (!url) {
    ElMessage.warning('文档地址为空')
    return
  }

  const link = document.createElement('a')
  link.href = url
  link.download = filename
  link.target = '_blank'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

// 页面方法
const handleSearch = () => {
  currentPage.value = 1
  getList()
}

const handleReset = () => {
  Object.assign(searchForm, {
    status: '',
    houseName: '',
    building: '',
    assetType: '',
  })
  handleSearch()
}

const handleAdd = () => {
  isEdit.value = false
  dialogTitle.value = '新增房屋信息'
  houseForm.id = undefined
  Object.assign(houseForm, {
    assetType: '',
    building: '',
    floor: '',
    houseName: '',
    address: '',
    status: '空闲',
    rentRange: 0,
  })
  dialogVisible.value = true
}

const handleEdit = (row: ASimplifiedHouseInfo) => {
  isEdit.value = true
  dialogTitle.value = '编辑房屋信息'
  Object.assign(houseForm, { ...row })
  dialogVisible.value = true
}

const handleDelete = async (row: ASimplifiedHouseInfo) => {
  try {
    await ElMessageBox.confirm('确定要删除这条记录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    const success = await deleteBatchRentingHouse([row.id])
    if (success) {
      getList()
    }
  } catch {
    // 用户取消删除
  }
}

const handleBatchDelete = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的记录')
    return
  }
  try {
    await ElMessageBox.confirm(`确定要删除选中的 ${selectedRows.value.length} 条记录吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    const ids = selectedRows.value.map((row) => row.id)
    const success = await deleteBatchRentingHouse(ids)
    if (success) {
      getList()
    }
  } catch {
    // 用户取消删除
  }
}

const handleViewDetail = async (row: ASimplifiedHouseInfo) => {
  currentHouseId.value = row.id
  currentHouseName.value = row.houseName || ''
  currentHouseStatus.value = row.status || ''
  activeTab.value = 'detail'

  // 获取房屋详细信息
  const detail = await getDetail(row.id)
  if (detail) {
    Object.assign(detailForm, { ...detail, simplifiedHouseId: row.id })
  } else {
    Object.assign(detailForm, {
      id: '',
      simplifiedHouseId: row.id,
      area: '',
      introduce: '',
      houseType: '',
    })
  }

  // 获取设备列表
  await loadDeviceList(row.id)

  // 如果是已租房屋，获取租户和合同信息
  if (row.status === '已租') {
    await getTenantInfo(row.id)
    await getContractInfo(row.id)
  }

  detailDialogVisible.value = true
}

const loadDeviceList = async (houseId: string) => {
  deviceLoading.value = true
  try {
    const devices = await getDeviceList(houseId)
    deviceList.value = devices || []
  } finally {
    deviceLoading.value = false
  }
}

const handleSubmit = async () => {
  let success = false
  if (isEdit.value) {
    success = await updateRentingHouse(houseForm as UpdateASimplifiedHouseInfo)
  } else {
    success = await addRentingHouse(houseForm)
  }
  if (success) {
    dialogVisible.value = false
    getList()
  }
}

const handleDetailSubmit = async () => {
  let success = false
  if (detailForm.id) {
    success = await updateRentingHouseDetail(detailForm as UpdateAHouseInfoDetail)
  } else {
    success = await addRentingHouseDetail(detailForm)
  }
  if (success) {
    // ElMessage.success('房屋详细信息保存成功')
  }
}

const handleAddDevice = () => {
  isDeviceEdit.value = false
  Object.assign(deviceForm, {
    id: '',
    simplifiedHouseId: currentHouseId.value,
    deviceName: '',
    deviceType: '',
    deviceBrand: '',
    deviceNumber: '',
    devicePrice: '',
  })
  deviceDialogVisible.value = true
}

const handleEditDevice = (device: ADeviceInfo) => {
  isDeviceEdit.value = true
  Object.assign(deviceForm, { ...device })
  deviceDialogVisible.value = true
}

const handleDeleteDevice = async (device: ADeviceInfo) => {
  try {
    await ElMessageBox.confirm('确定要删除这个设备吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    const success = await deleteDevice([device.id])
    if (success) {
      await loadDeviceList(currentHouseId.value)
    }
  } catch {
    // 用户取消删除
  }
}

const handleDeviceSubmit = async () => {
  let success = false
  if (isDeviceEdit.value) {
    success = await updateDevice(deviceForm as UpdateADeviceInfo)
  } else {
    success = await addDevice(deviceForm)
  }
  if (success) {
    deviceDialogVisible.value = false
    await loadDeviceList(currentHouseId.value)
  }
}

// 设备维护记录相关方法
const handleViewMaintenance = async (device: ADeviceInfo) => {
  currentDeviceId.value = device.id
  currentDeviceName.value = device.deviceName
  await loadMaintenanceList(device.id)
  maintenanceDialogVisible.value = true
}

const loadMaintenanceList = async (deviceId: string) => {
  maintenanceLoading.value = true
  try {
    const records = await getDeviceMaintainRecord(deviceId)
    maintenanceList.value = records || []
  } finally {
    maintenanceLoading.value = false
  }
}

const handleAddMaintenance = () => {
  isMaintenanceEdit.value = false
  Object.assign(maintenanceForm, {
    id: '',
    deviceId: currentDeviceId.value,
    maintenanceDate: null,
    maintenanceContent: '',
    maintenanceType: '',
    maintenanceCost: null,
    maintenancePerson: '',
    maintenanceStatus: '待处理',
  })
  maintenanceRecordDialogVisible.value = true
}

const handleEditMaintenance = (record: AMaintenanceRecords) => {
  isMaintenanceEdit.value = true
  Object.assign(maintenanceForm, { ...record })
  maintenanceRecordDialogVisible.value = true
}

const handleDeleteMaintenance = async (record: AMaintenanceRecords) => {
  try {
    await ElMessageBox.confirm('确定要删除这条维护记录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    const success = await deleteDeviceMaintainRecord([record.id])
    if (success) {
      await loadMaintenanceList(currentDeviceId.value)
    }
  } catch {
    // 用户取消删除
  }
}

const handleMaintenanceSubmit = async () => {
  let success = false
  if (isMaintenanceEdit.value) {
    success = await updateDeviceMaintainRecord(maintenanceForm as UpdateAMaintenanceRecords)
  } else {
    success = await addDeviceMaintainRecord(maintenanceForm)
  }
  if (success) {
    maintenanceRecordDialogVisible.value = false
    await loadMaintenanceList(currentDeviceId.value)
  }
}

const handleSelectionChange = (selection: ASimplifiedHouseInfo[]) => {
  selectedRows.value = selection
}

const handlePageChange = (page: number) => {
  currentPage.value = page
  getList()
}

const handleSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1
  getList()
}

const getMaintenanceTypeColor = (type: string) => {
  const colorMap: Record<string, string> = {
    定期保养: 'success',
    故障维修: 'danger',
    清洁保养: 'info',
    零件更换: 'warning',
    升级改造: 'primary',
    其他: '',
  }
  return colorMap[type] || ''
}

const getMaintenanceStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    待处理: 'warning',
    进行中: 'primary',
    已完成: 'success',
    已取消: 'info',
  }
  return colorMap[status] || ''
}

const getAssetTypeTag = (assetType: string | null | undefined): string => {
  if (!assetType) return 'default'
  if (assetType === '公租房') return 'primary'
  if (assetType === '厂房') return 'success'
  if (assetType === '创新创业基地') return 'danger'
  return 'warning'
}

const getContractStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    有效: 'success',
    已终止: 'info',
  }
  return colorMap[status] || ''
}

onMounted(() => {
  getList()
})
</script>

<template>
  <div class="p-6 bg-gray-50 min-h-screen">
    <div class="bg-white rounded-lg shadow-sm">
      <!-- 页面标题 -->
      <div class="flex items-center gap-3 p-6 border-b border-gray-200">
        <div class="flex items-center justify-center w-10 h-10 bg-blue-100 rounded-lg">
          <Home class="w-5 h-5 text-blue-600" />
        </div>
        <div>
          <h1 class="text-xl font-semibold text-gray-900">租房信息管理</h1>
          <p class="text-sm text-gray-500">管理房屋基本信息、详细信息和设备信息</p>
        </div>
      </div>

      <!-- 搜索区域 -->
      <div class="p-6 border-b border-gray-200">
        <el-form :model="searchForm" inline class="flex flex-wrap gap-4">
          <el-form-item label="资产类型">
            <el-select
              v-model="searchForm.assetType"
              placeholder="请选择资产类型"
              clearable
              style="width: 8rem"
            >
              <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="searchForm.building"
              placeholder="请输入楼栋"
              clearable
              class="w-40"
            />
          </el-form-item>
          <el-form-item label="房间名称">
            <el-input
              v-model="searchForm.houseName"
              placeholder="请输入房间名称"
              clearable
              class="w-40"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              v-model="searchForm.status"
              placeholder="请选择状态"
              clearable
              style="width: 8rem"
            >
              <el-option label="空闲" value="空闲" />
              <el-option label="已租" value="已租" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 操作按钮区域 -->
      <div class="flex items-center justify-between p-6">
        <div class="flex gap-3">
          <el-button type="primary" @click="handleAdd" :icon="Plus">新增房屋</el-button>
          <el-button
            type="danger"
            @click="handleBatchDelete"
            :disabled="selectedRows.length === 0"
            :icon="Delete"
          >
            批量删除
          </el-button>
        </div>
        <div class="text-sm text-gray-500">共 {{ total }} 条记录</div>
      </div>

      <!-- 数据表格 -->
      <div class="px-6">
        <el-table
          :data="tableData"
          v-loading="loading"
          @selection-change="handleSelectionChange"
          class="w-full"
          stripe
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="assetType" label="资产类型" width="100">
            <template #default="{ row }">
              <el-tag :type="getAssetTypeTag(row.assetType)">
                {{ row.assetType }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="houseName" label="房间名称" width="120" />
          <el-table-column prop="building" label="楼栋" width="100" />
          <el-table-column prop="floor" label="楼层" width="100" />
          <el-table-column prop="address" label="地址" min-width="200" show-overflow-tooltip />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="row.status === '空闲' ? 'success' : 'warning'">
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="rentRange" label="租金" width="150" />
          <el-table-column label="操作" width="250" fixed="right">
            <template #default="{ row }">
              <div class="flex gap-2">
                <el-button type="primary" size="small" @click="handleViewDetail(row)" :icon="Eye">
                  详情
                </el-button>
                <el-button type="warning" size="small" @click="handleEdit(row)" :icon="Edit">
                  编辑
                </el-button>
                <el-button type="danger" size="small" @click="handleDelete(row)" :icon="Delete">
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="flex justify-center p-6">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </div>

    <!-- 新增/编辑房屋对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form :model="houseForm" label-width="100px" class="grid grid-cols-2 gap-4">
        <el-form-item label="资产类型" required>
          <el-select v-model="houseForm.assetType" placeholder="请选择资产类型" class="w-full">
            <el-option label="公租房" value="公租房" />
            <el-option label="厂房" value="厂房" />
            <el-option label="创新创业基地" value="创新创业基地" />
          </el-select>
        </el-form-item>
        <el-form-item label="楼栋" required>
          <el-input v-model="houseForm.building" placeholder="请输入楼栋" />
        </el-form-item>
        <el-form-item label="楼层">
          <el-input v-model="houseForm.floor" placeholder="请输入楼层" />
        </el-form-item>
        <el-form-item label="房间名称" required>
          <el-input v-model="houseForm.houseName" placeholder="请输入房间名称" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="houseForm.status"
            placeholder="请选择状态"
            class="w-full"
            default-first-option
            disabled
          >
            <el-option label="空闲" value="空闲" />
            <el-option label="已租" value="已租" />
          </el-select>
        </el-form-item>
        <el-form-item label="租金">
          <el-input-number
            :min="0"
            v-model="houseForm.rentRange"
            :precision="2"
            placeholder="请输入租金"
          />
        </el-form-item>
        <el-form-item label="地址" class="col-span-2">
          <el-input v-model="houseForm.address" placeholder="请输入详细地址" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="flex justify-end gap-3">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 房屋详细信息和设备管理对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      :title="`${currentHouseName} - 详细信息管理`"
      width="1200px"
      :close-on-click-modal="false"
      class="detail-dialog"
    >
      <el-tabs v-model="activeTab" class="detail-tabs">
        <!-- 房屋详细信息标签页 -->
        <el-tab-pane label="房屋详情" name="detail">
          <template #label>
            <div class="flex items-center gap-2">
              <Info class="w-4 h-4" />
              <span>房屋详情</span>
            </div>
          </template>
          <div class="p-4">
            <el-form :model="detailForm" label-width="100px" class="grid grid-cols-2 gap-4">
              <el-form-item label="面积">
                <el-input v-model="detailForm.area" placeholder="请输入面积" />
              </el-form-item>
              <el-form-item label="房屋类型">
                <el-select
                  v-model="detailForm.houseType"
                  placeholder="请选择房屋类型"
                  class="w-full"
                >
                  <el-option label="一室一厅" value="一室一厅" />
                  <el-option label="两室一厅" value="两室一厅" />
                  <el-option label="三室一厅" value="三室一厅" />
                  <el-option label="三室两厅" value="三室两厅" />
                  <el-option label="单间" value="单间" />
                  <el-option label="套间" value="套间" />
                  <el-option label="厂房" value="厂房" />
                  <el-option label="仓库" value="仓库" />
                </el-select>
              </el-form-item>
              <el-form-item label="房屋介绍" class="col-span-2">
                <el-input
                  v-model="detailForm.introduce"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入房屋介绍"
                />
              </el-form-item>
            </el-form>
            <div class="flex justify-end mt-4">
              <el-button type="primary" @click="handleDetailSubmit">保存房屋详情</el-button>
            </div>
          </div>
        </el-tab-pane>

        <!-- 设备管理标签页 -->
        <el-tab-pane label="设备管理" name="device">
          <template #label>
            <div class="flex items-center gap-2">
              <Settings class="w-4 h-4" />
              <span>设备管理</span>
              <el-badge :value="deviceList.length" class="ml-1" />
            </div>
          </template>
          <div class="p-4">
            <!-- 设备操作按钮 -->
            <div class="flex justify-between items-center mb-4">
              <el-button type="primary" @click="handleAddDevice" :icon="Plus" size="small">
                新增设备
              </el-button>
              <div class="text-sm text-gray-500">共 {{ deviceList.length }} 个设备</div>
            </div>

            <!-- 设备列表 -->
            <div v-loading="deviceLoading">
              <el-table :data="deviceList" stripe class="w-full">
                <el-table-column prop="deviceName" label="设备名称" width="120" />
                <el-table-column prop="deviceType" label="设备类型" width="100" />
                <el-table-column prop="deviceBrand" label="品牌" width="100" />
                <el-table-column prop="deviceNumber" label="型号" width="120" />
                <el-table-column prop="devicePrice" label="价格" width="100">
                  <template #default="{ row }">
                    <span class="text-green-600 font-medium">{{ row.devicePrice }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="270" fixed="right">
                  <template #default="{ row }">
                    <div class="flex gap-1 flex-wrap">
                      <el-button
                        type="info"
                        size="small"
                        @click="handleViewMaintenance(row)"
                        :icon="Wrench"
                      >
                        维护记录
                      </el-button>
                      <el-button
                        type="warning"
                        size="small"
                        @click="handleEditDevice(row)"
                        :icon="Edit"
                      >
                        编辑
                      </el-button>
                      <el-button
                        type="danger"
                        size="small"
                        @click="handleDeleteDevice(row)"
                        :icon="Delete"
                      >
                        删除
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>

              <!-- 空状态 -->
              <div v-if="deviceList.length === 0" class="text-center py-12">
                <Package class="w-16 h-16 text-gray-400 mx-auto mb-4" />
                <p class="text-gray-500 text-lg">暂无设备信息</p>
                <p class="text-gray-400 text-sm mt-2">点击上方按钮添加设备</p>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 租户信息标签页 (仅已租房屋显示) -->
        <el-tab-pane v-if="showTenantAndContractTabs" label="租户信息" name="tenant">
          <template #label>
            <div class="flex items-center gap-2">
              <Users class="w-4 h-4" />
              <span>租户信息</span>
            </div>
          </template>
          <div class="p-4" v-loading="tenantLoading">
            <div v-if="tenantInfo" class="bg-gray-50 rounded-lg p-6">
              <div class="grid grid-cols-2 gap-6">
                <div class="space-y-4">
                  <div class="flex items-center gap-3">
                    <span class="text-gray-600 font-medium w-20">租户姓名:</span>
                    <span class="text-gray-900">{{ tenantInfo.tenantName }}</span>
                  </div>
                  <div class="flex items-center gap-3">
                    <span class="text-gray-600 font-medium w-20">联系电话:</span>
                    <span class="text-gray-900">{{ tenantInfo.tenantNumber }}</span>
                  </div>
                  <div class="flex items-center gap-3">
                    <span class="text-gray-600 font-medium w-20">身份证号:</span>
                    <span class="text-gray-900">{{ tenantInfo.tenantIdCard }}</span>
                  </div>
                </div>
                <div class="space-y-4">
                  <div class="flex items-center gap-3">
                    <span class="text-gray-600 font-medium w-20">入住时间:</span>
                    <span class="text-gray-900">{{ tenantInfo.tenantInDate }}</span>
                  </div>
                  <div class="flex items-center gap-3">
                    <span class="text-gray-600 font-medium w-20">租期:</span>
                    <span class="text-gray-900">{{ tenantInfo.tenantTime }}</span>
                  </div>
                  <div class="flex items-center gap-3">
                    <span class="text-gray-600 font-medium w-20">月租金:</span>
                    <span class="text-green-600 font-semibold">¥{{ tenantInfo.tenantRent }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="text-center py-12">
              <Users class="w-16 h-16 text-gray-400 mx-auto mb-4" />
              <p class="text-gray-500 text-lg">暂无租户信息</p>
            </div>
          </div>
        </el-tab-pane>

        <!-- 合同信息标签页 (仅已租房屋显示) -->
        <el-tab-pane v-if="showTenantAndContractTabs" label="合同信息" name="contract">
          <template #label>
            <div class="flex items-center gap-2">
              <FileText class="w-4 h-4" />
              <span>合同信息</span>
            </div>
          </template>
          <div class="p-4" v-loading="contractLoading">
            <div v-if="contractInfo" class="space-y-6">
              <!-- 合同基本信息 -->
              <div class="bg-gray-50 rounded-lg p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">合同基本信息</h3>
                <div class="grid grid-cols-2 gap-6">
                  <div class="space-y-4">
                    <div class="flex items-center gap-3">
                      <span class="text-gray-600 font-medium w-24">合同编号:</span>
                      <span class="text-gray-900">{{ contractInfo.contractNumber }}</span>
                    </div>
                    <div class="flex items-center gap-3">
                      <span class="text-gray-600 font-medium w-24">签约日期:</span>
                      <span class="text-gray-900">{{ contractInfo.contractDate }}</span>
                    </div>
                    <div class="flex items-center gap-3">
                      <span class="text-gray-600 font-medium w-24">合同期限:</span>
                      <span class="text-gray-900">{{ contractInfo.contractTime }}</span>
                    </div>
                  </div>
                  <div class="space-y-4">
                    <div class="flex items-center gap-3">
                      <span class="text-gray-600 font-medium w-24">到期日期:</span>
                      <span class="text-gray-900">{{ contractInfo.contractExpirationDate }}</span>
                    </div>
                    <div class="flex items-center gap-3">
                      <span class="text-gray-600 font-medium w-24">押金:</span>
                      <span class="text-green-600 font-semibold"
                        >¥{{ contractInfo.contractDeposit }}</span
                      >
                    </div>
                    <div class="flex items-center gap-3">
                      <span class="text-gray-600 font-medium w-24">合同状态:</span>
                      <el-tag :type="getContractStatusColor(contractInfo.contractStatus)">
                        {{ contractInfo.contractStatus }}
                      </el-tag>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 合同文档 -->
              <div class="bg-gray-50 rounded-lg p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">合同文档</h3>
                <div class="space-y-4">
                  <!-- 原合同 -->
                  <div class="flex items-center justify-between p-4 bg-white rounded-lg border">
                    <div class="flex items-center gap-3">
                      <FileText class="w-6 h-6 text-blue-600" />
                      <div>
                        <p class="font-medium text-gray-900">原合同文档</p>
                        <p class="text-sm text-gray-500">原始合同文件</p>
                      </div>
                    </div>
                    <div class="flex gap-2">
                      <el-button
                        type="primary"
                        size="small"
                        @click="previewDocx(contractInfo.originalContractUrl, '原合同文档')"
                        :loading="previewLoading"
                        :icon="Eye"
                      >
                        预览
                      </el-button>
                      <el-button
                        type="success"
                        size="small"
                        @click="
                          downloadDocument(contractInfo.originalContractUrl, '原合同文档.docx')
                        "
                        :icon="Download"
                      >
                        下载
                      </el-button>
                    </div>
                  </div>

                  <!-- 签订后合同 -->
                  <div
                    v-if="contractInfo.signContractUrl"
                    class="flex items-center justify-between p-4 bg-white rounded-lg border"
                  >
                    <div class="flex items-center gap-3">
                      <FileText class="w-6 h-6 text-green-600" />
                      <div>
                        <p class="font-medium text-gray-900">签订后合同</p>
                        <p class="text-sm text-gray-500">已签署的合同文件</p>
                      </div>
                    </div>
                    <div class="flex gap-2">
                      <el-button
                        type="primary"
                        size="small"
                        @click="previewDocx(contractInfo.signContractUrl, '签订后合同')"
                        :loading="previewLoading"
                        :icon="Eye"
                      >
                        预览
                      </el-button>
                      <el-button
                        type="success"
                        size="small"
                        @click="downloadDocument(contractInfo.signContractUrl, '签订后合同.docx')"
                        :icon="Download"
                      >
                        下载
                      </el-button>
                    </div>
                  </div>

                  <!-- 签订后合同为空的提示 -->
                  <div
                    v-else
                    class="flex items-center justify-center p-8 bg-white rounded-lg border border-dashed border-gray-300"
                  >
                    <div class="text-center">
                      <FileText class="w-12 h-12 text-gray-400 mx-auto mb-2" />
                      <p class="text-gray-500">签订后合同暂未上传</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="text-center py-12">
              <FileText class="w-16 h-16 text-gray-400 mx-auto mb-4" />
              <p class="text-gray-500 text-lg">暂无合同信息</p>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>

      <template #footer>
        <div class="flex justify-end">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 合同文档预览对话框 -->
    <el-dialog
      v-model="contractPreviewDialogVisible"
      :title="previewTitle"
      width="60%"
      :close-on-click-modal="false"
      class="preview-dialog"
    >
      <div
        v-if="previewContent"
        v-html="previewContent.innerHTML"
        class="preview-content max-h-[70vh] overflow-y-auto"
      ></div>
      <div v-else class="text-center py-12">
        <p class="text-gray-500">文档加载中...</p>
      </div>
      <template #footer>
        <div class="flex justify-end">
          <el-button @click="contractPreviewDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 设备新增/编辑对话框 -->
    <el-dialog
      v-model="deviceDialogVisible"
      :title="isDeviceEdit ? '编辑设备' : '新增设备'"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form :model="deviceForm" label-width="100px">
        <el-form-item label="设备名称" required>
          <el-input v-model="deviceForm.deviceName" placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item label="设备类型">
          <el-select v-model="deviceForm.deviceType" placeholder="请选择设备类型" class="w-full">
            <el-option label="家电" value="家电" />
            <el-option label="家具" value="家具" />
            <el-option label="厨具" value="厨具" />
            <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="deviceForm.deviceBrand" placeholder="请输入设备品牌" />
        </el-form-item>
        <el-form-item label="设备型号">
          <el-input v-model="deviceForm.deviceNumber" placeholder="请输入设备型号" />
        </el-form-item>
        <el-form-item label="设备价格">
          <el-input v-model="deviceForm.devicePrice" placeholder="请输入设备价格" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="flex justify-end gap-3">
          <el-button @click="deviceDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleDeviceSubmit">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 维护记录管理对话框 -->
    <el-dialog
      v-model="maintenanceDialogVisible"
      :title="`${currentDeviceName} - 维护记录管理`"
      width="900px"
      :close-on-click-modal="false"
    >
      <div class="mb-4 flex justify-between items-center">
        <el-button type="primary" @click="handleAddMaintenance" :icon="Plus" size="small">
          新增维护记录
        </el-button>
        <div class="text-sm text-gray-500">共 {{ maintenanceList.length }} 条维护记录</div>
      </div>

      <div v-loading="maintenanceLoading">
        <el-table :data="maintenanceList" stripe class="w-full">
          <el-table-column prop="maintenanceDate" label="维护时间" width="120">
            <template #default="{ row }">
              {{ row.maintenanceDate ? new Date(row.maintenanceDate).toLocaleDateString() : '-' }}
            </template>
          </el-table-column>
          <el-table-column prop="maintenanceType" label="维护类型" width="100">
            <template #default="{ row }">
              <el-tag :type="getMaintenanceTypeColor(row.maintenanceType)">
                {{ row.maintenanceType }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="maintenanceContent"
            label="维护内容"
            min-width="150"
            show-overflow-tooltip
          />
          <el-table-column prop="maintenancePerson" label="维护人员" width="100" />
          <el-table-column prop="maintenanceCost" label="维护费用" width="100">
            <template #default="{ row }">
              <span class="text-red-600 font-medium">
                {{ row.maintenanceCost ? `¥${row.maintenanceCost}` : '-' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="maintenanceStatus" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getMaintenanceStatusColor(row.maintenanceStatus)">
                {{ row.maintenanceStatus }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="{ row }">
              <div class="flex gap-2">
                <el-button
                  type="warning"
                  size="small"
                  @click="handleEditMaintenance(row)"
                  :icon="Edit"
                >
                  编辑
                </el-button>
                <el-button
                  type="danger"
                  size="small"
                  @click="handleDeleteMaintenance(row)"
                  :icon="Delete"
                >
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 空状态 -->
        <div v-if="maintenanceList.length === 0" class="text-center py-12">
          <Wrench class="w-16 h-16 text-gray-400 mx-auto mb-4" />
          <p class="text-gray-500 text-lg">暂无维护记录</p>
          <p class="text-gray-400 text-sm mt-2">点击上方按钮添加维护记录</p>
        </div>
      </div>

      <template #footer>
        <div class="flex justify-end">
          <el-button @click="maintenanceDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 维护记录新增/编辑对话框 -->
    <el-dialog
      v-model="maintenanceRecordDialogVisible"
      :title="isMaintenanceEdit ? '编辑维护记录' : '新增维护记录'"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form :model="maintenanceForm" label-width="100px" class="grid grid-cols-2 gap-4">
        <el-form-item label="维护时间" required>
          <el-date-picker
            v-model="maintenanceForm.maintenanceDate"
            type="date"
            placeholder="请选择维护时间"
            class="w-full"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>

        <el-form-item label="维护类型" required>
          <el-select
            v-model="maintenanceForm.maintenanceType"
            placeholder="请选择维护类型"
            class="w-full"
          >
            <el-option label="定期保养" value="定期保养" />
            <el-option label="故障维修" value="故障维修" />
            <el-option label="清洁保养" value="清洁保养" />
            <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="maintenanceForm.maintenancePerson" placeholder="请输入维护人员" />
        </el-form-item>

        <el-form-item label="维护费用">
          <el-input-number
            v-model="maintenanceForm.maintenanceCost"
            :min="0"
            :precision="2"
            placeholder="请输入维护费用"
            class="w-full"
          />
        </el-form-item>

        <el-form-item label="维护状态" required>
          <el-select
            v-model="maintenanceForm.maintenanceStatus"
            placeholder="请选择维护状态"
            class="w-full"
          >
            <el-option label="待处理" value="待处理" />
            <el-option label="进行中" value="进行中" />
            <el-option label="已完成" value="已完成" />
            <el-option label="已取消" value="已取消" />
          </el-select>
        </el-form-item>

        <el-form-item label="维护内容" class="col-span-2">
          <el-input
            v-model="maintenanceForm.maintenanceContent"
            type="textarea"
            :rows="4"
            placeholder="请输入详细的维护内容描述"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="flex justify-end gap-3">
          <el-button @click="maintenanceRecordDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleMaintenanceSubmit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.el-form-item {
  margin-bottom: 18px;
}

.el-table {
  border-radius: 8px;
  overflow: hidden;
}

.detail-dialog .el-dialog__body {
  padding: 0;
}

.detail-tabs .el-tabs__content {
  padding: 0;
}

.detail-tabs .el-tab-pane {
  background: #fafafa;
  border-radius: 8px;
  margin: 0 20px 20px;
}

.el-badge {
  --el-badge-size: 16px;
  --el-badge-padding: 4px;
}

.preview-dialog .el-dialog__body {
  padding: 20px;
}

.preview-content {
  background: white;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e5e7eb;
}

.preview-content p {
  margin-bottom: 12px;
  line-height: 1.6;
}

.preview-content h1,
.preview-content h2,
.preview-content h3 {
  margin-bottom: 16px;
  margin-top: 24px;
  font-weight: 600;
}

.preview-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}

.preview-content table th,
.preview-content table td {
  border: 1px solid #d1d5db;
  padding: 8px 12px;
  text-align: left;
}

.preview-content table th {
  background-color: #f9fafb;
  font-weight: 600;
}
</style>