<template>
  <RenderFormulaItem />
</template>

<script setup lang="tsx" name="LjToastFormulaItem">
import type { formulasProp } from "../index.vue";
import { ElScrollbar } from "element-plus";

interface itemProps {
  data: any;
  /**
   * @description 计算公式列表
   */
  formulas: formulasProp[];
  /**
   * @description 字段对照表
   */
  fields: formulasProp[];
  dataValue: any;
}

const props = defineProps<itemProps>();

const funcFormulaToArray = (formula: string) => {
  let result = [];
  let lastIndex = 0;
  let fArr = formula.match(/\[(.*?)\]/g); //匹配方括号及其内容。

  fArr.forEach((match, index) => {
    let start = formula.indexOf(match, lastIndex);
    let end = start + match.length;

    // 添加匹配前的部分
    result.push(formula.slice(lastIndex, start));

    // 添加匹配到的内容
    result.push(match);

    // 更新 lastIndex
    lastIndex = end;
  });

  // 添加最后一部分
  result.push(formula.slice(lastIndex));

  return result.filter(t => t);
};

const RenderVariable = (data: any) => {
  console.log("RenderVariable data :>> ", data);

  let fieldId = data.slice(1, -1); // 去掉方括号
  let fieldName = data.slice(1, -1); // 去掉方括号

  console.log("fieldName,  :>> ", fieldName, props.dataValue);

  let sumVal = props.formulas.find(f => {
    if (f.field === fieldName) {
      fieldName = f.label;
      return f;
    } else if (f.label === fieldName) {
      fieldId = f.field;
      return f;
    }
  });
  !sumVal &&
    (sumVal = props.fields.find(f => {
      if (f.field === fieldName) {
        fieldName = f.label;
        return f;
      } else if (f.label === fieldName) {
        fieldId = f.field;
        return f;
      }
    }));

  console.log("RenderVariable sumVal :>> ", sumVal);
  let _value = Object.keys(props.dataValue).includes(fieldId) ? Math.round(props.dataValue[fieldId] * 100) / 100 : "缺失";
  return (
    <>
      <div class="flx-col flx-end formula-wrapper__item">
        <span class="label text-secondary-text text-body-c">{fieldName}</span>
        <span class="value text-primary-text text-h5-b">{_value}</span>
      </div>
    </>
  );
};

const RenderFormulaItem = () => {
  let fArr = funcFormulaToArray(props.data.formula);
  console.log("fArr: --", fArr);
  if (fArr.length > 0) {
    return (
      <>
        {/* <ElScrollbar> */}
        <div class="formula-wrapper flx-start-end">
          {fArr.map((t, i) => {
            if (t.indexOf("[") === 0) {
              return <div>{RenderVariable(t)}</div>;
            } else {
              let _t = t.replace(/\*/g, "x");
              return <span class="text-h5-r ">{_t}</span>;
            }
          })}
        </div>
        {/* </ElScrollbar> */}
      </>
    );
  }
};
</script>

<style lang="scss">
.formula-wrapper {
  // width: 400px;

  // display: table;
  width: max-content;
  user-select: none;
  & > * {
    display: table-cell;
    margin-left: 4px;
  }

  &__item {
    display: flex;
    & + & {
      margin-left: 4px;
    }

    .value {
      color: $color-primary-600;
    }

    &:hover {
      .label {
        color: $color-primary-400;
      }
    }
  }
}
</style>
