<script setup lang="ts">
import Panel from "@/components/common/Panel.vue";
import {onMounted, ref} from "vue";
import {getThisWeek} from "@/utils/dateUtils.ts";
import {post} from "@/utils/request.ts";

onMounted(() => {
  getRevenueOverview()
})
const payTypeRevenue = ref<any>([
  {
    name: '医保支付',
    totalRevenue: 0,
  },
  {
    name: '微信支付',
    totalRevenue: 0,
  },
  {
    name: '支付宝',
    totalRevenue: 0,
  },
  {
    name: '现金支付',
    totalRevenue: 0,
  },
  {
    name: '其他支付',
    totalRevenue: 0,
  }
]);
const background = ref<any>([
  '#F0F4FD',
  '#ECF8FE',
  '#FFF5EC',
  '#FFEEEE',
  '#E5F9FF'
]);
const getRevenueOverview = () => {
  const thisWeek = getThisWeek();
  post("statistics/getRevenueOverview", {beginTime: thisWeek.start, endTime: thisWeek.end}).then((res: any) => {
    if (res.payTypeRevenue.length === 0) return
    payTypeRevenue.value = res.payTypeRevenue
  })

}
</script>

<template>
  <Panel title="支付明细" class="detail-price">
    <div class="detail-price-content">
      <div class="detail-price-content-item" v-for="(item,index) in payTypeRevenue"
           :style="`background:${background[index]}`">
        <img class="detail-price-content-item-image" :src="`/static/images/home/${index+1}.png`" :alt="item.name">
        <div class="detail-price-content-item-text">
          <div class="detail-price-content-item-text-name">{{ item.name }}</div>
          <div class="detail-price-content-item-text-price">￥<span class="price">{{ item.totalRevenue }}</span>
          </div>
        </div>
      </div>
    </div>
  </Panel>
</template>

<style scoped lang="scss">
.detail-price {
  height: 194px;

  &-content {
    padding: 0 24px;
    display: flex;

    &-item {
      flex: 1;
      height: 110px;
      border-radius: 32px;
      margin-right: 16px;
      display: flex;
      align-items: center;

      &:last-child {
        margin-right: 0;
      }

      &-image {
        width: 40px;
        height: 40px;
        margin: 0 16px 0 24px;
      }

      &-text {
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        font-style: normal;
        margin-right: 24px;

        &-price {
          font-weight: 400;
          font-size: 14px;

          .price {
            font-weight: bold;
            font-size: 32px;
          }
        }
      }
    }
  }
}
</style>