<script lang="ts" setup>
import type { CSSProperties } from 'vue'
import type {
  DeptOption,
  DetailItem,
  ExtPropertyActualValue,
  ExtPropertyItem,
  OperationMeetingDrawerMode,
  OperationMeetingForm,
  OperationMeetingFormItem,
  SummaryDetailItem
} from '../types'
import { useTableComponents } from '@/components/ZmTable/useTableComponents'

interface Props {
  meeting: OperationMeetingForm
  details: DetailItem[]
  type: 'create' | 'edit' | 'view'
  mode?: OperationMeetingDrawerMode
  meetings?: OperationMeetingFormItem[]
  extProperties?: ExtPropertyItem[]
  deptOptions?: DeptOption[]
  loading?: boolean
  showMeetingMeta?: boolean
  companyFilterValue?: string
}

interface DetailCardField {
  label: string
  prop?: keyof DetailItem
  unit?: string
  numeric?: boolean
}

interface MeetingTableCellStyleProps {
  column: {
    property?: string
  }
}

interface WorkloadDetailTableRow {
  identifier: string
  label: string
  values: string[]
  total: string
}

const props = withDefaults(defineProps<Props>(), {
  mode: 'fill',
  meetings: () => [],
  extProperties: () => [],
  deptOptions: () => [],
  loading: false,
  showMeetingMeta: true,
  companyFilterValue: ''
})

const emits = defineEmits<{
  'update:meeting': [meeting: OperationMeetingForm]
  'update:companyFilterValue': [value: string]
  'add-detail': []
  'edit-detail': [row: DetailItem, index: number]
  'delete-detail': [index: number]
}>()

const { ZmTable, ZmTableColumn } = useTableComponents<DetailItem>()
const { ZmTable: WorkloadZmTable, ZmTableColumn: WorkloadZmTableColumn } =
  useTableComponents<WorkloadDetailTableRow>()

const detailSummaryFields = [
  'currentRevenue',
  'cumulativeRevenue',
  'currentOnAccount',
  'cumulativeOnAccount',
  'currentPayment',
  'cumulativePayment'
] as const

type DetailSummaryField = (typeof detailSummaryFields)[number]
type DetailSummaryBeforeField = 'beforeRevenue' | 'beforeOnAccount' | 'beforePayment'

const detailSummaryLabelMap: Record<DetailSummaryField, string> = {
  currentRevenue: '收入-本期',
  cumulativeRevenue: '收入-累计',
  currentOnAccount: '挂帐-本期',
  cumulativeOnAccount: '挂帐-累计',
  currentPayment: '回款-本期',
  cumulativePayment: '回款-累计'
}

const detailSummaryToneMap: Record<DetailSummaryField, 'revenue' | 'account' | 'payment'> = {
  currentRevenue: 'revenue',
  cumulativeRevenue: 'revenue',
  currentOnAccount: 'account',
  cumulativeOnAccount: 'account',
  currentPayment: 'payment',
  cumulativePayment: 'payment'
}

const detailSummaryIconMap: Record<DetailSummaryField, string> = {
  currentRevenue: 'i-lucide:badge-japanese-yen',
  cumulativeRevenue: 'i-lucide:badge-japanese-yen',
  currentOnAccount: 'i-lucide:badge-alert',
  cumulativeOnAccount: 'i-lucide:badge-alert',
  currentPayment: 'i-lucide:badge-check',
  cumulativePayment: 'i-lucide:badge-check'
}

const detailSummaryBeforeFieldMap: Partial<Record<DetailSummaryField, DetailSummaryBeforeField>> = {
  currentRevenue: 'beforeRevenue',
  currentOnAccount: 'beforeOnAccount',
  currentPayment: 'beforePayment'
}

const businessDetailCardFields: DetailCardField[] = [
  { label: '收入-本期', prop: 'currentRevenue', unit: '万元', numeric: true },
  { label: '收入-累计', prop: 'cumulativeRevenue', unit: '万元', numeric: true },
  { label: '挂帐-本期', prop: 'currentOnAccount', unit: '万元', numeric: true },
  { label: '挂帐-累计', prop: 'cumulativeOnAccount', unit: '万元', numeric: true },
  { label: '回款-本期', prop: 'currentPayment', unit: '万元', numeric: true },
  { label: '回款-累计', prop: 'cumulativePayment', unit: '万元', numeric: true }
]

const managementDetailCardFields: DetailCardField[] = [
  { label: '重点工作及完成情况', prop: 'keyWorkCompletion' },
  { label: '存在问题及分析', prop: 'problemsAnalysis' },
  { label: '设备、安全管理工作', prop: 'qhse' }
]

const nextPlanBaseDetailCardFields: DetailCardField[] = [
  { label: '计划工作量', prop: 'nextPlannedWorkload' },
  { label: '重点工作事项', prop: 'priorityTasks' }
]

const meetingTableBlueColumns = new Set<keyof DetailItem>(['keyWorkCompletion', 'problemsAnalysis'])

const isSummaryMode = computed(() => props.mode === 'summary')
const canEditDetails = computed(() => !isSummaryMode.value && props.type !== 'view')
const detailPanelVisible = ref(true)
const workloadDetailVisible = ref(false)
const meetingHeaderVisible = computed(() => detailPanelVisible.value)

watch(isSummaryMode, (summaryMode) => {
  if (summaryMode) {
    detailPanelVisible.value = true
  }
})

const activeMeetings = computed<OperationMeetingFormItem[]>(() => {
  if (props.meetings.length) return props.meetings

  return [
    {
      key: 'current',
      meeting: props.meeting,
      details: props.details,
      extProperty: [],
      beforeRevenue: undefined,
      beforeOnAccount: undefined,
      beforePayment: undefined
    }
  ]
})

const summaryMeetingMeta = computed<OperationMeetingForm>(
  () => activeMeetings.value[0]?.meeting || props.meeting || {}
)

const getCompanyDisplayName = (meeting: OperationMeetingForm) => {
  if (meeting.companyName) {
    return meeting.companyName
  }

  if (meeting.deptId) {
    return props.deptOptions.find((item) => item.value === meeting.deptId)?.label || ''
  }

  return ''
}

