<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'"
            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'"
            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'"
            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: 10,
})
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': 85,
    'regionName': 85,
    'districtName': 85,
    'dealerProvince': 100,
    'dealerCity': 100,
    'dealerCode': 100,
    'dealerName': 210,
    'dealerType': 110,
    'openingDate': 100,
    'closingDate': 100,
    'regionManager': 85,
    'districtManager': 85,
    'cityManager': 85,
    'lineName': 85,
    'lineType': 85,
    'channelDl': 85,
    'channelXl': 135,
    'lineLf': 85,
    'storeCount': 70,
    'promotionExecutionMonth': 105,
    'plannedPromotionSpec': 135,
    'plannedPromotionFlavor': 135,
    'actualPromotionSpec': 135,
    'actualPromotionFlavor': 135,
    'specExecutionStatus': 145,
    'totalCost': 100,
    'totalCostRate': 80,
    'plannedPromotionFormat': 110,
    'plannedVerificationMethod': 110,
    'plannedPromotionRules': 110,
    'plannedPrePromotionAdjustDays': 150,
    'plannedPostPromotionAdjustDays': 150,
    'plannedPromotionStartDate': 135,
    'actualPromotionStartDate': 135,
    'plannedPromotionEndDate': 135,
    'actualPromotionEndDate': 135,
    'promotionImplementationStatus': 120,
    'timeExecutionStatus': 120,
    'plannedAdjustmentStartDate': 135,
    'plannedAdjustmentEndDate': 135,
    'plannedPromotionMechanism': 110,
    'actualPromotionMechanism': 110,
    'promotionMechanismExecutionStatus': 130,
    'estimatedBagCount': 85,
    'promotionStockQuantity': 130,
    'unitFactoryPrice': 130,
    'normalSupplyPrice': 130,
    'regularRetailPrice': 145,
    'plannedPromotionPrice': 160,
    'actualPromotionPrice': 160,
    'promotionPriceExecutionStatus': 135,
    'normalDealerMarginStatus': 145,
    'systemFrontendMarginGuarantee': 130,
    'systemBackendMarginGuarantee': 130,
    'systemPromotionMarginGuarantee': 130,
    'dealerMarginGuarantee': 120,
    'unitBagAdjustmentAmount': 160,
    'adjustmentCostRatio': 120,
    'totalAdjustmentCost': 130,
    'promotionExecutionStatus': 120,
    'plannedPosterFormat': 110,
    'plannedPosterCost': 110,
    'actualPosterFormat': 110,
    'posterExecutionStatus': 120,
    'storeCountInt': 70,
    'averageStoreCost': 110,
    'cost': 110
  };

  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>