<template>
  <el-row>
    <el-form-item>
      <el-radio-group v-model="operation"
        @change="checkTableColumns">
        <el-radio-button label="平铺模式"
          value="平铺模式" />
        <el-radio-button label="填报模式"
          value="填报模式" />
      </el-radio-group>
    </el-form-item>
    <right-toolbar v-model:showSearch="showSearch"
      @queryTable="getTableList()"
      :columns="chooseColumns"
      :showColumnsType="operation === '平铺模式' ? 'tree' : 'checkbox'"
      :defaultCheckedKeys="visibleProps">
    </right-toolbar>
  </el-row>
  <!-- 筛选列组的按钮 -->
  <el-table :data="tableData"
    border
    ref="tableRef"
    class="auto-fit-header-table"
    v-loading="isLoading">
    <template v-for="col in tableColumns">
      <el-table-column v-if="col.visible"
        :label="col.label"
        :key="col.prop"
        align="center"
        :show-overflow-tooltip="col.type === 'string'"
        class-name="column-style"
        :width="getColumnMinWidth(col)"
        :fixed="operation === '填报模式' && col.fixed">
        <template #header="{ column }">
          <!-- 只为特定列添加问号图标 -->
          <span class="formula-column">
            {{ column.label }}
            <el-tooltip v-if="col.type === 'formula'"
              :content="col.formulaStr"
              placement="top">
              <el-icon><question-filled /></el-icon>
            </el-tooltip>
          </span>
        </template>
        <template #default="{ row }">
          <div v-if="col.type === 'select' && operation === '填报模式'"
            class="cell-style">
            <div>
              <el-tooltip effect="dark"
                :content="row[col.referenceKey]"
                placement="top-start"
                :disabled="!isContentOverflow(col.referenceKey, row[col.referenceKey])">
                <span class="ellipsis-tooltip">{{ row[col.referenceKey] || '-' }}</span>
              </el-tooltip>
              <el-select v-model="row[col.prop]"
                :disabled="!row[col.referenceKey]"
                placeholder=""
                clearable
                @change="submitChange(row, col)">
                <el-option v-for="item in col.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value" />
              </el-select>
            </div>
          </div>
          <!-- 公式计算 -->
          <div v-else-if="col.type === 'formula'">
            {{ col.func(row) }}
          </div>
          <!-- 输入框 -->
          <div v-else-if="col.type === 'input' && operation === '填报模式'"
            class="cell-style">
            <div>
              <el-tooltip effect="dark"
                :content="row[col.referenceKey]"
                placement="top-start"
                :disabled="!isContentOverflow(col.referenceKey, row[col.referenceKey])">
                <span class="ellipsis-tooltip">{{ row[col.referenceKey] || '-' }}</span>
              </el-tooltip>
              <el-input v-model="row[col.prop]"
                :disabled="!row[col.referenceKey]"
                placeholder=""
                :type="col.format === 'number' ? 'number' : 'text'"
                @input="submitChange(row, col)" />
            </div>
          </div>
          <!-- 日期选择 -->
          <div v-else-if="col.type === 'date' && operation === '填报模式'"
            class="cell-style">
            <div>
              <span class="ellipsis-tooltip">{{ row[col.referenceKey] || '-' }}</span>
              <div class="date-picker">
                <el-date-picker v-model="row[col.prop]"
                  type="date"
                  :disabled="!row[col.referenceKey]"
                  :format="col.format"
                  placeholder=""
                  @change="submitChange(row, col)" />
              </div>

            </div>
          </div>
          <!-- 为其他类型或未定义类型提供默认显示 -->
          <div v-else>
            <div class="ellipsis-text"
              style="max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
              {{ row[col.prop] }}
            </div>
          </div>
        </template>
      </el-table-column>
    </template>
  </el-table>
  <!-- 分页 -->
  <pagination :total="total"
    v-model:page="params.pageNum"
    v-model:limit="params.pageSize"
    @pagination="getTableList" />
</template>

<script setup>
import { getDisplayScheduleList, submitDisplaySchedulePlan } from '@/api'
import { parseTime } from '@/utils'