const getCompanyFilterValue = (meeting: OperationMeetingForm, index: number) => {
  if (meeting.deptId !== undefined) return `dept:${meeting.deptId}`

  const companyName = getCompanyDisplayName(meeting).trim()

  return companyName ? `company:${companyName}` : `unknown:${index}`
}

const companyDisplayName = computed(() => getCompanyDisplayName(props.meeting))

const companyFilterModel = computed({
  get: () => props.companyFilterValue,
  set: (value) => emits('update:companyFilterValue', value || '')
})

const companyOptions = computed(() => {
  const optionMap = new Map<string, { label: string; value: string }>()

  activeMeetings.value.forEach((item, index) => {
    const value = getCompanyFilterValue(item.meeting, index)

    if (optionMap.has(value)) return

    optionMap.set(value, {
      value,
      label: getCompanyDisplayName(item.meeting) || '未知公司'
    })
  })

  return Array.from(optionMap.values())
})

const summaryDetailRows = computed<SummaryDetailItem[]>(() =>
  activeMeetings.value.flatMap((item, meetingIndex) => {
    const companyFilterValue = getCompanyFilterValue(item.meeting, meetingIndex)
    const companyName = getCompanyDisplayName(item.meeting) || '未知公司'

    return item.details.map((detail, detailIndex) => ({
      ...detail,
      summaryDetailKey: `${item.key}-${detailIndex}`,
      meetingKey: item.key,
      companyName,
      cumulative: item.meeting.cumulative,
      companyFilterValue,
      deptId: item.meeting.deptId
    }))
  })
)

const filteredSummaryDetailRows = computed(() => {
  if (!props.companyFilterValue) return summaryDetailRows.value

  return summaryDetailRows.value.filter(
    (item) => item.companyFilterValue === props.companyFilterValue
  )
})

const displayDetails = computed<DetailItem[]>(() =>
  isSummaryMode.value ? filteredSummaryDetailRows.value : props.details
)

const currentSummaryScopeName = computed(
  () =>
    companyOptions.value.find((item) => item.value === props.companyFilterValue)?.label ||
    '全部公司'
)

const currentSummarySupport = computed(() => {
  if (!props.companyFilterValue) return ''

  return (
    activeMeetings.value.find(
      (item, index) => getCompanyFilterValue(item.meeting, index) === props.companyFilterValue
    )?.meeting.support || ''
  )
})

const currentSummaryMeeting = computed(() => {
  if (!props.companyFilterValue) return undefined

  return activeMeetings.value.find(
    (item, index) => getCompanyFilterValue(item.meeting, index) === props.companyFilterValue
  )
})

const currentWorkloadMeeting = computed(() =>
  isSummaryMode.value ? currentSummaryMeeting.value : activeMeetings.value[0]
)

const workloadScopeName = computed(() =>
  isSummaryMode.value ? currentSummaryScopeName.value : companyDisplayName.value || '公司整体'
)

const meetingSeriesModel = computed({
  get: () => props.meeting.meetingSeries,
  set: (meetingSeries) => emits('update:meeting', { ...props.meeting, meetingSeries })
})

const meetingDateModel = computed({
  get: () => props.meeting.meetingDate,
  set: (meetingDate) => emits('update:meeting', { ...props.meeting, meetingDate })
})

const supportModel = computed({
  get: () => props.meeting.support,
  set: (support) => emits('update:meeting', { ...props.meeting, support })
})

const formatSummaryNumber = (value: number) =>
  value.toLocaleString('zh-CN', {
    maximumFractionDigits: 2,
    minimumFractionDigits: Number.isInteger(value) ? 0 : 2
  })

const getCompareTrendIcon = (value: number) =>
  value > 0 ? 'i-lucide:trending-up' : value < 0 ? 'i-lucide:trending-down' : 'i-lucide:minus'

const getSummaryRows = () => {
  if (!isSummaryMode.value) return props.details
  if (props.companyFilterValue) return filteredSummaryDetailRows.value

  const cumulativeRows = summaryDetailRows.value.filter((item) => item.cumulative)

  return cumulativeRows.length ? cumulativeRows : summaryDetailRows.value
}

const getSummaryMeetings = () => {
  if (!isSummaryMode.value) return activeMeetings.value
  if (props.companyFilterValue)
    return currentSummaryMeeting.value ? [currentSummaryMeeting.value] : []

  const cumulativeMeetings = activeMeetings.value.filter((item) => item.meeting.cumulative)

  return cumulativeMeetings.length ? cumulativeMeetings : activeMeetings.value
}

const getDetailSummaryTotal = (field: DetailSummaryField) => {
  return getSummaryRows().reduce((sum, item) => sum + Number(item[field] || 0), 0)
}

const getDetailSummaryBeforeTotal = (field: DetailSummaryField) => {
  const beforeField = detailSummaryBeforeFieldMap[field]

  if (!beforeField) return undefined

  return getSummaryMeetings().reduce((sum, item) => sum + Number(item[beforeField] || 0), 0)
}

const getDetailSummaryCompare = (field: DetailSummaryField) => {
  const currentValue = getDetailSummaryTotal(field)
  const beforeValue = getDetailSummaryBeforeTotal(field)

  if (beforeValue === undefined || beforeValue === 0) return undefined

  const compareValue = ((currentValue - beforeValue) / Math.abs(beforeValue)) * 100

  return {
    value: `${compareValue > 0 ? '+' : ''}${formatSummaryNumber(compareValue)}%`,
    trend: compareValue > 0 ? 'up' : compareValue < 0 ? 'down' : 'flat',
    icon: getCompareTrendIcon(compareValue)
  }
}

const detailSummaryCards = computed(() =>
  detailSummaryFields.map((field) => ({
    label: detailSummaryLabelMap[field],
    value: formatSummaryNumber(getDetailSummaryTotal(field)),
    tone: detailSummaryToneMap[field],
    icon: detailSummaryIconMap[field],
    compare: getDetailSummaryCompare(field)
  }))
)

const showMeetingMetaFields = computed(() => props.type !== 'view' || props.showMeetingMeta)
const showSupportPanel = computed(
  () => !isSummaryMode.value || Boolean(currentSummarySupport.value)
)

