<template>
  <el-row :gutter="20">
    <el-col :span="4" :xs="24">
      <ContentWrap class="h-1/1">
        <DeptTree @node-click="handleDeptNodeClick" />
      </ContentWrap>
    </el-col>
    <el-col :span="20" :xs="24">
      <ContentWrap>
        <!-- 搜索工作栏 -->
        <el-form
          class="-mb-15px"
          :model="queryParams"
          ref="queryFormRef"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="项目" prop="contractName">
            <el-input
              v-model="queryParams.contractName"
              placeholder="请输入项目"
              clearable
              @keyup.enter="handleQuery"
              class="!w-240px"
            />
          </el-form-item>
          <el-form-item label="任务" prop="taskName">
            <el-input
              v-model="queryParams.taskName"
              placeholder="请输入任务"
              clearable
              @keyup.enter="handleQuery"
              class="!w-240px"
            />
          </el-form-item>
          <el-form-item label="创建时间" prop="createTime">
            <el-date-picker
              v-model="queryParams.createTime"
              value-format="YYYY-MM-DD HH:mm:ss"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
              class="!w-220px"
            />
          </el-form-item>
          <el-form-item>
            <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
            <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
            <el-button
              type="primary"
              plain
              @click="openForm('create')"
              v-hasPermi="['pms:iot-rh-daily-report:create']"
            >
              <Icon icon="ep:plus" class="mr-5px" /> 新增
            </el-button>
            <el-button
              type="success"
              plain
              @click="handleExport"
              :loading="exportLoading"
              v-hasPermi="['pms:iot-rh-daily-report:export']"
            >
              <Icon icon="ep:download" class="mr-5px" /> 导出
            </el-button>
          </el-form-item>
        </el-form>
      </ContentWrap>

      <ContentWrap class="mb-15px">
        <div class="color-legend">
          <div class="legend-item">
            <span class="color-indicator red"></span>
            <span>运行时效=当日注气量/产能&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;超过120%红色预警</span>
          </div>
          <div class="legend-item">
            <span class="color-indicator orange"></span>
            <span>当日注气时间+当日注水时间+非生产时间=24H&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;否则橙色预警</span>
          </div>
        </div>
      </ContentWrap>

      <!-- 列表 -->
      <ContentWrap ref="tableContainerRef">
        <div class="table-container">
          <el-table ref="tableRef" v-loading="loading" :data="list" :stripe="true"
                    style="width: 100%" :cell-style="cellStyle">
            <el-table-column :label="t('iotDevice.serial')" width="70" align="center">
              <template #default="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
              label="日期"
              align="center"
              prop="createTime"
              :formatter="dateFormatter"
              :width="columnWidths.createTime"
            />
            <el-table-column label="施工队伍" align="center" prop="deptName" :width="columnWidths.deptName"/>
            <el-table-column label="项目" align="center" prop="contractName" :width="columnWidths.contractName"
                             :show-overflow-tooltip="true" class-name="contract-name-column"/>
            <el-table-column label="任务" align="center" prop="taskName" :width="columnWidths.taskName"/>
            <!-- <el-table-column label="施工状态" align="center" prop="constructionStatus" /> -->
            <el-table-column :label="t('project.status')" align="center" prop="constructionStatus" :width="columnWidths.constructionStatus">
              <template #default="scope">
                <dict-tag :type="DICT_TYPE.PMS_PROJECT_TASK_SCHEDULE" :value="scope.row.constructionStatus" />
              </template>
            </el-table-column>
            <el-table-column label="搬迁安装天数" align="center" prop="relocationDays" :width="columnWidths.relocationDays"/>
            <el-table-column label="设计注气量(万方)" align="center" prop="designInjection" :width="columnWidths.designInjection"/>
            <el-table-column label="运行时效" align="center" prop="transitTime" :width="columnWidths.transitTime" :formatter="percentageFormatter"/>
            <el-table-column label="当日注气量(万方)" align="center" prop="dailyGasInjection"
                             :width="columnWidths.dailyGasInjection" :formatter="gasInjectionFormatter"/>
            <el-table-column label="当日注水量(方)" align="center" prop="dailyWaterInjection" :width="columnWidths.dailyWaterInjection"/>
            <el-table-column label="当日注气时间(H)" align="center" prop="dailyInjectGasTime" :width="columnWidths.dailyInjectGasTime"/>
            <el-table-column label="当日注水时间(H)" align="center" prop="dailyInjectWaterTime" :width="columnWidths.dailyInjectWaterTime"/>
            <el-table-column label="当日用电量(kWh)" align="center" prop="dailyPowerUsage" :width="columnWidths.dailyPowerUsage"/>
            <el-table-column label="非生产时间(H)" align="center" prop="nonProductionTime" :width="columnWidths.nonProductionTime"/>
            <el-table-column :label="t('project.nptReason')" align="center" prop="nptReason" :width="columnWidths.nptReason">
              <template #default="scope">
                <dict-tag :type="DICT_TYPE.PMS_PROJECT_NPT_REASON" :value="scope.row.nptReason" />
              </template>
            </el-table-column>
            <el-table-column
              label="施工开始日期"
              align="center"
              prop="constructionStartDate"
              :formatter="dateFormatter"
              :width="columnWidths.constructionStartDate"
            />
            <el-table-column
              label="施工结束日期"
              align="center"
              prop="constructionEndDate"
              :formatter="dateFormatter"
              :width="columnWidths.constructionEndDate"
            />
            <el-table-column label="生产动态" align="center" :width="columnWidths.productionStatus" fixed-width>
              <template #default="scope">
                <el-tooltip
                  effect="light"
                  :content="scope.row.productionStatus"
                  placement="top"
                  popper-class="design-well-struct-tooltip"
                  :disabled="!scope.row.productionStatus || scope.row.productionStatus.length <= 30"
                >
                  <span class="design-well-struct-text">{{ formatDesignWellStruct(scope.row.productionStatus) }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="累计注气量(万方)" align="center" prop="totalGasInjection"
                             :width="columnWidths.totalGasInjection" :formatter="gasInjectionFormatter"/>
            <el-table-column label="累计注水量(方)" align="center" prop="totalWaterInjection" :width="columnWidths.totalWaterInjection"/>
            <el-table-column label="累计完工井次" align="center" prop="cumulativeCompletion" :width="columnWidths.cumulativeCompletion"/>
            <el-table-column label="产能(万方)" align="center" prop="capacity" :width="columnWidths.capacity" :formatter="gasInjectionFormatter"/>
            <el-table-column label="操作" align="center" :width="columnWidths.operation" fixed="right">
              <template #default="scope">
                <el-button
                  link
                  type="primary"
                  @click="openForm('update', scope.row.id, scope.row)"
                  v-hasPermi="['pms:iot-rh-daily-report:update']"
                >
                  编辑
                </el-button>
                <el-button
                  link
                  type="danger"
                  @click="handleDelete(scope.row.id)"
                  v-hasPermi="['pms:iot-rh-daily-report:delete']"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <Pagination
          :total="total"
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </ContentWrap>

      <!-- 表单弹窗：添加/修改 -->
      <IotRhDailyReportForm ref="formRef" @success="getList" :row-data="selectedRowData"/>
    </el-col>
  </el-row>

</template>

<script setup lang="ts">
import {dateFormatter, dateFormatter2} from '@/utils/formatTime'
import download from '@/utils/download'
import { IotRhDailyReportApi, IotRhDailyReportVO } from '@/api/pms/iotrhdailyreport'
import IotRhDailyReportForm from './IotRhDailyReportForm.vue'
import {DICT_TYPE, getDictLabel} from "@/utils/dict";
import { ref, reactive, onMounted, nextTick, watch, onUnmounted } from 'vue'
import DeptTree from "@/views/system/user/DeptTree.vue";

/** 瑞恒日报 列表 */
defineOptions({ name: 'IotRhDailyReport' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

// 添加 selectedRowData 响应式变量
const selectedRowData = ref<Record<string, any> | null>(null)

const loading = ref(true) // 列表的加载中
const list = ref<IotRhDailyReportVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  deptId: undefined,
  contractName: undefined,
  projectId: undefined,
  taskName: undefined,
  taskId: undefined,
  projectClassification: undefined,
  relocationDays: undefined,
  transitTime: [],
  dailyGasInjection: undefined,
  dailyWaterInjection: undefined,
  dailyPowerUsage: undefined,
  dailyInjectGasTime: [],
  dailyInjectWaterTime: [],
  nonProductionTime: [],
  nptReason: undefined,
  constructionStartDate: [],
  constructionEndDate: [],
  productionStatus: undefined,
  nextPlan: undefined,
  constructionStatus: undefined,
  personnel: undefined,
  totalGasInjection: undefined,
  totalWaterInjection: undefined,
  cumulativeCompletion: undefined,
  extProperty: undefined,
  sort: undefined,
  remark: undefined,
  status: undefined,
  processInstanceId: undefined,
  auditStatus: undefined,
  createTime: [],
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中


// 表格引用
const tableRef = ref()
// 表格容器引用
const tableContainerRef = ref()

// 列宽度配置
const columnWidths = ref({
  deptName: '120px',
  contractName: '200px',
  taskName: '120px',
  constructionStatus: '110px',
  relocationDays: '120px',
  designInjection: '120px',
  transitTime: '100px',
  dailyGasInjection: '150px',
  dailyWaterInjection: '150px',
  dailyPowerUsage: '150px',
  dailyInjectGasTime: '150px',
  dailyInjectWaterTime: '150px',
  nonProductionTime: '150px',
  nptReason: '150px',
  constructionStartDate: '180px',
  constructionEndDate: '180px',
  productionStatus: '200px',
  totalGasInjection: '150px',
  totalWaterInjection: '150px',
  cumulativeCompletion: '150px',
  capacity: '120px',
  createTime: '180px',
  operation: '120px'
})

// 计算文本宽度
const getTextWidth = (text: string, fontSize = 14) => {
  const span = document.createElement('span');
  span.style.visibility = 'hidden';
  span.style.position = 'absolute';
  span.style.whiteSpace = 'nowrap';
  span.style.fontSize = `${fontSize}px`;
  span.style.fontFamily = 'inherit';
  span.innerText = text;

  document.body.appendChild(span);
  const width = span.offsetWidth;
  document.body.removeChild(span);

  return width;
};

// 格式化设计井身结构文本
const formatDesignWellStruct = (text: string | null | undefined) => {
  if (!text) return '-';
  // 如果文本长度超过30个字符，显示前30个字符并添加省略号
  return text.length > 30 ? text.substring(0, 30) + '...' : text;
};

// 百分比格式化函数
const percentageFormatter = (row: any, column: any, cellValue: any, index: number) => {
  if (cellValue === null || cellValue === undefined) return '';
  // 将小数转换为百分比，保留两位小数
  return `${(parseFloat(cellValue) * 100).toFixed(2)}%`;
};

// 可伸缩列配置
const FLEXIBLE_COLUMNS = ['deptName', 'taskName', 'constructionStatus', 'relocationDays', 'designInjection',
  'transitTime', 'dailyGasInjection', 'dailyWaterInjection', 'dailyPowerUsage', 'dailyInjectGasTime',
  'dailyInjectWaterTime', 'nonProductionTime', 'nptReason', 'constructionStartDate',
  'constructionEndDate', 'productionStatus', 'totalGasInjection', 'totalWaterInjection',
  'cumulativeCompletion', 'createTime'];

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await IotRhDailyReportApi.getIotRhDailyReportPage(queryParams)
    list.value = data.list
    total.value = data.total
    // 获取数据后计算列宽
    nextTick(() => {
      calculateColumnWidths();
    });
  } finally {
    loading.value = false
  }
}

// 注气量格式化函数（单位转换：方 -> 万方）
const gasInjectionFormatter = (row: any, column: any, cellValue: any, index: number) => {
  if (cellValue === null || cellValue === undefined || cellValue === '') return '';
  // 将方转换为万方，保留两位小数
  const value = parseFloat(cellValue);
  return (value / 10000).toFixed(2);
};

// 检查三个时间字段之和是否为24
const checkTimeSumEquals24 = (row: any) => {
  // 获取三个字段的值，转换为数字，如果为空则视为0
  const gasTime = parseFloat(row.dailyInjectGasTime) || 0;
  const waterTime = parseFloat(row.dailyInjectWaterTime) || 0;
  const nonProdTime = parseFloat(row.nonProductionTime) || 0;

  // 计算总和
  const sum = gasTime + waterTime + nonProdTime;

  // 返回是否等于24（允许一定的浮点数误差）
  return Math.abs(sum - 24) < 0.01; // 使用0.01作为误差范围
};

// 单元格样式函数
const cellStyle = ({ row, column, rowIndex, columnIndex }: { row: any; column: any; rowIndex: number; columnIndex: number }) => {
  // 只针对 transitTime 列进行处理
  if (column.property === 'transitTime') {
    // 获取原始值（不是格式化后的百分比值）
    const originalValue = row.transitTime;

    // 检查值是否大于120
    if (originalValue !== null && originalValue !== undefined && parseFloat(originalValue) > 1.2) {
      return {
        color: 'red',
        fontWeight: 'bold' // 可选：加粗以更突出显示
      };
    }
  }

  // 处理三个时间字段：当日注气时间、当日注水时间、非生产时间
  const timeFields = ['dailyInjectGasTime', 'dailyInjectWaterTime', 'nonProductionTime'];
  if (timeFields.includes(column.property)) {
    // 检查三个时间字段之和是否不等于24
    if (!checkTimeSumEquals24(row)) {
      return {
        color: 'orange',
        fontWeight: 'bold'
      };
    }
  }

  // 默认返回空对象，不应用特殊样式
  return {};
};

// 计算列宽度
const calculateColumnWidths = () => {
  const MIN_WIDTH = 80; // 最小列宽
  const PADDING = 25; // 列内边距

  // 确保表格容器存在
  if (!tableContainerRef.value?.$el) return;

  const container = tableContainerRef.value.$el;
  const containerWidth = container.clientWidth;

  // 1. 计算所有列的最小宽度
  const minWidths: Record<string, number> = {};
  let totalMinWidth = 0;

  // 计算列最小宽度的函数
  const calculateColumnMinWidth = (key: string, label: string, getValue: Function) => {
    // 跳过 contractName 列的计算，使用固定宽度
    if (key === 'contractName') {
      minWidths[key] = 200; // 固定宽度
      totalMinWidth += 200;
      return 200;
    }

    const headerWidth = getTextWidth(label) * 1.2;
    let contentMaxWidth = 0;

    // 计算内容最大宽度
    list.value.forEach((row, index) => {
      let text = '';
      if (key === 'constructionStatus') {
        // 特殊处理字典列
        const dictValue = row[key];
        // 这里需要根据实际情况获取字典标签，简化处理使用值本身
        text = String(dictValue || '');
      } else if (key === 'nptReason') {
        // 非生产时间原因
        text = getDictLabel(DICT_TYPE.PMS_PROJECT_NPT_REASON, row[key]);
      } else if (key.includes('Date') || key === 'createTime') {
        // 日期列使用格式化后的值
        text = dateFormatter(null, null, row[key]) || '';
      } else {
        text = String(getValue ? getValue(row, index) : (row[key] || ''));
      }

      const textWidth = getTextWidth(text);
      if (textWidth > contentMaxWidth) contentMaxWidth = textWidth;
    });

    const minWidth = Math.max(headerWidth, contentMaxWidth, MIN_WIDTH) + PADDING;
    minWidths[key] = minWidth;
    totalMinWidth += minWidth;
    return minWidth;
  };

  // 计算各列最小宽度
  calculateColumnMinWidth('deptName', '施工队伍', (row: any) => row.deptName);
  calculateColumnMinWidth('contractName', '项目', (row: any) => row.contractName);
  calculateColumnMinWidth('taskName', '任务', (row: any) => row.taskName);
  calculateColumnMinWidth('constructionStatus', t('project.status'), (row: any) => {
    // 这里可以获取字典标签，简化处理使用值本身
    return String(row.constructionStatus || '');
  });
  calculateColumnMinWidth('relocationDays', '搬迁安装天数', (row: any) => row.relocationDays);
  calculateColumnMinWidth('designInjection', '设计注气量(万方)', (row: any) => row.designInjection);
  calculateColumnMinWidth('transitTime', '运行时效', (row: any) => row.transitTime);
  calculateColumnMinWidth('dailyGasInjection', '当日注气量(万方)', (row: any) => row.dailyGasInjection);
  calculateColumnMinWidth('dailyWaterInjection', '当日注水量(方)', (row: any) => row.dailyWaterInjection);
  calculateColumnMinWidth('dailyPowerUsage', '当日用电量(kWh)', (row: any) => row.dailyPowerUsage);
  calculateColumnMinWidth('dailyInjectGasTime', '当日注气时间(H)', (row: any) => row.dailyInjectGasTime);
  calculateColumnMinWidth('dailyInjectWaterTime', '当日注水时间(H)', (row: any) => row.dailyInjectWaterTime);
  calculateColumnMinWidth('nonProductionTime', '非生产时间(H)', (row: any) => row.nonProductionTime);
  calculateColumnMinWidth('nptReason', t('project.nptReason'), (row: any) => row.nptReason);
  calculateColumnMinWidth('constructionStartDate', '施工开始日期', (row: any) => dateFormatter(null, null, row.constructionStartDate));
  calculateColumnMinWidth('constructionEndDate', '施工结束日期', (row: any) => dateFormatter(null, null, row.constructionEndDate));
  calculateColumnMinWidth('productionStatus', '生产动态', (row: any) => row.productionStatus);
  calculateColumnMinWidth('totalGasInjection', '累计注气量(万方)', (row: any) => row.totalGasInjection);
  calculateColumnMinWidth('totalWaterInjection', '累计注水量(方)', (row: any) => row.totalWaterInjection);
  calculateColumnMinWidth('cumulativeCompletion', '累计完工井次', (row: any) => row.cumulativeCompletion);
  calculateColumnMinWidth('capacity', '产能(万方)', (row: any) => row.capacity);
  calculateColumnMinWidth('createTime', '创建时间', (row: any) => dateFormatter(null, null, row.createTime));

  // 生产动态 列使用固定宽度，不参与自动计算
  minWidths.productionStatus = 200; // 固定宽度200px
  totalMinWidth += 200;

  // 操作列固定宽度
  minWidths.operation = 120;
  totalMinWidth += 120;

  // 2. 计算可伸缩列最终宽度
  const newWidths: Record<string, string> = {};
  const availableWidth = containerWidth - 17; // 减去滚动条宽度

  // 应用最小宽度到所有列
  Object.keys(minWidths).forEach(key => {
    newWidths[key] = `${minWidths[key]}px`;
  });

  // 计算可伸缩列需要的宽度
  if (totalMinWidth < availableWidth) {
    // 有剩余空间：按比例分配给可伸缩列
    const extraSpace = availableWidth - totalMinWidth;
    const flexibleColumnCount = FLEXIBLE_COLUMNS.length;
    const spacePerColumn = Math.floor(extraSpace / flexibleColumnCount);

    FLEXIBLE_COLUMNS.forEach(key => {
      newWidths[key] = `${minWidths[key] + spacePerColumn}px`;
    });
  }

  // 确保 contractName 保持固定宽度
  newWidths.contractName = '200px';

  // 3. 更新列宽配置
  columnWidths.value = newWidths;

  // 4. 触发表格重新布局
  nextTick(() => {
    tableRef.value?.doLayout();
  });
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number, row?: any) => {
  // 保存当前行数据
  if (row) {
    selectedRowData.value = {
      deptName: row.deptName,
      contractName: row.contractName,
      taskName: row.taskName,
      relocationDays: row.relocationDays
    }
  } else {
    selectedRowData.value = null
  }

  formRef.value.open(type, id)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await IotRhDailyReportApi.deleteIotRhDailyReport(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

// 响应式变量存储选中的部门
const selectedDept = ref<{ id: number; name: string }>()
/** 处理部门被点击 */
const handleDeptNodeClick = async (row) => {
  // 记录选中的部门信息
  selectedDept.value = { id: row.id, name: row.name }
  queryParams.deptId = row.id
  await getList()
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await IotRhDailyReportApi.exportIotRhDailyReport(queryParams)
    download.excel(data, '瑞恒日报.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

// 声明 ResizeObserver 实例
let resizeObserver: ResizeObserver | null = null;

/** 初始化 **/
onMounted(() => {
  getList()
  // 创建 ResizeObserver 监听表格容器尺寸变化
  if (tableContainerRef.value?.$el) {
    resizeObserver = new ResizeObserver(() => {
      // 使用防抖避免频繁触发
      clearTimeout((window as any).resizeTimer);
      (window as any).resizeTimer = setTimeout(() => {
        calculateColumnWidths();
      }, 100);
    });
    resizeObserver.observe(tableContainerRef.value.$el);
  }
})

onUnmounted(() => {
  // 清除 ResizeObserver
  if (resizeObserver && tableContainerRef.value?.$el) {
    resizeObserver.unobserve(tableContainerRef.value.$el);
    resizeObserver = null;
  }

  // 清除定时器
  if ((window as any).resizeTimer) {
    clearTimeout((window as any).resizeTimer);
  }
})

// 监听列表数据变化重新计算列宽
watch(list, () => {
  nextTick(calculateColumnWidths)
}, { deep: true })

</script>

<style scoped>
/* 表格容器样式，确保水平滚动 */
.table-container {
  width: 100%;
  overflow-x: auto;
}

/* 确保表格单元格内容不换行 */
:deep(.el-table .cell) {
  white-space: nowrap;
}

/* 确保表格列标题不换行 */
:deep(.el-table th > .cell) {
  white-space: nowrap;
}

/* 调整表格最小宽度，确保内容完全显示 */
:deep(.el-table) {
  min-width: 100%;
}

/* 强制显示所有内容，防止省略号 */
:deep(.el-table td.el-table__cell),
:deep(.el-table th.el-table__cell) {
  overflow: visible !important;
}

:deep(.el-table .cell) {
  overflow: visible !important;
  text-overflow: clip !important;
}

:deep(.contract-name-column .cell) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* 颜色说明区域样式 */
.color-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  background-color: #f8f9fa;
  border-radius: 4px;
  border-left: 4px solid #e6f7ff;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.color-indicator {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.color-indicator.red {
  background-color: red;
}

.color-indicator.orange {
  background-color: orange;
}
</style>

<style>
/* 设计井身结构 tooltip 样式 - 保留换行符 */
.design-well-struct-tooltip {
  white-space: pre-line;
  max-width: 500px;
  line-height: 1.5;
}
</style>