/*************** 操作类型 ***************/
const operation = ref('平铺模式');
const tableRef = ref(null)
// 平铺模式
const baseColumns = ref([
  {
    label: "基础信息",
    children: [
      {
        label: '计划月份',
        prop: 'salesMonth',
        visible: true,
        type: 'string',
        fill: false,
        fixed: 'left'
      },
      {
        label: "销售大区",
        prop: "regionName",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "销售战区",
        prop: "districtName",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "经销商-省份",
        prop: "dealerProvince",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "经销商-城市",
        prop: "dealerCity",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "经销商-代码",
        prop: "dealerCode",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "经销商名称",
        prop: "dealerName",
        visible: true,
        type: "string",
        fill: true,
        fixed: 'left'
      },
      {
        label: "经销商类型",
        prop: "dealerType",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "开户日期",
        prop: "openingDate",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "闭户日期",
        prop: "closingDate",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "大区总监",
        prop: "regionManager",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "战区经理",
        prop: "districtManager",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "城市经理",
        prop: "cityManager",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "系统名称",
        prop: "lineName",
        visible: true,
        type: "string",
        fill: true,
        fixed: 'left'
      },
      {
        label: "系统类型",
        prop: "lineType",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "渠道大类",
        prop: "channelDl",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "渠道小类",
        prop: "channelXl",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "系统业态",
        prop: "lineLf",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "门店数",
        prop: "storeCount",
        visible: true,
        type: "string",
        fill: false
      }
    ],
    prop: 'baseColumns',
    visible: true
  },
  {
    label: "档期基础信息",
    children: [
      {
        label: "档期执行月份",
        prop: "promotionExecutionMonth",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "档期计划-促销规格",
        prop: "plannedPromotionSpec",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "档期计划-促销口味",
        prop: "plannedPromotionFlavor",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "档期执行-促销规格",
        prop: "actualPromotionSpec",
        visible: true,
        type: 'select',
        options: [
          {
            label: '虎皮105g',
            value: '虎皮105g'
          },
          {
            label: '虎皮210g',
            value: '虎皮210g'
          },
          {
            label: '去骨72g',
            value: '去骨72g'
          },
          {
            label: '去骨138g',
            value: '去骨138g'
          },
          {
            label: '小鸡腿80g',
            value: '小鸡腿80g'
          },
          {
            label: '老卤95g',
            value: '老卤95g'
          },
          {
            label: '鸡肉豆堡',
            value: '鸡肉豆堡'
          },
          {
            label: '牛肉豆堡',
            value: '牛肉豆堡'
          }
        ],
        referenceKey: "plannedPromotionSpec",
        fill: true
      },
      {
        label: "档期执行-促销口味",
        prop: "actualPromotionFlavor",
        visible: true,
        type: 'input',
        referenceKey: "plannedPromotionFlavor",
        fill: true
      },
      {
        label: "档期规格是否执行",
        prop: "specExecutionStatus",
        visible: true,
        type: 'formula',
        func: (row) => {
          row.specExecutionStatus = row.plannedPromotionSpec === row.actualPromotionSpec ? '是' : '否';
          return row.specExecutionStatus;
        },
        formulaStr: '公式：（档期计划促销规格 = 档期执行促销规格）',
        fill: true
      }
    ],
    prop: 'scheduleInfo',
    visible: true
  },
  {
    label: "合计费用",
    prop: 'totalCostParent',
    children: [
      {
        label: "合计费用",
        prop: "totalCost",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "合计费率",
        prop: "totalCostRate",
        visible: true,
        type: "string",
        fill: false
      }
    ],
    visible: true
  },
  {
    label: "促销计划",
    prop: 'promotionPlan',
    children: [
      {
        label: "计划-档期形式",
        prop: "plannedPromotionFormat",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "计划-核销方式",
        prop: "plannedVerificationMethod",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "计划-档期规则",
        prop: "plannedPromotionRules",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "计划-档期前补差天数",
        prop: "plannedPrePromotionAdjustDays",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "计划-档期后补差天数",
        prop: "plannedPostPromotionAdjustDays",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "计划-档期开始时间",
        prop: "plannedPromotionStartDate",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "实际-档期开始时间",
        prop: "actualPromotionStartDate",
        visible: true,
        type: 'date',
        format: 'MM-DD',
        referenceKey: "plannedPromotionStartDate",
        fill: true
      },
      {
        label: "计划-档期结束时间",
        prop: "plannedPromotionEndDate",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "实际-档期结束时间",
        prop: "actualPromotionEndDate",
        visible: true,
        type: 'date',
        format: 'MM-DD',
        fill: true,
        referenceKey: "plannedPromotionEndDate"
      },
      {
        label: "档期是否开展",
        prop: "promotionImplementationStatus",
        visible: true,
        type: 'formula',
        func: (row) => {
          row.promotionImplementationStatus = row.actualPromotionStartDate && row.actualPromotionEndDate ? '是' : '否';
          return row.promotionImplementationStatus;
        },
        formulaStr: '公式：（实际档期开始时间不为空，并且实际档期结束时间不为空）',
        fill: true
      },
      {
        label: "时间是否执行",
        prop: "timeExecutionStatus",
        visible: true,
        type: 'formula',
        func: (row) => {
          row.timeExecutionStatus = (row.actualPromotionStartDate === row.plannedPromotionStartDate) && (row.actualPromotionEndDate === row.plannedPromotionEndDate) ? '是' : '否';
          return row.timeExecutionStatus;
        },
        formulaStr: '公式：（实际档期开始时间 = 计划档期开始时间，并且实际档期结束时间 = 计划档期结束时间）',
        fill: true
      },
      {
        label: "计划-补差开始时间",
        prop: "plannedAdjustmentStartDate",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "计划-补差结束时间",
        prop: "plannedAdjustmentEndDate",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "计划促销机制",
        prop: "plannedPromotionMechanism",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "实际促销机制",
        prop: "actualPromotionMechanism",
        visible: true,
        type: 'input',
        fill: true
      },
      {
        label: "促销机制是否执行",
        prop: "promotionMechanismExecutionStatus",
        visible: true,
        type: 'select',
        options: [
          {
            label: '是',
            value: '是'
          },
          {
            label: '否',
            value: '否'
          }
        ],
        fill: true
      },
      {
        label: "预估袋数",
        prop: "estimatedBagCount",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "档期备货量（袋）",
        prop: "promotionStockQuantity",
        visible: true,
        type: 'input',
        format: 'number',
        fill: true
      },
      {
        label: "单包厂价（单包）",
        prop: "unitFactoryPrice",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "正常供价（单包）",
        prop: "normalSupplyPrice",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "日常零售价（单包）",
        prop: "regularRetailPrice",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "计划促销售价（单包）",
        prop: "plannedPromotionPrice",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "实际促销售价（单包）",
        prop: "actualPromotionPrice",
        visible: true,
        type: 'input',
        format: 'number',
        fill: true
      },
      {
        label: "促销价是否执行",
        prop: "promotionPriceExecutionStatus",
        visible: true,
        type: 'formula',
        func: (row) => {
          row.promotionPriceExecutionStatus = row.plannedPromotionPrice == row.actualPromotionPrice ? '是' : '否';
          return row.promotionPriceExecutionStatus;
        },
        formulaStr: '公式：（计划促销售价 = 实际促销售价）',
        fill: true
      },
      {
        label: "正常经销商毛利现状",
        prop: "normalDealerMarginStatus",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "系统前台毛利保证",
        prop: "systemFrontendMarginGuarantee",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "系统后台毛利保证",
        prop: "systemBackendMarginGuarantee",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "系统促销毛利保证",
        prop: "systemPromotionMarginGuarantee",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "经销商毛利保证",
        prop: "dealerMarginGuarantee",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "单袋补差金额（费用）",
        prop: "unitBagAdjustmentAmount",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "补差费比（%）",
        prop: "adjustmentCostRatio",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "整体补差（费用）",
        prop: "totalAdjustmentCost",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "档期是否执行",
        prop: "promotionExecutionStatus",
        visible: true,
        type: 'formula',
        func: (row) => {
          // 促销价是否执行，促销机制是否执行，促销规格是否执行，档期是否开展
          row.promotionExecutionStatus = row.promotionPriceExecutionStatus == '是' && row.promotionMechanismExecutionStatus == '是' && row.specExecutionStatus == '是' && row.promotionImplementationStatus == '是' ? '是' : '否';
          return row.promotionExecutionStatus;
        },
        formulaStr: '公式：（促销价是否执行 = 是，并且促销机制是否执行 = 是，并且促销规格是否执行 = 是，并且档期是否开展 = 是）',
        fill: true
      }
    ],
    visible: true
  },
  {
    label: "海报计划",
    prop: 'posterPlan',
    children: [
      {
        label: "计划-海报形式",
        prop: "plannedPosterFormat",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "计划-海报费用",
        prop: "plannedPosterCost",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "实际-海报形式",
        prop: "actualPosterFormat",
        visible: true,
        type: 'select',
        options: [
          {
            label: '电子',
            value: '电子'
          },
          {
            label: '纸制',
            value: '纸制'
          }
        ],
        fill: true
      },
      {
        label: "海报是否执行",
        prop: "posterExecutionStatus",
        visible: true,
        type: 'formula',
        func: (row) => {
          row.posterExecutionStatus = row.plannedPosterFormat == row.actualPosterFormat ? '是' : '否';
          return row.posterExecutionStatus;
        },
        formulaStr: '公式：（计划海报形式 = 实际海报形式）',
        fill: true
      }
    ],
    visible: true
  },
  {
    label: "档期陈列",
    prop: 'displayPlan',
    children: [
      {
        label: "门店数",
        prop: "storeCountInt",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "店均费用",
        prop: "averageStoreCost",
        visible: true,
        type: "string",
        fill: false
      },
      {
        label: "费用",
        prop: "cost",
        visible: true,
        type: "string",
        fill: false
      }
    ],
    visible: true
  }
]);
// 表格列数据
const tableColumns = ref([])
// 右上角工具选择列
const chooseColumns = ref([])
// 计算列具体数据
const checkTableColumns = () => {
  if (operation.value === '平铺模式') {
    chooseColumns.value = baseColumns.value
    tableColumns.value = baseColumns.value.flatMap(item => {
      if (item.children) {
        return item.children.filter(child => child);
      }
      return [];
    });
  } else if (operation.value === '填报模式') {
    chooseColumns.value = baseColumns.value.flatMap(item => {
      if (item.children) {
        return item.children
          .filter(child => child.fill)
      }
      return [];
    });
    tableColumns.value = chooseColumns.value
  }

  // 强制表格立即应用所有宽度设置，避免先自适应再调整
  nextTick(() => {
    if (tableRef.value) {
      tableRef.value.doLayout()
    }
  })
}

