<template>
  <RenderFormulaItem />
</template>

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

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

const props = defineProps<itemProps>();

const funcFormulaToArray = (formula: string) => {
  if (!formula) return [];
  let result = [];
  let lastIndex = 0;
  let _formula = formula;
  _formula = formula.replace(/【/g, "[").replace(/】/g, "]");
  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) => {
  let fieldName = data.slice(1, -1); // 去掉方括号

  let sumVal = props.fields.find(f => {
    let _label = f.label.slice(1, -1);
    if (_label === fieldName) {
      return f;
    }
  });

  let _value = sumVal ? isFilterPrice(sumVal.value) : "无";
  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 = () => {
  // console.log("RenderFormulaItem props.data :>> ", props.data);
  let fArr = funcFormulaToArray(props.data.value);
  // console.log("fArr: --", fArr);
  if (fArr.length > 0) {
    return (
      <>
        {/* <ElScrollbar> */}
        <div class="formula-wrapper">
          {fArr.map((t, i) => {
            if (t.indexOf("[") === 0 && !props.data.ifnotreplace) {
              return <div>{RenderVariable(t)}</div>;
            } else {
              let _t = t.replace(/\*/g, "x");
              if (props.data.ifnotreplace) {
                _t = _t.replace(/\[/g, "【").replace(/\]/g, "】");
              }
              return (
                <>
                  <div class="flx-end-end">
                    <span class="text-h5-r ">{_t}</span>
                  </div>
                </>
              );
            }
          })}
        </div>
        {/* </ElScrollbar> */}
      </>
    );
  }
};
</script>

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

  // display: table;
  // width: max-content;
  user-select: none;

  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;

  & > * {
    // display: table-cell;
    margin-top: 4px;
    margin-left: 4px;
    margin-bottom: 4px;
  }

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

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

    &:hover {
      background-color: $color-primary-400;
      border-radius: $br-sm;
      .label {
        color: $color-primary-000;
      }
      .value {
        color: $color-gray-1;
      }
    }
  }
}
</style>
