<template>
  <div class="summary-wrapper flx" v-for="item in data" :key="item.field">
    <div class="summary-wrapper__label-item flx-end-end" :style="{ width: width + 'px' }">
      <div class="summary-box_item flx-col mt-4">
        <div class="flx-1 text-secondary-text text-body-c text-right">
          {{ prefixLabel }}
          {{ isFilterLabel(item.label) }}
        </div>
        <div class="flx-shrink ml-8 text-right text-h5-b">
          {{ isFilterPrice(isFilterFields(item)) }}
        </div>
      </div>
    </div>
    <div class="flx-1 overflow-auto">
      <FormulaItem :data="item" :fields="fields" :ifFold="item.ifFold" :formula="data" />
    </div>
  </div>
</template>

<script setup lang="ts" name="mattressQuoteDetail_FormulaGroup">
import FormulaItem from "@/views/quote/bednetQuote/components/FormulaItem.vue";
import { formatAmount3 } from "@/utils/index";

interface WidgetProps {
  data: any;
  /**
   * @description 字段对照表
   */
  fields: any[];
  width?: number;
  prefixLabel?: string;
}

const props = withDefaults(defineProps<WidgetProps>(), {
  width: 120
});

const isFilterFields = (data: any) => {
  return props.fields.find(f => f.label == data.label)?.value ?? 0;
};

const isFilterLabel = (val: any) => {
  return val.replace(/【/g, "").replace(/】/g, "");
};

const isFilterPrice = data => {
  let val = formatAmount3({ val: data });
  // 过滤掉末尾的0
  let arr = val.split("");
  while (arr[arr.length - 1] === "0") {
    arr.pop();
  }
  return arr.join("");
};
</script>

<style lang="scss" scoped>
.summary-wrapper {
  margin-bottom: 8px;
  &:hover {
    background: $color-primary-000;
    border-radius: $br-md;
  }
  &__label-item {
    margin-right: $space-a3;

    .summary-box_item {
      position: relative;

      &::after {
        content: "=";
        position: absolute;
        bottom: 0;
        right: -$space-b3;
        font-size: 24px;
        color: $color-text-disable;
      }
    }
  }
}
</style>