onMounted(() => {
  checkTableColumns()
})

// 选择列默认选中哪些
const visibleProps = computed(() => {
  // 分情况返回
  return tableColumns.value.flatMap(item => {
    if (item.children) {
      return item.children.map(child => child.prop);
    }
    return item.prop;
  });
});

// 提交变更
const submitChange = async (row, col) => {
  // 如果是 实际促销售价（单包），保留 2 位小数
  if (col.prop === 'actualPromotionPrice') {
    row[col.prop] = parseFloat(parseFloat(row[col.prop]).toFixed(2))
  }

  await submitDisplaySchedulePlan({
    id: row.sapId,
    [col.prop]: row[col.prop]
  })
  // 这些提交变化的，同时会影响公式计算的，需要把公式计算的字段列结果，一起发给后台
  // 档期规格是否执行：计划规格和执行规格
  if (['plannedPromotionSpec', 'actualPromotionSpec'].includes(col.prop)) {
    await submitDisplaySchedulePlan({
      id: row.sapId,
      specExecutionStatus: row.specExecutionStatus,
    })
  }
  // 档期是否开展：实际档期开始和结束
  if (['actualPromotionStartDate', 'actualPromotionEndDate'].includes(col.prop)) {
    await submitDisplaySchedulePlan({
      id: row.sapId,
      promotionImplementationStatus: row.promotionImplementationStatus,
    })
  }
  // 档期是否执行：实际开始和计划开始时间，实际结束时间和计划结束时间
  if (['actualPromotionStartDate', 'plannedPromotionStartDate', 'actualPromotionEndDate', 'plannedPromotionEndDate'].includes(col.prop)) {
    await submitDisplaySchedulePlan({
      id: row.sapId,
      timeExecutionStatus: row.timeExecutionStatus,
    })
  }
  // 促销价是否执行：根据计划和实际促销价
  if (['actualPromotionPrice', 'plannedPromotionPrice'].includes(col.prop)) {
    await submitDisplaySchedulePlan({
      id: row.sapId,
      promotionPriceExecutionStatus: row.promotionPriceExecutionStatus,
    })
  }
  // 海报是否执行
  if (['plannedPosterFormat', 'actualPosterFormat'].includes(col.prop)) {
    await submitDisplaySchedulePlan({
      id: row.sapId,
      posterExecutionStatus: row.posterExecutionStatus,
    })
  }
  // 档期计划是否执行
  await submitDisplaySchedulePlan({
    id: row.sapId,
    promotionExecutionStatus: row.promotionExecutionStatus,
  })
}