const isNextExtProperty = (item: ExtPropertyItem) => item.defaultValue === 'next'

const isVisibleWorkloadExtProperty = (item: ExtPropertyItem) =>
  item.required === true || item.required === 1 || item.required === '1'

const getExtPropertyLabel = (item: ExtPropertyItem) =>
  item.unit ? `${item.name}(${item.unit})` : item.name

const getSortedExtProperties = (items: ExtPropertyItem[]) =>
  items.filter((item) => item.identifier).sort((a, b) => Number(a.sort || 0) - Number(b.sort || 0))

const normalizeWorkloadPropertyKey = (value: unknown) => String(value ?? '').trim()
const normalizeWorkloadPropertyName = (value: unknown) =>
  normalizeWorkloadPropertyKey(value)
    .replace(/（.*?）|\(.*?\)/g, '')
    .trim()

const parseWorkloadExtProperties = (data: unknown): ExtPropertyItem[] => {
  if (Array.isArray(data)) return data as ExtPropertyItem[]

  if (typeof data === 'string') {
    const text = data.trim()
    if (!text) return []

    try {
      return parseWorkloadExtProperties(JSON.parse(text))
    } catch {
      return []
    }
  }

  if (!data || typeof data !== 'object') return []

  const record = data as Record<string, unknown>
  const values = Object.values(record)

  if (values.every((item) => item && typeof item === 'object')) {
    return values as ExtPropertyItem[]
  }

  return Object.entries(record).map(([identifier, actualValue]) => ({
    name: identifier,
    identifier,
    dataType: typeof actualValue === 'number' ? 'double' : '',
    required: 0,
    actualValue: actualValue as ExtPropertyActualValue
  }))
}

const getRecordValue = (data: unknown, key: string) =>
  data && typeof data === 'object' ? (data as Record<string, unknown>)[key] : undefined

const hasWorkloadPropertyValue = (item?: ExtPropertyItem) =>
  item?.actualValue !== undefined && item.actualValue !== null && item.actualValue !== ''

const isSameWorkloadProperty = (item: ExtPropertyItem, target: ExtPropertyItem) => {
  const itemIdentifier = normalizeWorkloadPropertyKey(item.identifier)
  const targetIdentifier = normalizeWorkloadPropertyKey(target.identifier)

  if (itemIdentifier && targetIdentifier && itemIdentifier === targetIdentifier) return true

  const itemName = normalizeWorkloadPropertyName(item.name)
  const targetName = normalizeWorkloadPropertyName(target.name)

  return Boolean(itemName && targetName && itemName === targetName)
}

const findWorkloadProperty = (items: ExtPropertyItem[] | undefined, target: ExtPropertyItem) => {
  const candidates = (items || []).filter((item) => isSameWorkloadProperty(item, target))

  return candidates.find(hasWorkloadPropertyValue) || candidates[0]
}

const mergeWorkloadProperty = (target: ExtPropertyItem, matched: ExtPropertyItem) => ({
  ...target,
  ...matched,
  name: matched.name || target.name,
  identifier: matched.identifier || target.identifier,
  dataType: matched.dataType || target.dataType,
  unit: matched.unit || target.unit,
  actualValue: matched.actualValue
})

const getDetailRawWorkloadProperties = (detail: DetailItem) => [
  ...parseWorkloadExtProperties(detail.raw?.extProperty),
  ...parseWorkloadExtProperties(detail.raw?.extProperties),
  ...parseWorkloadExtProperties(getRecordValue(detail, 'extProperties'))
]

const getDetailDirectWorkloadValue = (detail: DetailItem, property: ExtPropertyItem) => {
  const keys = [
    normalizeWorkloadPropertyKey(property.identifier),
    normalizeWorkloadPropertyKey(property.name),
    normalizeWorkloadPropertyName(property.name)
  ].filter(Boolean)

  for (const key of keys) {
    const value = getRecordValue(detail.raw, key) ?? getRecordValue(detail, key)

    if (value !== undefined && value !== null && value !== '') {
      return value
    }
  }

  return undefined
}

const appendWorkloadProperty = (
  propertyMap: Map<string, ExtPropertyItem>,
  item: ExtPropertyItem
) => {
  const identifier = normalizeWorkloadPropertyKey(item.identifier)

  if (!identifier || isNextExtProperty(item) || !isVisibleWorkloadExtProperty(item)) return

  if (Array.from(propertyMap.values()).some((property) => isSameWorkloadProperty(property, item))) {
    return
  }

  propertyMap.set(identifier, item)
}

const currentSummaryWorkloadProperties = computed(() =>
  getSortedExtProperties(
    (currentWorkloadMeeting.value?.extProperty || []).filter(
      (item) => !isNextExtProperty(item) && isVisibleWorkloadExtProperty(item)
    )
  )
)

const getWorkloadPropertyMetricText = (item: ExtPropertyItem) =>
  `${normalizeWorkloadPropertyKey(item.identifier)}${normalizeWorkloadPropertyName(item.name)}`
    .toLowerCase()
    .replace(/[\s%]/g, '')

const isEquipmentUtilizationWorkloadProperty = (item: ExtPropertyItem) => {
  const text = getWorkloadPropertyMetricText(item)

  return (
    text.includes('设备利用率') ||
    text.includes('equipmentutilization') ||
    text.includes('utilizationrate')
  )
}

const isCompareWorkloadProperty = (item: ExtPropertyItem) => {
  const text = getWorkloadPropertyMetricText(item)

  return (
    text.includes('环比') ||
    text.includes('monthonmonth') ||
    text.includes('mom') ||
    text.includes('chainratio')
  )
}

const isSideWorkloadProperty = (item: ExtPropertyItem) =>
  isEquipmentUtilizationWorkloadProperty(item) || isCompareWorkloadProperty(item)

const primarySummaryWorkloadProperties = computed(() =>
  currentSummaryWorkloadProperties.value.filter((item) => !isSideWorkloadProperty(item))
)

const sideSummaryWorkloadProperties = computed(() =>
  currentSummaryWorkloadProperties.value.filter(isSideWorkloadProperty)
)

