<template>
  <div class="bank-report-table" style="height: 80vh" @click="closeTooltip">
    <!-- 加载遮罩层 -->
    <div v-if="loading" class="loading-overlay">
      <div class="loading-spinner">
        <div class="spinner"></div>
        <div class="loading-text">加载中...</div>
      </div>
    </div>

    <vxe-toolbar>
      <template #buttons>
        <div style="margin: 10px">
          <span style="font-weight: bold"> 填报任务：{{ queryParam?.taskName }} </span>
          <span style="font-weight: bold; margin-left: 20px"> 表格：{{ queryParam?.tplCode }} {{ queryParam?.tplName }}</span>
        </div>
      </template>
      <template #tools>
        <vxe-button status="primary" icon="vxe-icon-edit" @click="handleOpenHistoryDrawer()" :disabled="loading">近5年数据填报</vxe-button>
        <vxe-button status="primary" icon="vxe-icon-save" @click="checkData()">校验</vxe-button>
        <vxe-button status="primary" icon="vxe-icon-save" @click="saveBatch()">保存</vxe-button>
      </template>
    </vxe-toolbar>

    <!-- 校验结果抽屉 -->
    <vxe-drawer v-model="drawerVisible" placement="right" @show="handleValidationDrawerShow" title="校验结果" width="40%" :footer="{ show: true }">
      <template #default>
        <div class="validation-results">
          <div class="result-summary">
            <div class="summary-item">
              <span class="summary-label">校验字段数：</span>
              <span class="summary-value">{{ validationResultsList.length }}</span>
            </div>
            <div class="summary-item">
              <span class="summary-label">通过：</span>
              <span class="summary-value success">{{ validationResultsList.filter((item) => item.isValid).length }}</span>
            </div>
            <div class="summary-item">
              <span class="summary-label">失败：</span>
              <span class="summary-value error">{{ validationResultsList.filter((item) => !item.isValid).length }}</span>
            </div>
          </div>
          <div class="results-list">
            <div
              v-for="(result, index) in validationResultsList"
              :key="index"
              class="result-item"
              :class="{ success: result.isValid, error: !result.isValid }"
              @click="handleValidationResultClick(result)"
            >
              <div class="result-field">{{ result.field }}</div>
              <div class="result-desc">{{ result.description }}</div>
              <div class="result-value">值：{{ result.fieldValue || '空' }}</div>
              <div v-if="!result.isValid" class="result-error">失败原因：{{ result.description }}</div>
            </div>
          </div>
        </div>
      </template>
    </vxe-drawer>
    <vxe-table
      border
      ref="tableRef"
      show-header-overflow
      :data="tableFormData"
      height="auto"
      :column-config="{ resizable: true }"
      :row-config="{ resizable: true }"
      class="custom-table"
    >
      <vxe-column field="serialNumber" title="序号" width="80"></vxe-column>
      <vxe-column field="project" title="项目" width="200">
        <template #default="{ row }">
          <span style="font-weight: bold; size: 20px">{{ row.project }}</span>
        </template>
      </vxe-column>
      <vxe-column field="content" title="内容" row-resize>
        <template #default="{ row }">
          <div class="content-cell">
            <template v-if="row.type === 'MultiColumnTable'">
              <MultiColumnTable
                :title="row.project"
                :columnsPerRow="6"
                :records="[]"
                :fields="row.content"
                :ref="(el) => setMultiColumnTableRef(el, row.code)"
                style="margin: 0px; padding: 0px"
              />
            </template>
            <template v-else-if="row.type === 'AttachTable'">
              <AttachTable
                :title="row.project"
                :records="row.datas"
                :fields="row.content"
                :pcode="row.code"
                :calcSum="row.calcSum"
                :ref="(el) => setAttachTableRef(el, row.code)"
                style="margin: 0px; padding: 0px"
              />
            </template>
            <template v-else>
              <template v-for="(item, index) in row.content" :key="index">
                <span v-if="item.type === 'text'" v-html="item.value"></span>
                <span v-else-if="item.type === 'br'"><br /></span>
                <span v-else-if="item.type === 'brspace'">
                  <br />
                  <template v-for="i in item.value || 1" :key="i"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </template>
                </span>

                <template v-else-if="item.type === 'AttachTable'">
                  <AttachTable
                    :title="item.project"
                    :records="item.datas"
                    :fields="item.content"
                    :pcode="item.code"
                    :calcSum="item.calcSum"
                    :ref="(el) => setAttachTableRef(el, item.code)"
                    style="margin: 0px; padding: 0px"
                  />
                </template>

                <template v-else-if="item.type === 'MultiColumnTable'">
                  <MultiColumnTable
                    :title="item.project"
                    :records="[]"
                    :fields="item.content"
                    :ref="(el) => setMultiColumnTableRef(el, item.code)"
                    style="margin: 0px; padding: 0px"
                  />
                </template>

                <template v-else-if="item.type === 'yesno'">
                  <vxe-radio-group v-model="formData[row.code + '_' + item.field]">
                    <vxe-radio label="是" content="是"> </vxe-radio>
                    <vxe-radio label="否" content="否"></vxe-radio>
                  </vxe-radio-group>
                  <template v-if="formData[row.code + '_' + item.field] == '是'">
                    <br />如果是:
                    <template v-if="item.extraField">
                      <span>{{ item.extraField }}</span>
                      <vxe-input v-model="formData[row.code + '_' + item.extraField]" style="width: 100px"></vxe-input>
                    </template>
                    <template v-else-if="item.extraFields">
                      <template v-for="(ccopt, ccind) in item.extraFields" :key="ccind">
                        <span>{{ ccopt.label }}: </span>
                        <template v-if="ccopt.formType == 'input'">
                          <vxe-input v-model="formData[row.code + '_' + ccopt.field]" style="width: 250px"></vxe-input>
                        </template>
                        <template v-else>
                          <vxe-input v-model="formData[row.code + '_' + ccopt.field]" :type="ccopt.formType" style="width: 100px"></vxe-input>
                        </template>
                        <span class="unit"> {{ ccopt.unit }}</span>
                      </template>
                    </template>
                  </template>
                </template>
                <span v-else-if="item.type === 'radio-group'" class="radio-group">
                  <vxe-radio-group v-model="formData[row.code + '_' + item.field]">
                    <vxe-radio v-for="(opt, optIndex) in item.options" :key="optIndex" :label="opt">{{ opt }}</vxe-radio>
                  </vxe-radio-group>
                </span>
                <span v-else-if="item.type === 'radio-group-extraFields'" class="radio-group" style="width: 100%">
                  <vxe-radio-group v-model="formData[row.code + '_' + item.field]">
                    <vxe-radio v-for="(opt, optIndex) in item.options" :key="optIndex" :label="opt.label">
                      {{ opt.label }}
                      <template v-if="opt.extraField && formData[row.code + '_' + item.field] == opt.label">
                        <span>{{ opt.extraField }}</span>
                        <vxe-input v-model="formData[row.code + '_' + opt.otereField]" style="width: 200px"></vxe-input>
                      </template>
                      <template v-if="opt.extraFields && formData[row.code + '_' + item.field] == opt.label">
                        <template v-for="(ccopt, ccind) in opt.extraFields" :key="ccind">
                          <span>{{ ccopt.label }}: </span>
                          <vxe-input v-model="formData[row.code + '_' + ccopt.field]" style="width: 200px"></vxe-input>
                        </template>
                      </template>
                    </vxe-radio>
                  </vxe-radio-group>
                </span>
                <div v-else-if="item.type === 'checkbox-group'" class="checkbox-group">
                  <span class="checkbox-group">
                    <vxe-checkbox-group v-model="formData[row.code + '_' + item.field]">
                      <vxe-checkbox v-for="(opt, optIndex) in item.options" :key="optIndex" :label="opt">
                        {{ opt }}
                      </vxe-checkbox>
                      <template v-if="item.otherOption">
                        <vxe-checkbox style="margin: 0px"> 其它： </vxe-checkbox>
                        <vxe-input v-model="formData[row.code + '_' + item.otereField]" style="width: 100px"> </vxe-input>
                      </template>
                    </vxe-checkbox-group>
                  </span>
                </div>
                <template v-else>
                  <vxe-input :type="item.type" v-model="formData[row.code + '_' + item.field]" size="mini" class="table-input"> </vxe-input>
                  <span class="unit"> {{ item.placeholder }}</span>
                </template>
              </template>
            </template>
          </div>
        </template>
      </vxe-column>
    </vxe-table>

    <!-- 历史填报检查组件 -->
    <HistoryFillCheck ref="historyFillCheckRef" v-model="historyDrawerVisible" @close-drawer="closeHistoryDrawer" />

    <!-- 验证公式帮助提示 -->
    <div
      v-if="validationTooltipVisible"
      class="validation-tooltip"
      :style="{ left: validationTooltipPosition.left + 'px', top: validationTooltipPosition.top + 'px' }"
    >
      <pre class="tooltip-content">{{ validationTooltipContent }}</pre>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import MultiColumnTable from '../tableComponents/MultiColumnTable.vue';
  import AttachTable from '../tableComponents/AttachTable.vue';
  import HistoryFillCheck from './check/historyFillCheck.vue';

  import { tableFormData } from '../../data/tb5.data';
  import { ref, reactive, nextTick, onMounted, toRaw } from 'vue';
  import { VxeUI, VxeToolbarInstance, VxeToolbarPropTypes } from 'vxe-table';
  import { batchSaveOrUpdate, queryRecord, batchSaveOrUpdateBeforeDelete } from '../../record/BaosongTaskRecord.api';
  import { queryAllTplItemForUser, findUserRightForTplItem } from '../../alloc/BaosongTaskAlloc.api';
  import { allTplItems } from '../../tpl/BaosongTplItem.api';
  import { getTblvalidFormula } from '../../tpl/BaosongDataValid.api';
  import { useRoute } from 'vue-router';

  const route = useRoute();
  const tableRef = ref();
  const tplItemMap = ref({});
  const historyFillCheckRef = ref<any>(null);
  const queryParam = ref({
    taskId: -1,
    taskName: '',
    tplId: -1,
    tplName: '',
    tplCode: '',
  });

  // 权限相关状态
  const userAllocItems = ref<string[]>([]);
  const validFormula = ref<any[]>([]);
  const validationResultsList = ref<any[]>([]);
  const drawerVisible = ref(false);
  const historyDrawerVisible = ref(false);
  const validationTooltipVisible = ref(false);
  const validationTooltipPosition = ref({ left: 0, top: 0 });
  const validationTooltipContent = ref('');

  interface FormData {
    id: number | null;
    taskid: number;
    tplid: number;
    itemid?: number;
    itempid?: number;
    content: string;
    tplcode: string;
    rind: number;
  }

  onMounted(async () => {
    if (route.query.taskId) {
      queryParam.value.taskId = Number(route.query.taskId);
    }
    if (route.query.taskName) {
      queryParam.value.taskName = String(route.query.taskName);
    }
    if (route.query.tplId) {
      queryParam.value.tplId = Number(route.query.tplId);
    }
    if (route.query.tplName) {
      queryParam.value.tplName = String(route.query.tplName);
    }
    if (route.query.tplCode) {
      queryParam.value.tplCode = String(route.query.tplCode);
    }

    // 获取权限和验证公式
    try {
      userAllocItems.value = await findUserRightForTplItem({
        tplid: queryParam.value.tplId,
        taskid: queryParam.value.taskId,
      });

      validFormula.value = await getTblvalidFormula({
        tplid: queryParam.value.tplId,
      });
    } catch (error) {
      console.error('获取权限或验证公式失败:', error);
    }

    await setTplItemMap();
    await setData();
  });

  const loading = ref(false);
  const formData = reactive({});

  const formValues = ref<FormData[]>([]);

  const saveBatch = async () => {
    try {
      formValues.value = [];

      for (const strKey in formData) {
        const valData = formData[strKey];
        if (valData) {
          let tmpAry = strKey.split('_');
          await setFormValues(tmpAry[0], tmpAry[1], valData, 1);
        }
      }

      await getAttachTableFormData();
      await getAllMultiTableFormData();

      if (formValues.value.length > 0) {
        await batchSaveOrUpdateBeforeDelete(formValues.value);
        VxeUI.modal.message({ content: '保存成功', status: 'success' });
        //await setData()
      } else {
        VxeUI.modal.message({ content: '没有需要保存的数据', status: 'warning' });
      }
    } catch (error) {
      VxeUI.modal.message({ content: `保存失败: ${error.message}`, status: 'error' });
    } finally {
      loading.value = false;
    }
  };

  const childMultiTableRefs = ref({});
  const setMultiColumnTableRef = (el: any, index: string) => {
    if (el) {
      childMultiTableRefs.value[index] = el;
    }
  };

  const getAllMultiTableFormData = async () => {
    for (const pcode in childMultiTableRefs.value) {
      const child = childMultiTableRefs.value[pcode];
      if (child) {
        const datas = child.getFormData();
        let rind = 0;
        for (const obj of datas) {
          rind++;
          Object.keys(obj).forEach((code) => {
            setFormValues(pcode, code, obj[code], rind);
          });
        }
      }
    }
  };

  const childAttachTableRefs = ref({});
  const setAttachTableRef = (el: any, index: string) => {
    if (el) {
      childAttachTableRefs.value[index] = el; // 保存子组件实例
    }
  };

  const getAttachTableFormData = async () => {
    for (const pcode in childAttachTableRefs.value) {
      const child = childAttachTableRefs.value[pcode];
      if (child) {
        const datas = child.getFormData();

        for (const code in datas) {
          await setFormValues(pcode, code, datas[code], 1);
        }
      }
    }
  };

  const setFormValues = async (pcode, code, valData, rind) => {
    if (!valData) return;
    let vals = Array.isArray(valData) ? valData.join(',') : valData;
    let strKey = pcode + '_' + code;
    const item = tplItemMap.value[strKey];
    const { pid, itemid } = item ?? {};

    let tempForm: FormData = {
      id: null,
      rind: rind,
      taskid: queryParam.value.taskId,
      tplid: queryParam.value.tplId,
      tplcode: code,
      itemid: itemid,
      itempid: pid,
      content: vals,
    };
    formValues.value.push(tempForm);
  };

  async function setData() {
    try {
      loading.value = true;
      const taskId = queryParam.value.taskId;
      const tplid = queryParam.value.tplId;

      Object.keys(formData).forEach((key) => delete formData[key]);

      await setTplItemMap();
      const recordData = await queryRecord({ taskid: taskId, tplid: tplid });

      const valueObj = {};
      for (const data of recordData) {
        const key = `${data.itempid}_${data.itemid}_${data.rind}`;
        valueObj[key] = data.content;
      }
      const shouldSkip = (key) => {
        const refsToCheck = [childMultiTableRefs.value, childAttachTableRefs.value];

        for (const refs of refsToCheck) {
          for (const pcode of Object.keys(refs)) {
            if (key.startsWith(pcode + '_')) {
              return true;
            }
          }
        }
        return false;
      };

      for (const strKey of Object.keys(tplItemMap.value)) {
        if (shouldSkip(strKey)) {
          continue;
        }

        const item = tplItemMap.value[strKey];
        if (!item) continue;

        const { pid, itemid, formTp } = item;
        const dataVal = valueObj[`${pid}_${itemid}_1`];

        if (!dataVal) continue;

        if (formTp === 'checkbox') {
          formData[strKey] = dataVal?.split(',') || [];
        } else {
          formData[strKey] = dataVal || '';
        }
      }

      for (const pcode of Object.keys(childAttachTableRefs.value)) {
        const child = childAttachTableRefs.value[pcode];
        const matchingKeys = Object.keys(tplItemMap.value).filter((key) => key.startsWith(pcode + '_'));

        const attachTableData = {};
        for (const key of matchingKeys) {
          const tmpData = tplItemMap.value[key];
          if (!tmpData) continue;

          const { pid, itemid, formTp, code } = tmpData;
          const valueKey = `${pid}_${itemid}_1`;

          if (formTp === 'checkbox') {
            attachTableData[code] = valueObj[valueKey]?.split(',') || [];
          } else {
            attachTableData[code] = valueObj[valueKey] || '';
          }
        }

        child.setFormData(attachTableData);
      }

      for (const pcode of Object.keys(childMultiTableRefs.value)) {
        const child = childMultiTableRefs.value[pcode];
        const matchingKeys = Object.keys(tplItemMap.value).filter((key) => key.startsWith(pcode + '_'));

        const rowsMap = {};
        for (const key of matchingKeys) {
          const tmpData = tplItemMap.value[key];
          if (!tmpData) continue;

          const { pid, itemid, code } = tmpData;
          const valKeys = Object.keys(valueObj).filter((k) => k.startsWith(`${pid}_${itemid}_`));

          for (const valKey of valKeys) {
            const parts = valKey.split('_');
            const rind = parts[2];

            if (!rowsMap[rind]) {
              rowsMap[rind] = {};
            }

            rowsMap[rind][code] = valueObj[valKey];
          }
        }

        const tableDatas = Object.values(rowsMap);
        nextTick();
        child.setFormData(tableDatas);
      }
    } catch (error) {
      VxeUI.modal.message({
        content: `加载数据失败: ${error.message}`,
        status: 'error',
      });
    } finally {
      loading.value = false;
    }
  }

  async function setTplItemMap() {
    try {
      const taskId = queryParam.value.taskId;
      const tplid = queryParam.value.tplId;
      const tplItem = await allTplItems({
        tplid: tplid,
      });

      tplItem.forEach((item) => {
        let strKey = item.pcode + '_' + item.xmlcode;
        tplItemMap.value[strKey] = { pid: item.pid, itemid: item.id, formTp: item.formTp, code: item.xmlcode };
      });
    } catch (error) {
      VxeUI.modal.message({ content: `加载数据失败: ${error.message}`, status: 'error' });
    } finally {
    }
  }

  // 校验数据
  const checkData = () => {
    drawerVisible.value = true;
  };

  // 校验结果抽屉显示时触发
  const handleValidationDrawerShow = () => {
    performValidation();
  };

  // 执行校验
  const performValidation = () => {
    validationResultsList.value = [];
    const process: string[] = [];
    process.push('开始校验');
    process.push(`找到 ${validFormula.value.length} 个验证公式`);

    validFormula.value.forEach((formulaItem: any) => {
      process.push(`开始校验公式: ${formulaItem.des}`);
      const result = evaluateFormula(formulaItem.formula, formulaItem.des, process);
      if (result) {
        validationResultsList.value.push(result);
      }
    });
    process.push('校验完成');
  };

  // 解析和执行验证公式
  const evaluateFormula = (formula: string, description: string, process: string[]): any => {
    try {
      const fieldMatch = formula.match(/\[(\w+)\]/);
      if (!fieldMatch) {
        process.push(`跳过: 无法解析公式字段 ${formula}`);
        return null;
      }

      const fieldName = fieldMatch[1];
      const row = tableFormData.find((r: any) => r.content?.some((c: any) => c.field === fieldName));
      if (!row) {
        process.push(`跳过: 未找到字段 ${fieldName}`);
        return null;
      }

      const fieldItem = row.content.find((c: any) => c.field === fieldName);
      if (!fieldItem) {
        process.push(`跳过: 未找到字段 ${fieldName}`);
        return null;
      }

      const strKey = `${row.code}_${fieldName}`;
      const fieldValue = formData[strKey];

      // 检查是否有空字段规则
      const emptyFieldRule = validFormula.value.find((f: any) => f.formula.includes(fieldName) && f.des.includes('空字段'));

      if (emptyFieldRule && (!fieldValue || fieldValue === '')) {
        process.push(`跳过: 字段 ${fieldName} 为空，跳过空字段规则`);
        return null;
      }

      const expression = formula.replace(/\[(\w+)\]/g, (_, field) => {
        const value = formData[`${row.code}_${field}`];
        return value !== undefined ? `Number(${value})` : '0';
      });

      process.push(`执行公式: ${expression}`);
      const isValid = eval(expression);

      return {
        field: fieldName,
        description: description,
        formula: formula,
        isValid: isValid,
        fieldValue: fieldValue,
        rowCode: row.code,
      };
    } catch (error) {
      process.push(`公式执行错误: ${error instanceof Error ? error.message : String(error)}`);
      return null;
    }
  };

  // 处理校验结果点击，定位到表格
  const handleValidationResultClick = (result: any) => {
    const row = tableFormData.find((r: any) => r.code === result.rowCode);
    if (row) {
      const fieldItem = row.content.find((c: any) => c.field === result.field);
      if (fieldItem) {
        const strKey = `${row.code}_${result.field}`;
        const inputElement = document.querySelector(`[data-field="${strKey}"]`) as HTMLElement;
        if (inputElement) {
          inputElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
          inputElement.focus();
          inputElement.style.border = '2px solid #ff4d4f';
          setTimeout(() => {
            inputElement.style.border = '';
          }, 2000);
        }
      }
    }
  };

  // 显示验证公式帮助
  const showValidationHelp = (formulaItem: any, event: MouseEvent) => {
    const rect = (event.target as HTMLElement).getBoundingClientRect();
    validationTooltipPosition.value = {
      left: rect.left + rect.width / 2,
      top: rect.top - 10,
    };
    validationTooltipContent.value = `验证公式: ${formulaItem.formula}\n说明: ${formulaItem.des}`;
    validationTooltipVisible.value = true;
  };

  // 关闭验证公式帮助
  const closeTooltip = () => {
    validationTooltipVisible.value = false;
  };

  // 打开历史填报抽屉
  const handleOpenHistoryDrawer = () => {
    historyDrawerVisible.value = true;
  };

  // 关闭历史填报抽屉
  const closeHistoryDrawer = () => {
    historyDrawerVisible.value = false;
  };