// 表格数据
const tableData = ref([])
const isLoading = ref(true)
const params = reactive({
  pageNum: 1,
  pageSize: 20,
})
const total = ref(0)

// 筛选工具
const showSearch = ref(true);
const getTableList = async () => {
  isLoading.value = true
  const res = await getDisplayScheduleList({
    ...params
  })
  // 处理日期格式
  res.data.rows.forEach(item => {
    item.salesMonth = parseTime(item.salesMonth, '{y}-{m}')
    item.openingDate = parseTime(item.openingDate, '{y}-{m}-{d}')
    item.plannedAdjustmentStartDate = parseTime(item.plannedAdjustmentStartDate, '{y}-{m}-{d}')
    item.plannedAdjustmentEndDate = parseTime(item.plannedAdjustmentEndDate, '{y}-{m}-{d}')
    item.plannedPromotionStartDate = parseTime(item.plannedPromotionStartDate, '{y}-{m}-{d}')
    item.actualPromotionStartDate = parseTime(item.actualPromotionStartDate, '{y}-{m}-{d}')
    item.plannedPromotionEndDate = parseTime(item.plannedPromotionEndDate, '{y}-{m}-{d}')
    item.actualPromotionEndDate = parseTime(item.actualPromotionEndDate, '{y}-{m}-{d}')
    item.totalCostRate = item.totalCostRate ? `${(item.totalCostRate).toFixed(2)}%` : '-'
    item.adjustmentCostRatio = item.adjustmentCostRatio ? `${(item.adjustmentCostRatio).toFixed(2)}%` : '-'
  })
  tableData.value = res.data.rows
  total.value = res.data.total
  isLoading.value = false
}
getTableList()