const splitSummaryWorkload = computed(
  () =>
    primarySummaryWorkloadProperties.value.length > 0 &&
    sideSummaryWorkloadProperties.value.length > 0
)

const displayedSummaryWorkloadProperties = computed(() =>
  splitSummaryWorkload.value
    ? primarySummaryWorkloadProperties.value
    : currentSummaryWorkloadProperties.value
)

const workloadToneList = ['blue', 'emerald', 'amber', 'violet', 'cyan', 'rose'] as const

const getSummaryWorkloadTone = (item: ExtPropertyItem, index: number) => {
  const text = getWorkloadPropertyMetricText(item)

  if (isEquipmentUtilizationWorkloadProperty(item)) return 'cyan'
  if (isCompareWorkloadProperty(item)) return 'rose'
  if (text.includes('计划') || text.includes('plan')) return 'blue'
  if (text.includes('实际') || text.includes('actual')) return 'emerald'
  if (text.includes('完成') || text.includes('complete') || text.includes('finish')) return 'amber'
  if (text.includes('累计') || text.includes('cumulative') || text.includes('total'))
    return 'violet'

  return workloadToneList[index % workloadToneList.length]
}

const getSummaryWorkloadIcon = (item: ExtPropertyItem) => {
  if (!isCompareWorkloadProperty(item)) return 'i-lucide:chart-column'

  const value = Number(String(item.actualValue ?? 0).replace('%', ''))

  return getCompareTrendIcon(Number.isNaN(value) ? 0 : value)
}

const showSummaryWorkload = computed(
  () =>
    props.type === 'view' &&
    (!isSummaryMode.value || Boolean(props.companyFilterValue)) &&
    currentSummaryWorkloadProperties.value.length > 0
)

const formatWorkloadPropertyValue = (item: ExtPropertyItem) => {
  const value = item.actualValue

  if (value === undefined || value === null || value === '') {
    return '-'
  }

  if (item.dataType !== 'double') {
    return `${value}${item.unit || ''}`
  }

  const numericValue = Number(value)

  if (Number.isNaN(numericValue)) {
    return '-'
  }

  return `${formatSummaryNumber(numericValue)}${item.unit || ''}`
}

const workloadDetailColumns = computed(() => currentWorkloadMeeting.value?.details || [])
const workloadDetailRows = computed(() => {
  const propertyMap = new Map<string, ExtPropertyItem>()

  currentSummaryWorkloadProperties.value.forEach((item) =>
    appendWorkloadProperty(propertyMap, item)
  )

  workloadDetailColumns.value.forEach((detail) => {
    const extProperty = [...(detail.extProperty || []), ...getDetailRawWorkloadProperties(detail)]

    extProperty.forEach((item) => appendWorkloadProperty(propertyMap, item))
  })

  return getSortedExtProperties(Array.from(propertyMap.values()))
})

const getWorkloadDetailCellValue = (detail: DetailItem, property: ExtPropertyItem) => {
  const matchedProperty =
    findWorkloadProperty(detail.extProperty, property) ||
    findWorkloadProperty(getDetailRawWorkloadProperties(detail), property)

  if (matchedProperty) {
    return formatWorkloadPropertyValue(mergeWorkloadProperty(property, matchedProperty))
  }

  const directValue = getDetailDirectWorkloadValue(detail, property)

  return directValue === undefined
    ? '-'
    : formatWorkloadPropertyValue({
        ...property,
        actualValue: directValue as ExtPropertyActualValue
      })
}

const getWorkloadDetailTotalValue = (property: ExtPropertyItem) => {
  const matchedProperty = findWorkloadProperty(currentSummaryWorkloadProperties.value, property)

  return matchedProperty ? formatWorkloadPropertyValue(matchedProperty) : '-'
}

const workloadDetailTableRows = computed<WorkloadDetailTableRow[]>(() =>
  workloadDetailRows.value.map((row) => ({
    identifier: row.identifier,
    label: getExtPropertyLabel(row),
    values: workloadDetailColumns.value.map((detail) => getWorkloadDetailCellValue(detail, row)),
    total: getWorkloadDetailTotalValue(row)
  }))
)

const getWorkloadDetailColumnLabel = (detail: DetailItem, index: number) =>
  detail.projectName || `项目${index + 1}`

const getWorkloadDetailColumnKey = (detail: DetailItem, index: number) =>
  `${getWorkloadDetailColumnLabel(detail, index)}-${index}`

const getWorkloadDetailProjectValue = (row: WorkloadDetailTableRow, index: number) =>
  row.values[index] || '-'

const detailCardGroups = computed(() => [
  {
    title: '经营情况',
    fields: businessDetailCardFields
  },
  {
    title: '生产管理情况及重点工作',
    fields: managementDetailCardFields
  },
  {
    title: '下期工作计划',
    fields: nextPlanBaseDetailCardFields
  }
])

const formatDetailCardValue = (item: DetailItem, field: DetailCardField) => {
  if (!field.prop) return '-'

  const value = item[field.prop]

  if (value === undefined || value === null || value === '') {
    return '-'
  }

  if (!field.numeric) {
    return String(value)
  }

  const numericValue = Number(value)

  if (Number.isNaN(numericValue)) {
    return '-'
  }

  return `${formatSummaryNumber(numericValue)}${field.unit || ''}`
}

const getDetailCardKey = (item: DetailItem, index: number) =>
  isSummaryMode.value && 'summaryDetailKey' in item
    ? (item as SummaryDetailItem).summaryDetailKey
    : index

const getSummaryDetailCompanyName = (item: DetailItem) =>
  'companyName' in item ? String((item as SummaryDetailItem).companyName || '-') : '-'

const getMeetingTableCellStyle: any = ({
  column
}: MeetingTableCellStyleProps): CSSProperties | undefined => {
  const property = column.property as keyof DetailItem | undefined

  if (property && meetingTableBlueColumns.has(property)) {
    return { color: '#1b71f6' }
  }

  return property ? { color: '#000' } : undefined
}

const getMeetingTableRowStyle = (): CSSProperties => ({
  height: 'auto',
  minHeight: '40px'
})

