<template>
  <RenderFormulaItem :data="data" :fields="fields" :ifFold="ifFold" />
</template>

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

interface itemProps {
  data: any;
  // /**
  //  * @description 计算公式列表
  //  */
  // formulas: any[];
  /**
   * @description 字段对照表
   */
  fields: any[];
  /**
   * @description 是否展开公式
   */
  ifFold?: boolean;
  // dataValue: any;
  formula?: any[];
}

const props = withDefaults(defineProps<itemProps>(), {
  ifFold: false
});

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);
};

/**
 * @description 点击复制替换的公式
 * @param event
 * @param data 公式数组
 */
const toClickFormula = (e: any, data: any) => {
  e.stopPropagation();

  let _formula = data.map((o, i) => {
    let str = o;
    if (o.indexOf("[") > -1 && o.indexOf("]") > -1) {
      let fieldName = o.slice(1, -1); // 去掉方括号
      let sumVal = props.fields.find(f => {
        let _label = f.label.slice(1, -1);
        if (_label === fieldName) {
          return f;
        }
      });
      str = sumVal.value;
    }
    return str;
  });

  copyFunc(_formula.join(""));
};

const RenderVariable = (data: any, rprops: any) => {
  let fieldName = data.slice(1, -1); // 去掉方括号

  let childrenRender = null;

  if (rprops.data?.children) {
    let _trgItem = rprops.data.children.find(c => {
      let _label = c.label.replace(/【/g, "[").replace(/】/g, "]").slice(1, -1);
      if (_label === fieldName) {
        return c;
      }
    });
    if (_trgItem && !_trgItem.ifFold) {
      let sumVal = props.fields.find(f => {
        let _label = f.label.slice(1, -1);
        if (_label === fieldName) {
          return f;
        }
      });

      childrenRender = (
        <>
          <div class="flx-col flx-end formula-wrapper__item formula-wrapper__item-children">
            <div class="formula-wrapper__item-children-inner">
              <span class="value text-primary-text text-h5-b flx-end-end">
                (<RenderFormulaItem data={_trgItem} fields={props.fields} ifFold={_trgItem.ifFold} />)
              </span>
              <div class="curly-brace">
                <div class="triangle-arrow"></div>
              </div>
            </div>
          </div>
        </>
      );
    }
  }

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

  let _value = "";
  if (sumVal) {
    _value = isFilterPrice(sumVal.value, 4);
    // if (Number(_value) == 0) {
    // _value = sumVal.value;
    // }
    // let isFormulaValue = props.formula.some(o => o.label.indexOf(fieldName) > -1);
    // if (isFormulaValue) {
    //   _value = isFilterPrice(sumVal.value);
    // }
    // } else {
    //   if (rprops.data?.children) {
    //     let _trgItem = rprops.data.children.find(c => {
    //       let _label = c.label.replace(/【/g, "[").replace(/】/g, "]").slice(1, -1);
    //       if (_label === fieldName) {
    //         return c;
    //       }
    //     });
    //     if (_trgItem) {
    //       return (
    //         <>
    //           <div class="flx-col flx-end formula-wrapper__item formula-wrapper__item-children">
    //             <div class="formula-wrapper__item-children-inner">
    //               <el-tooltip effect="dark" content={"= " + _trgItem.value} placement="top">
    //                 <div class="formula-wrapper__item-children-label text-secondary-text text-body-c flx-center w-full">
    //                   {fieldName}
    //                   <el-icon>
    //                     <InfoFilled />
    //                   </el-icon>
    //                 </div>
    //               </el-tooltip>
    //               <span class="value text-primary-text text-h5-b flx-end-end">
    //                 (<RenderFormulaItem data={_trgItem} fields={props.fields} />)
    //               </span>
    //             </div>
    //           </div>
    //         </>
    //       );
    //     } else {
    //       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">0</span>
    //           </div>
    //         </>
    //       );
    //     }
    //   }
  }

  // let _value = sumVal ? isFilterPrice(sumVal.value) : "无";
  return (
    <>
      <div class="flx-col flx-end">
        {!rprops.ifFold && childrenRender}
        <div class="flx-col flx-start 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>
      </div>
    </>
  );
};

const RenderFormulaItem = (rprops: any) => {
  // console.log("RenderFormulaItem props.data :>> ", props.data);
  let fArr = funcFormulaToArray(rprops.data.value);
  // console.log("fArr: --", fArr);
  if (fArr.length > 0) {
    return (
      <>
        {/* <ElScrollbar> */}
        <div class="formula-wrapper" onClick={v => toClickFormula(v, fArr)}>
          {fArr.map((t, i) => {
            if (t.indexOf("[") === 0 && !rprops.data.ifnotreplace) {
              return RenderVariable(t, rprops);
            } else {
              let _t = t.replace(/\*/g, "x");
              if (rprops.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;
  white-space: nowrap;

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

  &__item {
    display: flex;
    padding: 2px 2px 0;

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

    &-children {
      margin-bottom: 0;
      &-inner {
        background-color: $color-primary-000;
        border-radius: $br-sm;
        padding: 4px 4px 0;
      }
      .formula-wrapper__item-children-label {
        margin: 2px 0 0;
        color: $color-text-disable;
        border-radius: $br-sm;
        background-color: var(--lj-color-primary-100);
      }
    }

    .formula-wrapper__item-children-inner {
      .curly-brace {
        position: relative;
        width: 100%; /* 可以设置为任意宽度 */
        height: 8px; /* 根据需要调整高度 */
      }

      .triangle-arrow {
        position: relative;
      }

      .triangle-arrow::after {
        content: "";
        position: absolute;
        bottom: -11px;
        left: calc(50% - -2px);
        width: 5px;
        height: 5px;
        transform-origin: 0 0;
        transform: rotate(45deg) translateX(-50%);
        border-right: 2px solid var(--lj-color-text-border);
        border-bottom: 2px solid var(--lj-color-text-border);
      }

      .curly-brace::before,
      .curly-brace::after {
        content: "";
        position: absolute;
        width: calc(50% - 6px);
        height: calc(100% - 2px);
      }

      .curly-brace::before {
        left: 0;
        top: -1px;
        border-bottom: solid var(--lj-color-text-border);
        border-left: solid var(--lj-color-text-border);
        border-bottom-left-radius: 8px;
      }

      .curly-brace::after {
        right: 0;
        top: -1px;
        border-bottom: solid var(--lj-color-text-border);
        border-right: solid var(--lj-color-text-border);
        border-bottom-right-radius: 8px;
      }
    }

    &:hover:not(.formula-wrapper__item-children) {
      background-color: $color-primary-400;
      border-radius: $br-sm;
      .label {
        color: $color-primary-000;
      }
      .value {
        color: $color-gray-1;
      }
    }
    &:hover {
      .formula-wrapper__item-children-label,
      .label {
        color: $color-primary-000;
      }
      .value {
        color: $color-gray-1;
      }

      .formula-wrapper__item-children {
        &-inner {
          background-color: $color-primary-400;
          > .label {
            color: $color-primary-000;
          }
        }
      }
      &.formula-wrapper__item-children {
        .formula-wrapper__item-children-label {
          background-color: var(--lj-color-primary-700);
        }
      }
    }
  }
}
</style>