// 列宽度
const getColumnMinWidth = (column) => {
  // 根据列名或属性判断合适的最小宽度
  const widthMap = {
    'salesMonth': 90,
    'regionName': 90,
    'districtName': 90,
    'dealerProvince': 105,
    'dealerCity': 105,
    'dealerCode': 105,
    'dealerName': 215,
    'dealerType': 115,
    'openingDate': 105,
    'closingDate': 105,
    'regionManager': 90,
    'districtManager': 90,
    'cityManager': 90,
    'lineName': 90,
    'lineType': 90,
    'channelDl': 90,
    'channelXl': 140,
    'lineLf': 90,
    'storeCount': 75,
    'promotionExecutionMonth': 110,
    'plannedPromotionSpec': 140,
    'plannedPromotionFlavor': 140,
    'actualPromotionSpec': 140,
    'actualPromotionFlavor': 140,
    'specExecutionStatus': 150,
    'totalCost': 105,
    'totalCostRate': 85,
    'plannedPromotionFormat': 115,
    'plannedVerificationMethod': 115,
    'plannedPromotionRules': 115,
    'plannedPrePromotionAdjustDays': 155,
    'plannedPostPromotionAdjustDays': 155,
    'plannedPromotionStartDate': 140,
    'actualPromotionStartDate': 140,
    'plannedPromotionEndDate': 140,
    'actualPromotionEndDate': 140,
    'promotionImplementationStatus': 125,
    'timeExecutionStatus': 125,
    'plannedAdjustmentStartDate': 140,
    'plannedAdjustmentEndDate': 140,
    'plannedPromotionMechanism': 115,
    'actualPromotionMechanism': 115,
    'promotionMechanismExecutionStatus': 135,
    'estimatedBagCount': 90,
    'promotionStockQuantity': 135,
    'unitFactoryPrice': 135,
    'normalSupplyPrice': 135,
    'regularRetailPrice': 150,
    'plannedPromotionPrice': 165,
    'actualPromotionPrice': 165,
    'promotionPriceExecutionStatus': 140,
    'normalDealerMarginStatus': 150,
    'systemFrontendMarginGuarantee': 135,
    'systemBackendMarginGuarantee': 135,
    'systemPromotionMarginGuarantee': 135,
    'dealerMarginGuarantee': 125,
    'unitBagAdjustmentAmount': 165,
    'adjustmentCostRatio': 125,
    'totalAdjustmentCost': 135,
    'promotionExecutionStatus': 125,
    'plannedPosterFormat': 115,
    'plannedPosterCost': 115,
    'actualPosterFormat': 115,
    'posterExecutionStatus': 125,
    'storeCountInt': 75,
    'averageStoreCost': 115,
    'cost': 115
  };

  return widthMap[column.prop] || 150; // 默认宽度
};

