<template>
  <div class="statistic-card">
    <el-statistic :value="outputValue" v-bind="$attrs">
      <template #title>
        {{ isFilterLabel(data.label) }}
      </template>
    </el-statistic>
  </div>
</template>

<script setup lang="ts" name="mattressQuoteDetail_statistic-item">
import { ref, watch } from "vue";
import { useTransition } from "@vueuse/core";

interface WidgetProps {
  data: any;
}

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

const source = ref(0);
const outputValue = useTransition(source, {
  duration: 800
});

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

watch(
  () => props.data,
  val => {
    console.log("mattressQuoteDetail_statistic-item val :>> ", val);
    source.value = val.value;
  },
  { immediate: true, deep: true }
);
</script>

<style lang="scss" scoped>
// :global(h2#card-usage ~ .example .example-showcase) {
//   background-color: var(--el-fill-color) !important;
// }

.el-statistic {
  --el-statistic-content-font-size: 22px;
}

.statistic-card {
  // height: 100%;
  // padding: 20px;
  // border-radius: 4px;
  // background-color: $color-gray-3;
  text-align: center;

  :deep(.el-statistic) {
    .el-statistic__head {
      color: $color-primary-100 !important;
      margin-bottom: 0;
    }
    .el-statistic__number {
      color: $color-gray-1 !important;
    }
  }
}
</style>