const getMeetingTableCellClassName = ({ column }: MeetingTableCellStyleProps) => {
  const property = column.property as keyof DetailItem | undefined

  return property ? 'meeting-table__cell' : ''
}
</script>

<template>
  <section class="p-2 bg-white border-solid border-1 border-gray-200/90 rounded-xl">
    <div v-show="meetingHeaderVisible">
      <div class="meeting-section__top">
        <h2 class="meeting-section__title">生产运营双周例会汇报</h2>

        <div
          :class="[
            'meeting-section__grid',
            { 'meeting-section__grid--company-only': !showMeetingMetaFields }
          ]">
          <el-form-item
            v-if="showMeetingMetaFields"
            label="会议期次"
            label-position="left"
            prop="meetingSeries"
            class="mb-0! min-w-0">
            <el-input-number
              v-if="isSummaryMode"
              :model-value="summaryMeetingMeta.meetingSeries"
              class="w-full!"
              placeholder="暂无会议期次"
              disabled
              :controls="false" />
            <el-input-number
              v-else
              v-model="meetingSeriesModel"
              class="w-full!"
              placeholder="请输入会议期次"
              :disabled="type === 'view'"
              :controls="false"
              :min="1"
              :step="1"
              :precision="0" />
          </el-form-item>

          <el-form-item label="专业公司" label-position="left" class="mb-0! min-w-0">
            <el-select
              v-if="isSummaryMode"
              v-model="companyFilterModel"
              class="w-full!"
              placeholder="全部公司"
              clearable
              filterable>
              <el-option
                v-for="item in companyOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
            <el-input
              v-else
              :model-value="companyDisplayName"
              class="w-full!"
              placeholder="新建保存后系统自动填充"
              disabled />
            <div
              v-if="!isSummaryMode && type === 'create'"
              class="absolute text-xs text-gray top-8">
              新建保存后由系统自动填充。
            </div>
          </el-form-item>

          <el-form-item
            v-if="showMeetingMetaFields"
            label="会议日期"
            label-position="left"
            prop="meetingDate"
            class="mb-0! min-w-0">
            <el-date-picker
              v-if="isSummaryMode"
              :model-value="summaryMeetingMeta.meetingDate"
              type="date"
              placeholder="暂无会议日期"
              disabled
              class="w-full!" />
            <el-date-picker
              v-else
              v-model="meetingDateModel"
              type="date"
              placeholder="请选择会议日期"
              :disabled="type === 'view'"
              class="w-full!" />
          </el-form-item>
        </div>
      </div>

      <section class="meeting-summary-strip">
        <div class="meeting-summary-strip__title">
          <span>{{ isSummaryMode ? currentSummaryScopeName : '公司整体' }}</span>
          <small>经营数据汇总</small>
        </div>
        <div class="meeting-summary-strip__grid">
          <div
            v-for="item in detailSummaryCards"
            :key="item.label"
            :class="[
              'meeting-summary-strip__item',
              `meeting-summary-strip__item--${item.tone}`,
              { 'meeting-summary-strip__item--no-compare': !item.compare }
            ]">
            <div :class="item.icon + ' size-5 icon'"></div>
            <span>{{ item.label }}</span>
            <strong>{{ item.value }}<em>万元</em></strong>
            <small
              v-if="item.compare"
              :class="[
                'meeting-summary-strip__compare',
                `meeting-summary-strip__compare--${item.compare.trend}`
              ]">
              <i :class="[item.compare.icon, 'meeting-summary-strip__compare-icon']"></i>
              环比 {{ item.compare.value }}
            </small>
          </div>
        </div>
      </section>

      <section v-if="showSummaryWorkload" class="meeting-workload-strip">
        <div class="meeting-workload-strip__title">
          <span>{{ workloadScopeName }}</span>
          <small>工作量完成情况</small>
          <el-button
            class="meeting-workload-strip__detail"
            link
            size="small"
            type="primary"
            @click="workloadDetailVisible = true">
            查看详情
          </el-button>
        </div>
        <div
          :class="[
            'meeting-workload-strip__content',
            { 'meeting-workload-strip__content--split': splitSummaryWorkload }
          ]">
          <div class="meeting-workload-strip__grid">
            <div
              v-for="(item, index) in displayedSummaryWorkloadProperties"
              :key="item.identifier"
              :class="[
                'meeting-workload-strip__item',
                `meeting-workload-strip__item--${getSummaryWorkloadTone(item, index)}`
              ]">
              <div :class="[getSummaryWorkloadIcon(item), 'size-5 icon']"></div>
              <span>{{ item.name }}</span>
              <strong>{{ formatWorkloadPropertyValue(item) }}</strong>
            </div>
          </div>
          <div v-if="splitSummaryWorkload" class="meeting-workload-strip__side">
            <div
              v-for="(item, index) in sideSummaryWorkloadProperties"
              :key="item.identifier"
              :class="[
                'meeting-workload-strip__item',
                'meeting-workload-strip__item--side',
                `meeting-workload-strip__item--${getSummaryWorkloadTone(
                  item,
                  index + primarySummaryWorkloadProperties.length
                )}`
              ]">
              <div :class="[getSummaryWorkloadIcon(item), 'size-5 icon']"></div>
              <span>{{ item.name }}</span>
              <strong>{{ formatWorkloadPropertyValue(item) }}</strong>
            </div>
          </div>
        </div>
      </section>
    </div>

    <el-dialog
      v-model="workloadDetailVisible"
      :title="`${workloadScopeName}工作量完成情况详情`"
      class="meeting-workload-detail-dialog"
      width="60%">
      <div class="meeting-workload-detail">
        <WorkloadZmTable
          class="meeting-workload-detail__table"
          :data="workloadDetailTableRows"
          :loading="false"
          :stripe="false"
          :max-height="560"
          :show-overflow-tooltip="false">
          <WorkloadZmTableColumn label="项目名称" prop="label" fixed="left" />
          <WorkloadZmTableColumn
            v-for="(detail, index) in workloadDetailColumns"
            :key="getWorkloadDetailColumnKey(detail, index)"
            :label="getWorkloadDetailColumnLabel(detail, index)"
            :prop="`values.${index}`"
            :formatter="(row) => getWorkloadDetailProjectValue(row, index)" />
          <WorkloadZmTableColumn :label="`${currentSummaryScopeName}合计`" prop="total" />
        </WorkloadZmTable>
      </div>
    </el-dialog>

    <section
      :class="[
        'meeting-detail-panel',
        { 'meeting-detail-panel--collapsed': !meetingHeaderVisible }
      ]">
      <el-button
        :class="['meeting-detail-toggle', { 'mb-2': meetingHeaderVisible }]"
        size="default"
        link
        @click="() => (detailPanelVisible = !detailPanelVisible)">
        <div class="flex items-center gap-1">
          <div
            :class="[
              'i-lucide:chevron-right size-4 meeting-detail-toggle__icon',
              { 'meeting-detail-toggle__icon--expanded': detailPanelVisible }
            ]"></div>
          <!-- {{ visible ? '收起' : '展开' }} -->
        </div>
      </el-button>
      <div v-if="meetingHeaderVisible" class="flex items-center justify-between gap-4 mb-4">
        <h3 class="text-lg font-bold m-0">会议明细</h3>
        <el-tag v-if="isSummaryMode" size="small" effect="plain">
          共 {{ displayDetails.length }} 项
        </el-tag>
        <el-button v-else-if="canEditDetails" type="primary" @click="emits('add-detail')">
          <Icon icon="ep:plus" class="mr-5px" />
          新增一行
        </el-button>
      </div>
      <div class="meeting-detail-table-view">
        <ZmTable
          class="meeting-table"
          :data="displayDetails"
          :loading="loading"
          align="left"
          :show-overflow-tooltip="false"
          :cell-style="getMeetingTableCellStyle"
          :row-style="getMeetingTableRowStyle"
          :cell-class-name="getMeetingTableCellClassName">
          <zm-table-column
            v-if="isSummaryMode"
            min-width="6%"
            align="center"
            label="专业公司"
            prop="companyName"
            fixed="left" />
          <zm-table-column
            :min-width="isSummaryMode ? '6%' : '8%'"
            align="center"
            label="项目名称"
            prop="projectName" />
          <zm-table-column min-width="26%" label="生产管理情况及重点工作	">
            <zm-table-column min-width="14%" label="重点工作及完成情况" prop="keyWorkCompletion" />
            <zm-table-column min-width="12%" label="存在问题及分析" prop="problemsAnalysis" />
          </zm-table-column>
          <zm-table-column min-width="16%" label="设备、安全管理工作" prop="qhse" />
          <zm-table-column min-width="29%" label="下期工作计划		">
            <zm-table-column min-width="10%" label="计划工作量" prop="nextPlannedWorkload" />
            <zm-table-column min-width="19%" label="重点工作事项" prop="priorityTasks" />
          </zm-table-column>
          <zm-table-column label="操作" min-width="5%" align="center" fixed="right">
            <template #default="{ row, $index }">
              <div class="meeting-table__actions">
                <el-button
                  link
                  size="default"
                  type="primary"
                  @click="emits('edit-detail', row, $index)">
                  {{ type === 'view' || isSummaryMode ? '查看' : '编辑' }}
                </el-button>
                <el-button
                  v-if="canEditDetails"
                  link
                  size="default"
                  type="danger"
                  @click="emits('delete-detail', $index)">
                  删除
                </el-button>
              </div>
            </template>
          </zm-table-column>
        </ZmTable>
      </div>

      <div v-loading="loading" class="meeting-detail-card-view">
        <template v-if="displayDetails.length">
          <article
            v-for="(item, index) in displayDetails"
            :key="getDetailCardKey(item, index)"
            class="meeting-detail-card">
            <div class="meeting-detail-card__header">
              <div class="meeting-detail-card__title">
                <span>项目名称</span>
                <strong>{{ item.projectName || '-' }}</strong>
              </div>
              <el-tag size="small" effect="plain">第 {{ index + 1 }} 项</el-tag>
            </div>

            <div v-if="isSummaryMode" class="meeting-detail-card__company">
              <span>专业公司</span>
              <strong>{{ getSummaryDetailCompanyName(item) }}</strong>
            </div>

            <section
              v-for="group in detailCardGroups"
              :key="group.title"
              class="meeting-detail-card__group">
              <h4>{{ group.title }}</h4>
              <div class="meeting-detail-card__fields">
                <div
                  v-for="field in group.fields"
                  :key="field.prop"
                  class="meeting-detail-card__field">
                  <span>{{ field.label }}</span>
                  <strong>{{ formatDetailCardValue(item, field) }}</strong>
                </div>
              </div>
            </section>

            <div class="meeting-detail-card__actions">
              <el-button
                link
                size="small"
                type="primary"
                @click="emits('edit-detail', item, index)">
                {{ type === 'view' || isSummaryMode ? '查看' : '编辑' }}
              </el-button>
              <el-button
                v-if="canEditDetails"
                link
                size="small"
                type="danger"
                @click="emits('delete-detail', index)">
                删除
              </el-button>
            </div>
          </article>
        </template>
        <el-empty v-else description="暂无会议明细" :image-size="80" />
      </div>
    </section>

    <section v-if="showSupportPanel" class="meeting-support-panel">
      <el-form-item
        label="其他重点事项及需要集团协调事项"
        :prop="isSummaryMode ? undefined : 'support'"
        class="meeting-form-item min-w-0">
        <el-input
          v-if="isSummaryMode"
          :model-value="currentSummarySupport"
          type="textarea"
          :rows="4"
          readonly />
        <el-input
          v-else
          v-model="supportModel"
          type="textarea"
          :rows="4"
          :disabled="type === 'view'"
          placeholder="请输入其他重点事项及需要集团协调事项" />
      </el-form-item>
    </section>
  </section>
