<script setup lang="ts">
import Panel from "@/components/common/Panel.vue";
import {onMounted, ref} from "vue";
import {formatDateArray, getEndOfDay, getThisMonth, getThisWeek, getToday, getYesterday} 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 getDateRange = () => {
  let beginTime = ''
  let endTime = ''
  if (curDate.value == null) {
    let dateArray = selectDate.value
    beginTime = dateArray[0]
    endTime = dateArray[1]
  } else {
    const date = curDate.value?.func
    beginTime = date.start
    endTime = date.end
  }
  if (beginTime==endTime){
    endTime=getEndOfDay(endTime)
  }
  return {begin: beginTime, end: endTime}
}
const getRevenueOverview = () => {
  let date=getDateRange()
  post("statistics/getRevenueOverview", {
    beginTime: date.begin,
    endTime: date.end}).then((res: any) => {
    if (res.payTypeRevenue.length === 0) return
    payTypeRevenue.value = res.payTypeRevenue
  })

}
const dataSelector = [
  {name: '今天', func: getToday()},
  {name: '昨天', func: getYesterday()},
  {name: '本周', func: getThisWeek()},
  {name: '本月', func: getThisMonth()},
]
const selectDate = ref();
const curDate = ref<any>(dataSelector[0])
const changeCheckDate = (dateItem: any) => {
  curDate.value = dateItem
  selectDate.value = null
  getRevenueOverview()
}
const changeDate = (date: any) => {
  curDate.value = null
  selectDate.value = formatDateArray(date)
  getRevenueOverview()
}
</script>

<template>
  <Panel title="支付明细" class="detail-price">
    <template #tools>
      <div class="time">
        <div class="time_box"
             v-for="(item,index) in dataSelector"
             :key="index"
             :class="{active:curDate?.name==item.name}"
             @click="changeCheckDate(item)"
        >
          <span>{{ item.name }}</span>
        </div>
        <el-date-picker
            v-model="selectDate"
            type="daterange"
            @change="changeDate"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="margin-left: 24px"
        />
      </div>
    </template>
    <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">
.time {
  display: flex;
  align-items: center;

  .time_box {
    padding: 0 5px;
    height: 30px;
    border: 1px solid #d7d9da;
    color: #000;
    font-size: 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
    &:hover {
      color: #fff;
      background: rgba(#4D6DE4,0.5);
    }

  }
}
.active{
  color: #fff !important;
  background: #4D6DE4;
}
.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>