<template>
  <div class="summary-wrapper flx" v-for="item in data" :key="item.field">
    <!-- <div class="summary-wrapper flx">
      <div class="summary-wrapper__label flx-col flx-shrink">
        <div class="summary-wrapper__label-item mb-8 flx-end" v-for="item in data" :key="item.field">
          <div class="summary-box_item flx-col">
            <div class="flx-1 text-secondary-text text-body-c text-right">
              {{ isFilterLabel(item.label) }}
            </div>
            <div class="flx-shrink ml-8 text-right text-h5-b">
              {{ isFilterPrice(isFilterFields(item)) }}
            </div>
          </div>
        </div>
      </div>
      <div class="summary-wrapper__vale flx-col flx-1">
        <div class="flx-1 enter-x overflow-auto mb-8" v-for="item in data" :key="item.field">
          <FormulaItem :data="item" :fields="fields" />
        </div>
      </div>
    </div> -->
    <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">
          {{ 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">
      <template v-if="item?.mxformula">
        <FormulaItem v-for="(itm, index) in item?.mxformula" :data="itm" :fields="fields" :formula="data" :key="index" />
      </template>
      <template v-else>
        <FormulaItem :data="item" :fields="fields" :formula="data" />
      </template>
    </div>
  </div>
</template>

<script setup lang="ts" name="bednetQuoteDetail_FormulaGroup">
import {} from "vue";
import FormulaItem from "./FormulaItem.vue";
import { isFilterPrice } from "@/utils/index";

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

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, "");
};
</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>