</script>

<style lang="less" scoped>
  .bank-report-table {
    font-family: 'SimSun', '宋体', serif;
    font-size: 12px;
    color: #000;
    margin: 5px auto;
    width: 100%;
  }

  .custom-table {
    width: 100%;
    border: 1px solid #000;
  }

  .custom-table .vxe-header--column,
  .custom-table .vxe-body--column {
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 5px;
  }

  .custom-table .vxe-cell {
    padding: 5px;
  }

  .content-cell {
    line-height: 1.8;
  }

  .table-input {
    width: 80px;
    margin: 0 2px;
  }

  .radio-group {
    display: inline-block;
    margin-right: 10px;
  }

  .checkbox-group {
    display: inline-block;
    margin-right: 10px;
  }

  .vxe-radio,
  .vxe-checkbox {
    margin-right: 8px;
    white-space: nowrap;
  }

  /* 加载遮罩层 */
  .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  .loading-spinner {
    text-align: center;
  }

  .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 10px;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .loading-text {
    font-size: 14px;
    color: #666;
  }

  /* 校验结果 */
  .validation-results {
    padding: 20px;
  }

  .result-summary {
    display: flex;
    gap: 40px;
    margin-bottom: 20px;
    padding: 15px;
    background: #f5f5f5;
    border-radius: 4px;
  }

  .summary-item {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .summary-label {
    font-weight: 500;
    color: #666;
  }

  .summary-value {
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }

  .summary-value.success {
    color: #52c41a;
  }

  .summary-value.error {
    color: #ff4d4f;
  }

  .results-list {
    max-height: 500px;
    overflow-y: auto;
  }

  .result-item {
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .result-item:hover {
    transform: translateX(5px);
  }

  .result-item.success {
    background: #f6ffed;
    border: 1px solid #b7eb8f;
  }

  .result-item.error {
    background: #fff2f0;
    border: 1px solid #ffccc7;
  }

  .result-field {
    font-weight: bold;
    margin-bottom: 4px;
  }

  .result-desc {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
  }

  .result-value {
    font-size: 12px;
    color: #888;
  }

  .result-error {
    font-size: 12px;
    color: #ff4d4f;
    margin-top: 4px;
  }

  /* 验证公式帮助提示 */
  .validation-tooltip {
    position: fixed;
    background: #333;
    color: white;
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 9999;
    transform: translateX(-50%);
    white-space: pre-wrap;
    max-width: 300px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  .tooltip-content {
    margin: 0;
  }
</style>
