<template>
  <div class="statistic-card">
    <el-statistic :value="outputValue" v-bind="$attrs">
      <template #title>
        {{ isFilterLabel(data.label) }}
      </template>
    </el-statistic>
    <div class="statistic-footer" v-if="iforigin">
      <div class="footer-item">
        <div class="flx-center">
          <i class="iconfont iconjiu"></i>
          <span>{{ isFilterPrice(data.origin) }}</span>
        </div>
        <span v-if="getDiscrepancy !== 0" :class="getDiscrepancy > 0 ? 'green' : 'red'" style="text-align: right">
          {{ getDiscrepancy }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="mattressQuoteDetail_statistic-item">
import { ref, watch, computed } from "vue";
import { useTransition } from "@vueuse/core";
// import { CaretTop, CaretBottom } from "@element-plus/icons-vue";
import { floatSub, formatAmount3 } from "@/utils/index";

interface WidgetProps {
  data: any;
  iforigin?: any;
}

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

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

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

const getDiscrepancy = computed(() => {
  return Number(Math.trunc(floatSub(props.data.value, props.data.origin)));
});

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

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;
  padding: 0 8px;

  :deep(.el-statistic) {
    .el-statistic__head {
      color: $color-primary-000 !important;
      // color: var(--lj-color-text-secondary-text) !important;
      margin-bottom: 0;
    }
    .el-statistic__number {
      color: $color-gray-1 !important;
      font-weight: 600;
    }
  }

  .statistic-footer .footer-item {
    font-size: 14px;
    color: $color-primary-100 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
  }

  .statistic-footer .footer-item > span:last-child {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
  }

  .green {
    color: var(--lj-color-polar-green-6);
  }
  .red {
    color: var(--lj-color-dust-red-7);
  }
}
</style>