</template>

<style scoped lang="scss">
.meeting-section__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 20px;
}

.meeting-section__grid--company-only {
  grid-template-columns: minmax(280px, 420px);
  justify-content: start;
}

.meeting-section__top {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 240px;
  align-items: start;
  margin-bottom: 18px;
}

.meeting-section__title {
  padding-top: 4px;
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 32px;
  color: #1f2937;
  white-space: nowrap;
  transform: translateY(-4px);
}

:deep(.el-form-item__label) {
  font-weight: 800;
  color: #1f2937;
}

.meeting-summary-strip {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  padding: 6px 8px;
  background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
  border: 1px solid #dbeafe;
  border-radius: 8px;
}

.meeting-summary-strip__title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 8px;
  border-right: 1px solid #dbeafe;

  span {
    font-size: 14px;
    font-weight: 800;
    line-height: 20px;
    color: #1f2937;
  }

  small {
    margin-top: 0;
    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
    color: #64748b;
  }
}

.meeting-summary-strip__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
}

.meeting-summary-strip__item {
  display: grid;
  grid-template-rows: repeat(2, minmax(16px, auto));
  grid-template-columns: minmax(86px, 1fr) max-content;
  min-width: 0;
  align-items: center;
  gap: 0 8px;
  padding: 4px 6px;
  background: rgb(255 255 255 / 72%);
  border: 1px solid rgb(219 234 254 / 70%);
  border-radius: 7px;

  .icon {
    grid-row: 1 / 3;
    grid-column: 1;
    place-self: center start;
  }

  span {
    display: block;
    grid-row: 1 / 3;
    grid-column: 1;
    min-width: 0;
    padding-left: 24px;
    align-self: center;
    overflow: hidden;
    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
    color: #1f2937;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  strong {
    display: flex;
    grid-row: 1;
    grid-column: 2;
    min-width: 0;
    align-items: baseline;
    justify-content: flex-end;
    align-self: end;
    gap: 3px;
    margin-top: 0;
    overflow: hidden;
    font-size: 15px;
    font-weight: 800;
    line-height: 18px;
    color: #1b71f6;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  em {
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    color: #64748b;
  }
}

