<template>
  <el-tooltip class="box-item" effect="dark" placement="left">
    <template #content>
      <div class="flx-col" style="width: 150px">
        <div class="flx">
          <span>
            {{ isFilterLabel(data.label) }}
          </span>
          <div class="text-body-c ml-4 flx-1 text-right">
            {{ isFilterPrice(outputValue) }}
          </div>
        </div>
        <div class="flx" v-if="iforigin">
          <span>旧核价报价</span>
          <div class="text-body-c ml-4 flx-1 text-right">
            {{ isFilterPrice(data.origin) }}
          </div>
        </div>
        <div class="flx" v-if="iforigin">
          <span>与旧核价相差</span>
          <div class="text-body-c ml-4 flx-1 text-right">
            {{ getDiscrepancy > 0 ? "+" : "" }}
            {{ getDiscrepancy }}
          </div>
        </div>
        <div class="flx" v-if="ifMoneyrate">
          <span>{{ currentMoneyrate.label }}</span>
          <div class="text-body-c ml-4 flx-1 text-right">
            {{ cprRateValue }}
          </div>
        </div>
      </div>
    </template>
    <div class="statistic-card">
      <el-statistic :value="outputValue" v-bind="$attrs">
        <template #title>
          {{ isFilterLabel(data.label) }}
          <div class="text-f-c text-secondary-text" v-if="ifMoneyrate">
            {{ currentMoneyrate.label }}
          </div>
        </template>
        <template #suffix>
          <div class="text-body-c text-secondary-text ml-4" v-if="ifMoneyrate" style="font-weight: 500">
            {{ cprRateValue }}
          </div>
        </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 > 0 ? "+" : "" }}
            {{ getDiscrepancy }}
          </span>
        </div>
      </div>
    </div>
  </el-tooltip>
</template>

<script setup lang="ts" name="mattressQuoteDetail_statistic-item">
import { ref, watch, computed, inject } 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;
  moneyrate?: any;
  ifMoneyrate?: any;
}

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

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

const enumMap = inject("mainEnumMap", ref(new Map()));

console.log("mattressQuoteDetail_statistic enumMap :>> ", enumMap);

const currentMoneyrate = computed(() => {
  let _enum = enumMap.value.get("moneyrate") ?? [];
  let item = _enum.find(item => item.value === props.ifMoneyrate);
  return item ?? { label: "暂无数据" };
});

const cprRateValue = computed(() => {
  let _moneyrate = props.moneyrate == 0 ? 1 : props.moneyrate;
  return formatAmount3({ val: source.value / _moneyrate });
});

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;
      color: var(--lj-color-text-primary-text) !important;
      margin-bottom: 0;
    }
    .el-statistic__number {
      // color: $color-gray-1 !important;
      color: $color-primary-600 !important;
      font-weight: 600;
    }
  }

  .statistic-footer .footer-item,
  .statistic-suffix {
    font-size: 14px;
    // color: $color-primary-100 !important;
    color: $color-primary-400 !important;
    // color: var(--lj-color-text-primary-text) !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,
  .statistic-suffix.green {
    color: var(--lj-color-polar-green-7) !important;
  }
  .red,
  .statistic-suffix.red {
    color: var(--lj-color-dust-red-7) !important;
  }

  :deep(.el-statistic__head),
  :deep(.el-statistic__content) {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