const isContentOverflow = (key, content) => {
  // 创建临时元素用于测量
  if (!content) return false;

  const tempSpan = document.createElement('span');
  tempSpan.textContent = content;
  tempSpan.className = 'ellipsis-tooltip';
  tempSpan.style.visibility = 'hidden';
  tempSpan.style.position = 'absolute';
  document.body.appendChild(tempSpan);

  // 获取元素宽度和内容宽度
  const { width } = tempSpan.getBoundingClientRect();
  const scrollWidth = tempSpan.scrollWidth;

  // 移除临时元素
  document.body.removeChild(tempSpan);

  // 当内容宽度大于元素宽度时，表示内容溢出
  return scrollWidth > width;
};

</script>

<style scoped
  lang="scss">
  .container {

    .el-tabs {
      height: 100%;
      display: flex;
      flex-direction: column-reverse;

      .el-tabs__content {
        display: flex;
        flex-direction: column;
        height: 100%;

        .el-tab-pane {
          height: 100%;
          display: flex;
          flex-direction: column;

          .pagination-container {
            margin: 10px;
          }
        }

        .formula-column {
          display: flex;
          justify-content: center;
          align-items: center;

          .el-icon {
            margin-left: 2px;
          }
        }
      }
    }

    .el-form-item {
      align-items: center;
    }

    /* 表格区域 */
    .auto-fit-header-table {

      /* 优化超长文本的显示效果 */
      .cell {
        /* padding: 0 .2133rem; */
      }

      ::v-deep(.el-table__row) {
        .el-table__cell {
          padding: 0;
        }
      }


      ::v-deep(.column-style) {

        .cell-style {
          margin: 0 -12px;

          >div {
            display: flex;
            flex-direction: column;
            align-items: flex-start;

            >span.ellipsis-tooltip {
              text-align: left;
              text-indent: 5px;
              display: inline-block;
              width: 100%;
              background-color: #e1e2e6;
              border-bottom: 1px solid #ebeef5;

              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              display: inline-block;
              max-width: 100%;
            }
          }

          /* 表格内下拉框 */
          .el-select {
            width: 100% !important;
            padding: 10px;
          }

          .el-input {
            padding: 10px;
          }

          .date-picker {
            padding: 10px;

            .el-input {
              padding: 0;
            }
          }
        }
      }

    }

  }

  ::v-deep(.el-date-editor) {
    width: 100%;
  }
</style>