.meeting-summary-strip__compare {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  grid-row: 2;
  grid-column: 2;
  align-items: center;
  gap: 3px;
  justify-self: end;
}

.meeting-summary-strip__compare-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.meeting-summary-strip__item--no-compare {
  strong {
    grid-row: 1 / 3;
    align-self: center;
  }
}

.meeting-summary-strip__compare--up {
  color: #10b981;
}

.meeting-summary-strip__compare--down {
  color: #ef4444;
}

.meeting-summary-strip__compare--flat {
  color: #64748b;
}

.meeting-workload-strip {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  padding: 6px 8px;
  margin-top: 10px;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border: 1px solid #d1fae5;
  border-radius: 8px;
}

.meeting-workload-strip__title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding-right: 8px;
  border-right: 1px solid #d1fae5;

  span {
    overflow: hidden;
    font-size: 14px;
    font-weight: 800;
    line-height: 20px;
    color: #1f2937;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  small {
    margin-top: 0;
    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
    color: #64748b;
  }
}

.meeting-workload-strip__detail {
  align-self: flex-start;
  padding: 0;
  margin-top: 2px;
}

.meeting-workload-strip__content {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.meeting-workload-strip__content--split {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);

  .meeting-workload-strip__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.meeting-workload-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.meeting-workload-strip__side {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.meeting-workload-strip__item {
  --workload-card-accent: #2563eb;
  --workload-card-bg-end: #fff;
  --workload-card-bg-start: #eff6ff;
  --workload-card-border: #bfdbfe;
  --workload-card-value: #1d4ed8;

  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 4px 6px;
  background: linear-gradient(
    180deg,
    var(--workload-card-bg-start) 0%,
    var(--workload-card-bg-end) 100%
  );
  border: 1px solid var(--workload-card-border);
  border-radius: 7px;

  .icon {
    flex-shrink: 0;
    color: var(--workload-card-accent);
  }

  span {
    display: block;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
    color: #1f2937;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  strong {
    min-width: 0;
    flex-shrink: 0;
    overflow: hidden;
    font-size: 15px;
    font-weight: 800;
    line-height: 18px;
    color: var(--workload-card-value);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.meeting-workload-strip__item--blue {
  --workload-card-accent: #2563eb;
  --workload-card-bg-start: #eff6ff;
  --workload-card-border: #bfdbfe;
  --workload-card-value: #1d4ed8;
}

.meeting-workload-strip__item--emerald {
  --workload-card-accent: #059669;
  --workload-card-bg-start: #ecfdf5;
  --workload-card-border: #a7f3d0;
  --workload-card-value: #047857;
}

.meeting-workload-strip__item--amber {
  --workload-card-accent: #d97706;
  --workload-card-bg-start: #fffbeb;
  --workload-card-border: #fde68a;
  --workload-card-value: #b45309;
}

.meeting-workload-strip__item--violet {
  --workload-card-accent: #7c3aed;
  --workload-card-bg-start: #f5f3ff;
  --workload-card-border: #ddd6fe;
  --workload-card-value: #6d28d9;
}

.meeting-workload-strip__item--cyan {
  --workload-card-accent: #0891b2;
  --workload-card-bg-start: #ecfeff;
  --workload-card-border: #a5f3fc;
  --workload-card-value: #0e7490;
}

.meeting-workload-strip__item--rose {
  --workload-card-accent: #e11d48;
  --workload-card-bg-start: #fff1f2;
  --workload-card-border: #fecdd3;
  --workload-card-value: #be123c;
}

.meeting-workload-detail {
  width: 100%;
  overflow: auto;
}

:deep(.meeting-workload-detail-dialog .el-dialog__title) {
  font-weight: 800;
  color: #111827;
}

.meeting-workload-detail__table {
  width: 100%;
  min-width: 760px;

  :deep(.el-table__header-wrapper th.el-table__cell),
  :deep(.el-table__fixed-header-wrapper th.el-table__cell) {
    background: #fff;
  }

  :deep(.el-table__header-wrapper th.el-table__cell .cell),
  :deep(.el-table__fixed-header-wrapper th.el-table__cell .cell) {
    .truncate {
      font-weight: 800;
      color: #111827;
    }
  }

  :deep(.el-table__cell) {
    border-color: #4b5563;
  }

  :deep(.cell) {
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    color: #111827;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

.meeting-summary-strip__item--revenue strong,
.meeting-summary-strip__item--revenue .icon {
  color: #1b71f6;
}

.meeting-summary-strip__item--revenue {
  background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
  border-color: #bfdbfe;
}

.meeting-summary-strip__item--account strong,
.meeting-summary-strip__item--account .icon {
  color: #f59e0b;
}

.meeting-summary-strip__item--account {
  background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
  border-color: #fde68a;
}

.meeting-summary-strip__item--payment strong,
.meeting-summary-strip__item--payment .icon {
  color: #10b981;
}

.meeting-summary-strip__item--payment {
  background: linear-gradient(180deg, #ecfdf5 0%, #fff 100%);
  border-color: #bbf7d0;
}

.meeting-detail-panel {
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--el-border-color-lighter);
}

.meeting-detail-panel--collapsed {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.meeting-detail-toggle {
  display: flex;
  align-items: center;
  min-height: 28px;
}

.meeting-detail-toggle__icon {
  transition: transform var(--el-transition-duration) ease;
}

.meeting-detail-toggle__icon--expanded {
  transform: rotate(90deg);
}

.meeting-table {
  --zm-table-font-size: 18px;
  --zm-table-header-font-size: 18px;
  --zm-table-header-font-weight: 800;
  --zm-table-row-font-weight: 800;
  --zm-table-header-text-color: #fff;
  --zm-table-border-color: #cbd5e1;
  --zm-table-radius: 0;
  --zm-table-header-border-color: #c2ccda;
  --zm-table-row-border-color: #d4dce8;

  overflow: visible;

  :deep(.el-table__inner-wrapper) {
    overflow: visible;
  }

  :deep(.el-table__body-wrapper),
  :deep(.el-scrollbar),
  :deep(.el-scrollbar__wrap) {
    overflow: visible;
  }

  :deep(.el-scrollbar__bar.is-horizontal) {
    display: block;
  }

  :deep(.el-table__header-wrapper),
  :deep(.el-table__fixed-header-wrapper) {
    position: sticky !important;
    top: -20px;
    z-index: 20;
    width: 100%;
    background: #fff;
  }

  :deep(.el-table__header .el-table__cell),
  :deep(.el-table__fixed-header-wrapper .el-table__cell) {
    color: #fff;
    background-color: #0447ad !important;
  }

  :deep(.el-table__header .cell),
  :deep(.el-table__fixed-header-wrapper .cell),
  :deep(.el-table__header .header-wrapper),
  :deep(.el-table__fixed-header-wrapper .header-wrapper) {
    color: #fff;
  }

  :deep(.header-wrapper) {
    height: 20px;
    justify-content: center !important;
    text-align: center;

    .truncate {
      width: 100%;
      height: 20px;
      text-align: center;
    }
  }

  :deep(.el-table__body .el-table__cell) {
    height: auto;
    padding-top: 7px;
    padding-bottom: 7px;
    vertical-align: middle;

    .cell {
      line-height: 1.5;
      word-break: break-word;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
  }

  :deep(.el-table__body .el-table__row) {
    height: auto;
  }

  :deep(.el-table__body .el-table__row > .el-table__cell) {
    min-height: 40px;
  }

  :deep(.meeting-table__cell) {
    .cell {
      word-break: break-word;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
  }
}

.meeting-table__actions {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;

  :deep(.el-button) {
    margin-left: 0;
  }
}

.meeting-support-panel {
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--el-border-color-lighter);

  :deep(.el-textarea__inner) {
    color: #000;
    -webkit-text-fill-color: #000;
  }
}

.meeting-detail-table-view {
  display: block;
}

.meeting-detail-card-view {
  display: none;
}

.meeting-detail-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px;
  padding-bottom: 4px;
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
}

.meeting-detail-card__header,
.meeting-detail-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.meeting-detail-card__title {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.meeting-detail-card__title span,
.meeting-detail-card__company span,
.meeting-detail-card__field span {
  font-size: 12px;
  line-height: 1.4;
  color: var(--el-text-color-secondary);
}

.meeting-detail-card__title strong {
  overflow: hidden;
  font-size: 16px;
  line-height: 1.35;
  color: var(--el-text-color-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meeting-detail-card__company {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.meeting-detail-card__company strong {
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--el-text-color-primary);
  overflow-wrap: anywhere;
}

.meeting-detail-card__group {
  padding-top: 12px;
  border-top: 1px solid var(--el-border-color-lighter);
}

.meeting-detail-card__group h4 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--el-text-color-primary);
}

.meeting-detail-card__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.meeting-detail-card__field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.meeting-detail-card__field strong {
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--el-text-color-primary);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.meeting-detail-card__actions {
  justify-content: flex-end;
  padding-top: 2px;
  border-top: 1px solid var(--el-border-color-lighter);
}

@media (width <= 960px) {
  .meeting-section__top {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .meeting-section__title {
    padding-top: 0;
    line-height: 24px;
    transform: translateY(0);
  }

  .meeting-section__grid {
    grid-template-columns: 1fr;
  }

  .meeting-summary-strip {
    grid-template-columns: 1fr;
  }

  .meeting-workload-strip {
    grid-template-columns: 1fr;
  }

  .meeting-summary-strip__title {
    padding-right: 0;
    padding-bottom: 12px;
    border-right: 0;
    border-bottom: 1px solid #dbeafe;
  }

  .meeting-workload-strip__title {
    padding-right: 0;
    padding-bottom: 12px;
    border-right: 0;
    border-bottom: 1px solid #d1fae5;
  }

  .meeting-workload-strip__content--split {
    grid-template-columns: 1fr;

    .meeting-workload-strip__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .meeting-workload-strip__side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .meeting-summary-strip__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .meeting-workload-strip__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 768px) {
  .meeting-detail-table-view {
    display: none;
  }

  .meeting-detail-card-view {
    display: flex;
    min-height: 160px;
    flex-direction: column;
    gap: 12px;
  }

  .meeting-summary-strip__grid,
  .meeting-workload-strip__grid,
  .meeting-workload-strip__side,
  .meeting-detail-card__fields {
    grid-template-columns: 1fr;
  }
}
</style>
