<template>
  <div class="container">
    <div class="content">
      <div class="title">
<!--        <el-date-picker-->
<!--            v-model="dateArray"-->
<!--            type="daterange"-->
<!--            range-separator="~"-->
<!--            start-placeholder="开始日期"-->
<!--            end-placeholder="结束日期"-->
<!--        />-->
      </div>
      <div class="content-box">
        <el-table :data="list" style="width: 100%" :summary-method="getSummaries" show-summary>
          <el-table-column prop="date" label="日期" align="center"/>
          <el-table-column label="营业收入" align="center">
            <el-table-column prop="totalMoney" label="总金额" align="center"/>
            <el-table-column prop="totalCost" label="成本" align="center"></el-table-column>
            <el-table-column prop="grossMargin" label="毛利" align="center"></el-table-column>
            <el-table-column prop="grossProfitRate" label="毛利率" align="center"></el-table-column>
            <el-table-column prop="amount1" label="客量" align="center"></el-table-column>
            <el-table-column prop="orderVolume" label="客单" align="center"></el-table-column>
          </el-table-column>
          <el-table-column label="支付方式" align="center">
            <el-table-column prop="paymentMethodVo.medicalInsurancePayment" label="医保" align="center"/>
            <el-table-column prop="paymentMethodVo.wechatPayment" label="微信" align="center"/>
            <el-table-column prop="paymentMethodVo.aliPayment" label="支付宝" align="center"/>
            <el-table-column prop="paymentMethodVo.cashPayment" label="现金" align="center"/>
            <el-table-column prop="paymentMethodVo.otherPayment" label="其他" align="center"/>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {h, onMounted, ref, type VNode} from 'vue'
import {post} from "@/utils/request.ts";
import {getThisWeek} from "@/utils/dateUtils.ts";
import type { TableColumnCtx } from 'element-plus'

const dateArray = ref<any>([])
const list = ref<any>([])



const getDailyReport = ()=>{
  post("charge/dailyChargingReport",{startDate:dateArray.value[0],endDate:dateArray.value[1]} ).then((res:any)=>{
    list.value = res
  })
}
interface SummaryMethodProps<T> {
  columns: TableColumnCtx<T>[]
  data: T[]
}

const getSummaries = (param: SummaryMethodProps<any>) => {
  const { columns, data } = param
  const sums: (string | VNode)[] = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = h('div', [
        '合计',
      ])
      return
    }
    const values = data.map((item:any) => Number(item[column.property]))
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = `${values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!Number.isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)}`
    } else {
      sums[index] = '-'
    }
  })

  return sums
}



onMounted(()=>{
  let thisWeek = getThisWeek()
  dateArray.value[0] = thisWeek.start
  dateArray.value[1] = thisWeek.end
  getDailyReport()
})
</script>
<style scoped lang="scss">
.title{
  margin-bottom: 20px;
}
</style>