<template>
  <div class="custom-bg mt-[5rem] aspect-[4/1] flex items-center justify-center">

    <div class="mt-[3.5rem] custom-border px-[2.5rem] pt-[1.5rem] h-full">
      <div class="text-[#44C1EF] italic text-[3.5rem] font-700 mb-[2.5rem]">总缴费</div>
      <div class="mb-[1.75rem] z-10 font-700 leading-[1] flex items-baseline">
        <span class="text-[5.5rem] italic text-color" :data-text="`${paymentData.chargeTotal || 0}`">{{ paymentData.chargeTotal || 0 }}</span>
        <span class="text-[3rem] text-color" data-text="人">人</span>
      </div>
      <div class="z-10 font-700 leading-[1] flex items-baseline">
        <span class="text-[3rem] italic text-color" :data-text="`退款:${paymentData.refundTotal || 0}`">退款:{{ paymentData.refundTotal || 0 }}</span>
        <span class="text-[3rem] text-color" data-text="人">人</span>
      </div>
    </div>

    <div class="mt-[3.5rem] custom-border px-[3.5rem] justify-items-center pt-[1.5rem] h-full">
      <div class="text-[#44C1EF] italic text-[3.5rem] font-700">今日缴费</div>
      <div class="font-700 leading-[1] flex items-baseline justify-center mt-[1rem] mb-[1.5rem]">
        <span class="text-[5.5rem] italic text-color" :data-text="paymentData.toDayTotal">{{ paymentData.toDayTotal || 0 }}</span>
        <span class="text-[3rem] text-color" data-text="人">人</span>
      </div>
      <div :class="`${paymentDifferent > 0 ? 'text-[#4AFFA2]' : 'text-[#FF4E4E]'} text-[2.5rem] flex items-center flex-wrap justify-center`">
        <span class="">较昨日</span>
        <SvgIcon :name="paymentDifferent > 0 ? 'arrow-up' : 'arrow-down'" class="text-[1.5rem]" />
        <span>{{ Math.abs(paymentDifferent) }}人</span>
      </div>
    </div>

    <div class="mt-[3.5rem] custom-border pl-[2.25rem] pr-[2rem] justify-items-center pt-[1.5rem] h-full">
      <div class="text-[#44C1EF] italic text-[3.5rem] font-700 mb-[3.5rem]">企微获客</div>
      <div class="leading-[1] flex items-baseline mb-[1.5rem] z-10 font-700">
        <span class="text-[4.5rem] italic text-color" :data-text="gainData.acqTotal || 0">{{ gainData.acqTotal || 0 }}</span>
        <span class="text-[3rem] text-color" data-text="人">人</span>
      </div>
    </div>

    <div class="mt-[3.5rem] px-[2.5rem] justify-items-center pt-[1.5rem] h-full">
      <div class="text-[#44C1EF] italic text-[3.5rem] font-700">今日获客</div>
      <div class="leading-[1] flex items-baseline justify-center mt-[1rem] mb-[1.5rem] z-10 font-700">
        <span class="text-[4.5rem] italic text-color" :data-text="gainData.toDayAcq || 0">{{ gainData.toDayAcq || 0 }}</span>
        <span class="text-[3rem] text-color" data-text="人">人</span>
      </div>
      <div :class="`${gainDifferentTody > 0 ? 'text-[#4AFFA2]' : 'text-[#FF4E4E]'} text-[2.5rem] flex items-center flex-wrap justify-center`">
        <span class="">较昨日</span>
        <SvgIcon :name="gainDifferentTody > 0 ? 'arrow-up' : 'arrow-down'" class="text-[1.5rem]" />
        <span>{{ Math.abs(gainDifferentTody) }}人</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import SvgIcon from "@/components/svg-icon/SvgIcon.vue";

  const paymentData = inject("paymentData", ref({ chargeTotal: 0, estimatedTotal: 0, items: [], toDayTotal: 0, yesterdayTotal: 0,refundTotal:0 }));
  const gainData = inject("gainData", ref({ acqTotal: 0, goalTotal: 0, toDayAcq: 0, yestertDayAcq: 0 }));

  const paymentDifferent = computed(() => {
    if (
      Object.prototype.toString.call(paymentData.value.toDayTotal) !== "[object Undefined]" &&
      Object.prototype.toString.call(paymentData.value.yesterdayTotal) !== "[object Undefined]"
    ) {
      return paymentData.value.toDayTotal - paymentData.value.yesterdayTotal;
    } else {
      return 0;
    }
  });

  const gainDifferentTody = computed(() => {
    if (
      Object.prototype.toString.call(gainData.value.toDayAcq) !== "[object Undefined]" &&
      Object.prototype.toString.call(gainData.value.yestertDayAcq) !== "[object Undefined]"
    ) {
      return gainData.value.toDayAcq - gainData.value.yestertDayAcq;
    } else {
      return 0;
    }
  });
</script>

<style lang="scss" scoped>
  @use "@/styles/text-color.scss";

  .custom-bg {
    background-image: url("/images/top-bg.png");
    background-position: center;
    background-size: cover;
  }

  .custom-border {
    border-right: 1px solid;
    border-image: linear-gradient(180deg, #217ac600, #227cc8, #217ac600) 1 1;
  }
</style>
